一、先上一张成果图

二、已上传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">&#xe791;</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">&#xe791;</span></li><li><span class="iconfont mr5">&#xe6b8;</span><a href="#">购物车</a><span class="iconfont arrow">&#xe791;</span></li><li><a href="#"><span class="iconfont mr5 store">&#xe608;</span>收藏夹</a><span class="iconfont arrow">&#xe791;</span></li><li><a href="#">商品分类</a></li><li><span class="colorD">|</span></li><li><a href="#">千牛卖家中心</a><span class="iconfont arrow">&#xe791;</span></li><li><a href="#">联系客服</a><span class="iconfont arrow">&#xe791;</span></li><li><span class="iconfont mr5">&#xe606;</span><a href="#">网站导航</a><span class="iconfont arrow">&#xe791;</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"><listyle="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">&#xe602;</i><span>显瘦牛仔背带裤</span></div><span class="iconfont imgSearch">&#xe698;</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"><ahref="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">&#xe65f;</span></li><li><a href="#">女鞋</a>/<a href="#">男鞋</a>/<a href="#">箱包</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">男婴</a>/<a href="#">童装</a>/<a href="#">玩具</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">男装</a>/<a href="#">运动户外</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">美妆</a>/<a href="#">彩妆</a>/<a href="#">个护</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">手机</a>/<a href="#">数码</a>/<a href="#">企业</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">大家电</a>/<a href="#">生活电器</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">零食</a>/<a href="#">生鲜</a>/<a href="#">茶酒</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">厨具</a>/<a href="#">收纳</a>/<a href="#">清洁</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">家纺</a>/<a href="#">家饰</a>/<a href="#">鲜花</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">图书音像</a>/<a href="#">文具</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">医药保健</a>/<a href="#">进口</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">汽车</a>/<a href="#">二手车</a>/<a href="#">用品</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">装修</a>/<a href="#">建材</a>/<a href="#">家具</a><span class="iconfont fr">&#xe65f;</span></li><li><a href="#">手表</a>/<a href="#">眼镜</a>/<a href="#">珠宝饰品</a><span class="iconfont fr">&#xe65f;</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">&#xe627;</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">&#xe627;</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">&#xe627;</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">&#xe627;</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">&#xe627;</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">&#xe627;</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;
}

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

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

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

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

  1. HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）

    内容概览 模拟淘宝首页(静态) 一.项目重难点 二.效果图及源码 模拟淘宝首页(静态) 一.项目重难点 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...

  2. HTML+CSS简单的淘宝首页框架布局小练(一）

    开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历 简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的 首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...

  3. DIV+CSS搭建（淘宝首页）布局图

    制作网页时,构建页面布局图很重要.布局前的结构划分避免造成混乱. 下面的代码只有DIV+CSS的网页结构布局.没有将最终的淘宝静态页面的代码放上去,只有布局图和最终页面的比较图. 搭建的布局图与最终效 ...

  4. 一个静态淘宝购物车网页练习

    一个静态淘宝购物车网页练习 话不多说,直接上代码! <!DOCTYPE html> <html><head><meta charset="utf-8 ...

  5. 淘宝首页html css

    自己做了一个淘宝首页的HTML+CSS 新手有不足,请指教 在这里插入代码片 ```<!DOCTYPE html> <html> <head><meta ch ...

  6. rem和em学习笔记及CSS预处理

    rem和em学习笔记及CSS预处理 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如  View Code parent-div中的em-div ...

  7. CLR Via C# 学习笔记（5） 静态构造函数的性能

    CLR Via C#>这本书以前就粗略看过两遍,但一直都没能深入理解,而且很多内容也忘记了,现在准备重新看一遍,并将看过的部分写出来,因为写的过程也是一个加深理解的过程.本系列算是学习的一个记录 ...

  8. HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

    HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作 ...

  9. HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计

    HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计 常见网页设计作业 ...

最新文章

  1. update 两个表关联_你真的了解全量表,增量表及拉链表吗？
  2. linux bash 学习
  3. Android 一些比较厉害的大牛博客
  4. HTTP状态码对照表(全部状态_建议收藏)
  5. 解决 Cycript 信息显示不全的问题
  6. 文件上传下载流程设计
  7. 【Redis源码分析】Redis命令处理生命周期
  8. ASP.NET Core Web API中使用Swagger
  9. php 连接池 idletime,聊聊hikari连接池的idleTimeout及minimumIdle属性
  10. Teamcenter 入门开发系列问答(1)
  11. ext.net 开发学习——常用布局（八）
  12. 「00后缩写黑话翻译器」登上GitHub热榜，中年网民终于能看懂年轻人的awsl
  13. html+css+js制作原神官网，web前端大作业（流风眷堇庭+6个页面+链接）
  14. 2021年程序员个人年终工作总结10篇
  15. 4个网页翻译工具，一键就能将网页英文翻译成中文
  16. npm报错：npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
  17. 整理全网文档管理平台，持续跟更新
  18. FileExistsError: [WinError 183] 当文件已存在时,无法创建该文件。附文件重命名代码
  19. CentOS7的虚拟机连不通网外解决方案
  20. 基于jsp+springboot的易卖网商城源码

热门文章

  1. SQL server查询出只选修两门课程的学生学号和姓名
  2. 红外发光二极管的接收方式
  3. word设置每页50行
  4. (附源码)springboot停车场车辆定位管理可视化分析系统的设计与实现 毕业设计101702
  5. 猿辅导：一个班主任老师的影响力能有多大？
  6. RK3288平台 SPI接口调试步骤
  7. 新手小白设计干货|使用ps制作一张简单海报
  8. STC15L2K32S2芯片介绍与实验板原理图分析
  9. 为ThinkCentre M910t-NO76重装Windows7（64位）系统
  10. 显卡GTX295到了