【学习笔记】HTML+CSS模仿静态淘宝首页

科技2026-02-02 8

一、先上一张成果图

二、已上传Github

https://github.com/ImDaret/Front-end-learning

三、直接上代码（头大预警）

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淘宝网 - 淘！我喜欢</title> <link rel="stylesheet" href="taobao.css"> <link rel="icon" href="favicon.ico" /> </head> <body> <div class="container"> <header> <div class="left"> <ul> <li> <a href="#">中国大陆</a> <span class="iconfont arrow"></span> </li> <li > <a href="#" style="color: #ff5000;">亲，请登录</a> </li> <li> <a href="#">免费注册</a> </li> <li> <a href="#">手机逛淘宝</a> </li> </ul> </div> <div class="right"> <ul> <li> <a href="#">我的淘宝</a> <span class="iconfont arrow"></span> </li> <li> <span class="iconfont mr5"></span> <a href="#">购物车</a> <span class="iconfont arrow"></span> </li> <li> <a href="#"><span class="iconfont mr5 store"></span>收藏夹</a> <span class="iconfont arrow"></span> </li> <li> <a href="#">商品分类</a> </li> <li><span class="colorD">|</span></li> <li> <a href="#">千牛卖家中心</a> <span class="iconfont arrow"></span> </li> <li> <a href="#">联系客服</a> <span class="iconfont arrow"></span> </li> <li> <span class="iconfont mr5"></span> <a href="#">网站导航</a> <span class="iconfont arrow"></span> </li> </ul> </div> </header> <div class="advertisement"> <a href="https://market.m.taobao.com/app/miniapp-biz/taoxiaopuPc/index.html?spm=a21bo.2017.201855.1.5af911d9I1YCFx&acm=lb-zebra-634493-8608804.1003.4.8190183&scm=1003.4.lb-zebra-634493-8608804.OTHER_15917254192631_8190183"> <img src="https://img.alicdn.com/tfs/TB1OaEjIhD1gK0jSZFsXXbldVXa-1190-70.png" alt="淘宝小铺"> </a> </div> <nav> <div class="navbar">  <div class="navleft"> <img src="./images/logo.png" alt="" style="margin-left: 30px;"> </div>  <div class="navmiddle">  <ul class="top"> <li style="color: #fff; font-weight: bold; border-radius: 6px 6px 0 0; background-image: linear-gradient(to right, #ff9000, #ff5000);">宝贝</li> <li>天猫</li> <li>店铺</li> </ul> <br/> <input type="text" /> <div class="placehorder"> <i class="iconfont"></i> <span>显瘦牛仔背带裤</span> </div> <span class="iconfont imgSearch"></span> <button>搜索</button> <ul class="bottom"> <li> <a href="#">新款连衣裙</a> </li> <li> <a href="#">四件套</a> </li> <li> <a href="#" style="color: #f40;">潮流T恤</a> </li> <li> <a href="#">时尚女鞋</a> </li> <li> <a href="#">短裤</a> </li> <li> <a href="#">半身裙</a> </li> <li> <a href="#">男士外套</a> </li> <li> <a href="#">墙纸</a> </li> <li> <a href="#">行车记录仪</a> </li> <li> <a href="#">新款男鞋</a> </li> <li> <a href="#">耳机</a> </li> <li> <a href="#">时尚女包</a> </li> <li> <a href="#">沙发</a> </li> </ul> </div>  <div class="navright"> <a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html? spm=a21bo.2017.201858.1.5af911d9DWAa2W&acm=lb-zebra-634493-8609660.1003.4.8190782&scm=1003.4.lb-zebra-634493-8609660.OTHER_15917281779251_8190782"> <span class="c5">手机淘宝</span> <img src="data:image/png;base64,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" alt=""> </a> </div> </div> </nav> <div class="bar"> <h2>主题市场</h2> <ul> <li><a href="#">天猫</a></li> <li><a href="#">聚划算</a></li> <li><a href="#">天猫超市</a></li> <li class="line">|</li> <li><a href="#">淘抢购</a></li> <li><a href="#">电器城</a></li> <li><a href="#">司法拍卖</a></li> <li><a href="#">淘宝心选</a></li> <li><a href="#">兴农脱贫</a></li> <li class="line">|</li> <li><a href="#">飞猪旅行</a></li> <li><a href="#">智能生活</a></li> <li><a href="#">苏宁易购</a></li> </ul> </div> <br> <main> <div class="fuzhu">  <div class="mainleft"> <ul> <li> <a href="#">女装</a> / <a href="#">内衣</a> / <a href="#">家居</a> <span class="iconfont fr"></span> </li> <li> <a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a> <span class="iconfont fr"></span> </li> <li> <a href="#">男婴</a> / <a href="#">童装</a> / <a href="#">玩具</a> <span class="iconfont fr"></span> </li> <li> <a href="#">男装</a> / <a href="#">运动户外</a> <span class="iconfont fr"></span> </li> <li> <a href="#">美妆</a> / <a href="#">彩妆</a> / <a href="#">个护</a> <span class="iconfont fr"></span> </li> <li> <a href="#">手机</a> / <a href="#">数码</a> / <a href="#">企业</a> <span class="iconfont fr"></span> </li> <li> <a href="#">大家电</a> / <a href="#">生活电器</a> <span class="iconfont fr"></span> </li> <li> <a href="#">零食</a> / <a href="#">生鲜</a> / <a href="#">茶酒</a> <span class="iconfont fr"></span> </li> <li> <a href="#">厨具</a> / <a href="#">收纳</a> / <a href="#">清洁</a> <span class="iconfont fr"></span> </li> <li> <a href="#">家纺</a> / <a href="#">家饰</a> / <a href="#">鲜花</a> <span class="iconfont fr"></span> </li> <li> <a href="#">图书音像</a> / <a href="#">文具</a> <span class="iconfont fr"></span> </li> <li> <a href="#">医药保健</a> / <a href="#">进口</a> <span class="iconfont fr"></span> </li> <li> <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a> <span class="iconfont fr"></span> </li> <li> <a href="#">装修</a> / <a href="#">建材</a> / <a href="#">家具</a> <span class="iconfont fr"></span> </li> <li> <a href="#">手表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a> <span class="iconfont fr"></span> </li> </ul> </div>  <div class="mainmiddle"> <div class="imgbox1"> <a href="#"> <img src="https://img.alicdn.com/tfs/TB1oQefPBr0gK0jSZFnXXbRRXXa-520-280.jpg_q90_.webp" alt=""> </a> </div> <div class="imgbox2"> <a href="#"> <img src="https://img.alicdn.com/imgextra/i3/2838892713/O1CN01Cfgot31Vub8nHmyom_!!2838892713.jpg_400x400q90.jpg_.webp" alt=""> </a> </div> <div class="imgbox3"> <div class="topimg"> <span class="left">理想生活上天猫</span> <span class="right"><i>1</i>/6</span> </div> <div class="line"> <span></span> </div> <div class="img"> <a href="#"> <img src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg" alt=""> </a> <a href="#" style="float: right;"> <img src="https://aecpm.alicdn.com/simba/img/TB13xKuLVXXXXcHapXXSutbFXXX.jpg" alt=""> </a> </div> </div> <div class="imgbox4"> <p class="title">今日热卖</p> <a href="#"> <img src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" alt=""> </a> </div> </div>  <div class="mainright"> <div class="mainrightTop"> <div class="self"> <img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg" alt=""> <p>Hi！你好</p> <p> <a href="#" class="gold">领淘金币抵钱</a> <a href="#" class="club">会员俱乐部</a> </p> <p> <button>登录</button> <button>注册</button> <button>开店</button> </p> </div> <div class="ad"> <img src="https://img.alicdn.com/tfs/TB1O2k_PAL0gK0jSZFAXXcA9pXa-540-120.jpg" alt=""> </div> </div> <div class="mainrightMiddle"> <ul> <li><a href="#">公告</a></li> <li><a href="#">规则</a></li> <li><a href="#">论坛</a></li> <li><a href="#">安全</a></li> <li><a href="#">公益</a></li> <br> <div> <a href="#">95公益周阿里、腾讯等六家公司同台联合做公</a> </div> </ul> <table> <tr> <td class="img1"> <a href="#"> <span></span> <i>充话费</i> </a> </td> <td class="img2"> <a href="#"> <span></span> <i>旅行</i> </a> </td> <td class="img3"> <a href="#"> <span></span> <i>车险</i> </a> </td> <td class="img4"> <a href="#"> <span></span> <i>游戏</i> </a> </td> </tr> <tr> <td class="img5"> <a href="#"> <span></span> <i>彩票</i> </a> </td> <td class="img6"> <a href="#"> <span></span> <i>电影</i> </a> </td> <td class="img7"> <a href="#"> <span></span> <i>酒店</i> </a> </td> <td class="img8"> <a href="#"> <span></span> <i>理财</i> </a> </td> </tr> </table> </div> <div class="mainrightBottom"> <div class="top"> <h3>阿里APP</h3> <a href="#">更多></a> </div> <div class="bottom"> <ul> <li> <a href="#"><img src="images/app_1.png" alt=""></a> </li> <li> <a href="#"><img src="images/app_2.png" alt=""></a> </li> <li> <a href="#"><img src="images/app_3.png" alt=""></a> </li> <li> <a href="#"><img src="images/app_4.png" alt=""></a> </li> <li> <a href="#"><img src="images/app_5.png" alt=""></a> </li> </ul> </div> </div> </div> </div> </main> <footer> <div class="title"> <img src="https://img.alicdn.com/tfs/TB1tqpnegMPMeJjy1XcXXXpppXa-148-48.png" alt=""> <p>与品质生活不期而遇</p> </div> <div class="content"> <ul> <li> <a href="#"> <img src="https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp" alt=""> <div class="information"> <h4>大豆家方头奶奶鞋</h4> <p>一脚蹬设计，方便日常的穿脱。</p> <p class="extra"> <span class="iconfont"></span> 3758 人说好 </p> </div> </a> </li> <li> <a href="#"> <img src="https://img.alicdn.com/tfscom/i3/2459354798/TB2IyE5eUhnpuFjSZFpXXcpuXXa_!!2459354798.jpg_180x180xzq90.jpg_.webp" alt=""> <div class="information"> <h4>佳宝路转角水槽</h4> <p>304不锈钢，表面光洁坚固耐用。</p> <p class="extra"> <span class="iconfont"></span> 122 人说好 </p> </div> </a> </li> <li> <a href="#"> <img src="https://img.alicdn.com/tfscom/i4/654230132/O1CN011CqUjXBxyNTXTMy_!!654230132.jpg_180x180xzq90.jpg_.webp" alt=""> <div class="information"> <h4>肖优秀真皮细高跟过膝瘦腿弹力靴</h4> <p>细跟尖头设计更显优雅女人味。</p> <p class="extra"> <span class="iconfont"></span> 68 人说好 </p> </div> </a> </li> <li> <a href="#"> <img src="https://img.alicdn.com/imgextra/i3/3778221387/TB2hRCYtyOYBuNjSsD4XXbSkFXa_!!3778221387-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt=""> <div class="information"> <h4>低热量保持好身材，来一块厚豆干</h4> <p>低热量，鲜咸味，超饱腹，日常束身常备零食，代餐豆干。灞水优质矿泉水，秦岭山麓非转基因天然大豆。酸浆点制，豆浆自然发酵而成。</p> <p class="extra"> <span class="iconfont"></span> 41 人说好 </p> </div> </a> </li> <li> <a href="#"> <img src="https://img.alicdn.com/imgextra/i4/111676913/TB2QvjxnN1YBuNjy1zcXXbNcXXa_!!111676913-2-beehive-scenes.png_180x180xzq90.jpg_.webp" alt=""> <div class="information"> <h4>入户鞋底清洁神器，让地板一尘不染</h4> <p>这款鞋底清洁神器，节能环保，简单方便，不用电。刷盘内只需加入稀释好的清洁剂或消毒液，使用时双脚踏上刷盘摩擦三到五次，在踏上吸水地垫，只需几秒钟即可清洁完成，让你家的地板时刻保持干净，从此再也不怕接待客人了！</p> <p class="extra"> <span class="iconfont"></span> 92 人说好 </p> </div> </a> </li> <li> <a href="#"> <img src="https://img.alicdn.com/tfscom/i2/682153619/TB2yBeNmXXXXXX6XXXXXXXXXXXX_!!682153619.jpg_180x180xzq90.jpg_.webp" alt=""> <div class="information"> <h4>让人口味大开盐城特产藕粉圆子</h4> <p>民间独特风味的宫廷点心。</p> <p class="extra"> <span class="iconfont"></span> 18 人说好 </p> </div> </a> </li> </ul> </div> </footer> </div> </body> </html>

