<!DOCTYPE html>
<html lang="en"><head><!--系统内置 start--><script type="text/javascript"></script><!--系统内置 end--><meta charset="UTF-8"><title>练习</title><link rel="stylesheet" href="index.css">
</head><body><section class="section-goods"><main class="main-good-list"><!--商品头部--><header class="clearFix"><div class="title-left">智能</div><ul class="title-right"><li class="selected">智能</li><li>安防</li><li>出行</li></ul></header><!--商品列表--><ul class="good-list clearFix"><li></li><li></li><li></li><li></li><li class="margin-off"></li><li></li><li></li><li></li><li></li><li class="margin-off"></li></ul><a class="book" href="#"></a></main></section>
</body></html>index.css
* {margin: 0px;padding: 0px;box-sizing: border-box;
}ul {list-style: none;
}.clearFix::after {content: '';display: block;clear: both;
}.section-goods {width: 1439px;background: #F5F5F5;
}.main-good-list {width: 1048px;margin: 0 auto;
}/*商品头部*/
.title-left {float: left;color: #000000;font-size: 20px;line-height: 54px;
}.title-right {float: right;
}.title-right>li {position: relative;box-sizing: border-box;float: left;margin-left: 20px;line-height: 54px;color: #999999;font-size: 16px;
}.title-right>li.selected {margin-left: 0px;color: #FD6821;
}.title-right>li.selected::after {content: '';position: absolute;bottom: 11px;left: 1px;width: 30px;height: 2px;background: #FD6821;
}
.good-list>li {float: left;width: 200px;height: 256px;margin-right: 12px;margin-bottom: 12px;background-color: #FFFFFF;
}.good-list>li.margin-off {margin-right: 0px;
}/*电纸书*/
.book {display: block;width: 1048px;height: 103px;margin: 0 auto;margin-top: 20px;background: url(./images/book.jpg) no-repeat center;background-size: contain;
}
运行结果
