当前位置 : 主页 > 网页制作 > css >

淘宝小练习#css

来源:互联网 收集:自由互联 发布时间:2021-06-13
* { 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 s
* { 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 */
网友评论