淘宝小练习#css

时间:2019-08-18
本文章向大家介绍淘宝小练习#css,主要包括淘宝小练习#css使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

.box {
background: #f4f4f4;
}

/* 头部样式STAR */
.top-header {
text-align: center;
display: flex;
height: 42px;
width: 600px;
line-height: 42px;
margin-left: 200px;
border: 2px solid rgb(255, 97, 0);
background: rgb(255, 97, 0);
border-radius: 30px;
margin: 0 auto;
cursor: pointer;
}

.search-left,
.search-right {
color: aliceblue;
width: 50px;
font-weight: 900;
}

.top-header>.search-mid {
height: 42px;
background: #fff;
flex-grow: 1;
}

.top-header>.search-mid input {
height: 36px;
width: 450px;
font-size: 16px;
border: none;
outline: none;
}

/* 头部样式END */
.main,
.icon-say {
display: flex;
}

/* 左边样式 start */
.left,
.right {
list-style: none;
margin: 10px 30px;
}

/* 有好货logo */
.ul-top {
margin: 10px 20px;
cursor: pointer;
}

.ulimg {
width: 74px;
height: 24px;
}

.ulspan {
font-size: 12px;
color: #999;
}

/* 动态生成内容 */
.list {
width: 630px;
display: flex;
list-style: none;
}

.list>a>li {
display: inline-block;
margin-left: 20px;
}

.list>a .img {
width: 180px;
height: 180px;
}

.list>a .say {
color: #35b1ff;
width: 170px;
font-size: 12px;
}

.list>a>li .leftdetal {
width: 170px;
height: 23px;
overflow: hidden;
}

.list>a>li .desc {
color: #999;
width: 170px;
height: 22px;
overflow: hidden;
font-size: 14px;
}

.list>.icon-say .icon {
font-size: 16px;
}

/* 左边样式END */
/* 右边样式start */
.main>.right>.ul-top>.more {
font-size: 14px;
color: #999;
cursor: pointer;
margin-left: 396px;
}

.rightdetal {
height: 45px;
width: 170px;
line-height: 45px;
overflow: hidden;
font-size: 17px;
color: #999;
}

.main>.right>.ul-top>.more img {
height: 12px;
width: 12px;
}

/* 右边样式end */

原文地址:https://www.cnblogs.com/ljj-233/p/11373166.html