淘宝小练习#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 */