前端学习（1801）：前端调试之清除浮动练习3
生活随笔
收集整理的這篇文章主要介紹了
前端学习（1801）：前端调试之清除浮动练习3
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
index.html
<!DOCTYPE html> <html lang="en"><head><!--系統內置 start--><script type="text/javascript"></script><!--系統內置 end--><meta charset="UTF-8"><title>練習</title><!-- 不要忘記引入index.css --><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><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li class="margin-off"><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></li><li class="margin-off"><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米<小愛老師></li><li class="intro">口袋里的英語外教</li><li class="price">499元起</li></ul></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; } .phone{margin-top:22px;display:block;height:130px;background:url(./images/phone.jpg) no-repeat center;background-size:contain;margin-bottom:16px;}.clearfix::after{content:'';display:block;clear:both; } ul{list-style:none;} .title{height: 17px; font-size: 12px; line-height: 17px; color: #000000; text-align:center; margin-bottom:4px;} .intro{height: 17px; font-size: 12px; line-height: 17px; color: #A8A8A8; text-align:center; margin-bottom:8px;} .price{height: 17px; font-weight: 500; font-size: 12px; line-height: 17px; color: #FD6821; text-align:center;}運行結果
總結
以上是生活随笔為你收集整理的前端学习（1801）：前端调试之清除浮动练习3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（1702）：前端系列javas
- 下一篇： 前端学习（1834）：前端面试题之从ur