CSS：

@font-face { font-family: 'iconfont'; src: url('./font/iconfont.eot'); src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), url('./font/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 12px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *{ margin: 0px; padding: 0px; } .container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0 auto; } body { /* 第一行，字体大小/行高(行高尽量用数字) */ font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif; /* \5b8b\4f53是代表宋体的Unicode编码 */ color: #3c3c3c; background-color: #f4f4f4; } header{ width: 1190px; height: 35px; background-color: #f4f4f4; } header > .left{ float: left; line-height: 35px; } header > .right{ float: right; line-height: 35px; } ul{ list-style: none; } a { text-decoration: none; color: #3c3c3c; } a:hover{ color: #f40; } li:hover > a > span { color: #f40; } .arrow{ margin-left: 7px; } .mr5{ margin-right: 5px; color: #f40; } .store{ color: #9c9c9c; } header > .left > ul > li{ margin-left: 10px; float: left; } header > .right > ul > li{ margin-left: 10px; float: left; } .advertisement{ width: 100%; height: 70px; display: flex; justify-content: center; background-color: #e71b1b; } nav{ width: 100%; height: 139px; background-color: #ffffff; display: flex; justify-content: center; } .navbar{ width: 1190px; height: 139px; display: flex; justify-content: center; align-items: center; } .navleft{ width: 280px; } input{ background:none; outline:none; border:0px; } .navmiddle{ width: 740px; position: relative; } .navmiddle .top{ margin-left: 20px; } .navmiddle > .top > li{ width: 36px; float: left; color: #f40; margin-left: 5px; text-align: center; cursor: pointer; } .navmiddle > .top > li:hover{ background-color: #ffeee5; } .navmiddle > input{ display: block; float: left; width: 550px; height: 36px; border: 2px solid #f40; border-right: none; border-radius: 20px 0px 0px 20px; } .navmiddle > .placehorder{ position: absolute; top: 29px; left: 14px; } .navmiddle > .imgSearch{ position: absolute; top: 18px; right: 200px; color: #9c9c9c; font-size: 28px; cursor: pointer; } button{ background:none; border: 0px; outline: none; } .navmiddle > button{ width: 74px; height: 40px; text-align: center; line-height: 40px; color: #fff; font-size: 18px; background-image: linear-gradient(to right, #ff9000, #ff5000); border-radius: 0 20px 20px 0; cursor: pointer; } .navmiddle > .bottom li{ float: left; margin-left: 3px; } .navright{ width: 170px; } .navright a span{ color: #f40; display: block; } .navright img{ width: 62px; height: 62px; } .bar{ width: 1190px; height: 30px; } .bar > h2{ color: #fff; width: 190px; font-size: 16px; text-align: center; background: #ff5000; line-height: 30px; float: left; } .bar > ul{ height: 30px; background-image: linear-gradient(to right, #ff9000, #ff5000); } .bar > ul > li{ color: #fff; float: left; line-height: 30px; font-size: 14px; padding: 0 12px; position: relative; } .bar > ul > li > a { color: #fff; font-weight: bold; cursor: pointer; } .bar > ul > li > line{ margin: 0; padding: 0; color: #fff; } .bar > ul > li:hover ::before{ content: url(./images/ico.gif); color: #ff5000; top: -19px; position: absolute; left: 50%; font-size: 12px; margin-left: -15px; } main{ width: 100%; height: 522px; display: flex; justify-content: center; } .fuzhu{ width: 1190px; display: flex; justify-content: space-between; } main > .fuzhu > .mainleft{ box-sizing: border-box; width: 190px; height: 522px; background-color: #fff; border: 1px solid #f40; } main > .fuzhu > .mainleft > ul > li{ height: 32px; font-size: 14px; line-height: 32px; font-weight: 400; padding: 1px 1px 1px 25px; position: relative; color: #666; } main > .fuzhu > .mainleft > ul > li:hover{ background-color: #ffe4dc; } main > .fuzhu > .mainleft > ul > li > .fr{ float: right; margin-right: 9px; } main > .fuzhu > .mainmiddle{ box-sizing: border-box; width: 690px; height: 522px; align-self: center; display: flex; flex-wrap: wrap; justify-content: space-between; } main > .fuzhu > .mainmiddle > .imgbox1{ align-self: center; } main > .fuzhu > .mainmiddle > .imgbox2{ align-self: center; } main > .fuzhu > .mainmiddle > .imgbox3{ width: 520px; height: 217px; align-self: center; } main > .fuzhu > .mainmiddle > .imgbox3 > .topimg > .left{ background: url(data:image/png;base64,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) no-repeat left; padding-left: 136px; color: #666; height: 17px; line-height: 17px; } main > .fuzhu > .mainmiddle > .imgbox3 > .topimg > .right{ float: right; } main > .fuzhu > .mainmiddle > .imgbox3 > .topimg > .right > i{ font-style: normal; color: #ff1648; } main > .fuzhu > .mainmiddle > .imgbox3 > .line{ margin-top: 0px; height: 3px; background-color: #ff1648; position: relative; } main > .fuzhu > .mainmiddle > .imgbox3 > .line > span{ position: absolute; width: 87px; height: 3px; background-color: #000; left: 0; } main > .fuzhu > .mainmiddle > .imgbox3 .img{ width: 520px; height: 200px; background-color: #fff; display: flex; align-items: center; justify-content: space-between; } main > .fuzhu > .mainmiddle > .imgbox4{ width: 160px; height: 217px; align-self: center; } main > .fuzhu > .mainmiddle > .imgbox4 > p{ height: 22px; line-height: 22px; color: #a1a1a1; font-size: 12px; font-weight: 400; } main > .fuzhu > .mainmiddle > .imgbox4 > img{ height: 200px; } main > .fuzhu > .mainright{ box-sizing: border-box; width: 290px; height: 522px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } main > .fuzhu > .mainright > .mainrightTop{ width: 290px; height: 192px; background-image: url(./images/bg1.png); } main > .fuzhu > .mainright > .mainrightTop > .self{ width: 290px; height: 137px; text-align: center; font-weight: 400; } main > .fuzhu > .mainright > .mainrightTop > .self > img{ width: 50px; height: 50px; border-radius: 25px; margin-top: 5px; cursor: pointer; } main > .fuzhu > .mainright > .mainrightTop > .self > p > a{ display: inline-block; font-size: 12px; border-radius: 9px; background-color: #ffe4dc; padding: 0 10px 0 20px; margin: 0 2px; color: #ff5000; } main > .fuzhu > .mainright > .mainrightTop > .self > p > a.gold{ background: #ffe4dc url(./images/TBico.png) 0 -572px no-repeat; } main > .fuzhu > .mainright > .mainrightTop > .self > p > a.club{ background: #ffe4dc url(./images/TBico.png) 0 -528px no-repeat; } main > .fuzhu > .mainright > .mainrightTop > .self > p > button{ color: #fff; font-weight: bold; width: 75px; height: 25px; line-height: 25px; border-radius: 4px; background-image: linear-gradient(to right, #ff9000, #ff5000); margin: 10px 4px 0px 4px; cursor: pointer; } main > .fuzhu > .mainright > .mainrightTop > .ad{ height: 65px; } main > .fuzhu > .mainright > .mainrightTop > .ad > img{ width: 290px; height: 60px; } main > .fuzhu > .mainright > .mainrightMiddle{ width: 290px; height: 232px; } main > .fuzhu > .mainright > .mainrightMiddle > ul{ width: 290px; height: 70px; padding-top: 7px; background-color: #fff; text-align: center; } main > .fuzhu > .mainright > .mainrightMiddle > ul > li{ display: inline-block; font-size: 12px; line-height: 20px; width: 32px; margin: 0 10px; color: rgb(60, 60, 60); font-weight: 700; } main > .fuzhu > .mainright > .mainrightMiddle > ul > div > a{ font-size: 12px; font-weight: 700; color: #ff5000; line-height: 50px; } i{ font-style: normal; } main > .fuzhu > .mainright > .mainrightMiddle > table{ width: 100%; height: 155px; background-color: #fff; table-layout: fixed; } table{ border-collapse: collapse; } main > .fuzhu > .mainright > .mainrightMiddle > table td{ border: 1px solid #f4f4f4; text-align: center; } main > .fuzhu > .mainright > .mainrightMiddle > table td > a > span{ display: block; height: 24px; width: 24px; margin: 0 auto; background: url(./images/TBico.png) no-repeat; margin-bottom: 10px; } main > .fuzhu > .mainright > .mainrightMiddle > table > tr > .img1 > span{ background-position: 0 0; } main > .fuzhu > .mainright > .mainrightMiddle > table .img2 > a > span{ background-position: 0 -87px; } main > .fuzhu > .mainright > .mainrightMiddle > table .img3 > a > span{ background-position: 0 -44px; } main > .fuzhu > .mainright > .mainrightMiddle > table .img4 > a > span{ background-position: 0 -132px; } main > .fuzhu > .mainright > .mainrightMiddle > table .img5 > a > span{ background-position: 0 -176px; } main > .fuzhu > .mainright > .mainrightMiddle > table .img6 > a > span{ background-position: 0 -220px; } main > .fuzhu > .mainright > .mainrightMiddle > table .img7 > a > span{ background-position: 0 -264px; } main > .fuzhu > .mainright > .mainrightMiddle > table .img8 > a > span{ background-position: 0 -308px; } main > .fuzhu > .mainright > .mainrightBottom{ width: 290px; height: 74px; background-color: #fff; } main > .fuzhu > .mainright > .mainrightBottom .top{ height: 30px; } main > .fuzhu > .mainright > .mainrightBottom .top > h3{ margin-top: 5px; margin-left: 10px; display: inline-block; } main > .fuzhu > .mainright > .mainrightBottom .top > a{ float: right; margin-top: 5px; margin-right: 10px; } main > .fuzhu > .mainright > .mainrightBottom .bottom{ height: 44px; } main > .fuzhu > .mainright > .mainrightBottom .bottom > ul > li{ float: left; margin-top: 3px; margin-left: 21.5px; } main > .fuzhu > .mainright > .mainrightBottom .bottom > ul > li > a > img{ width: 32px; height: 32px; } footer{ width: 1190px; height: 371px; background-color: #fff; margin-top: 5px; } footer > .title{ margin-top: 33px; height: 24px; margin-left: 20px; position: relative; } footer > .title > img{ height: 24px; margin-right: 10px; float: left; } footer > .title > p{ height: 24px; line-height: 24px; color: #999; font-weight: 400; } footer > .content{ margin-top: 33px; margin-left: 20px; } footer > .content > ul > li{ float: left; margin-left: 10px; width: 180px; height: 180px; } footer > .content > ul > li > a > img{ width: 180px; height: 180px; } footer > .content > ul > li > a > .information{ overflow: hidden; padding: 0 4px 0 6px; width: 180px; } footer > .content > ul > li > a > .information > h4{ font-size: 16px; margin-top: 5px; line-height: 28px; height: 28px; font-weight: normal; overflow: hidden; } footer > .content > ul > li > a > .information > p{ line-height: 24px; color: #999; font-size: 14px; overflow: hidden; height: 24px; } footer > .content > ul > li > a > .information > p.extra{ line-height: 22px; height: 22px; margin-top: 2px; color: #35b1ff; }

补充：感谢自己能写完，但是又发现了一个大问题，当屏幕宽度变小时，布局就会发生错乱，下次有空再更新吧

发现的问题：总容器的宽度没有确定就乱用%单位，导致布局错乱

引发的思考：以后写代码前，一定要先布局，先布局，先布局！慎用单位，慎用单位，慎用单位！

Processed: 0.015, SQL: 9