前端学习日志之复刻花礼网礼品专栏

花礼网礼品专栏

知识点

竖直与水平居中的实现：

竖直居中有两种情况： 将line-height的值设置的与height的值一样即可。vertical-align: middle注意写在父容器中，即定位在父容器中，且竖直居中。 水平居中有两种情况： text-align: center 文本居中给代码的最外层套一个div，给他设置一个合适的宽度并写上margin: 0 auto; 这样你写的内容就会在页面居中也经得放大缩小啦。

（下面复刻代码中有水平/竖直居中案例）

页面布局

分为三大部分：

题头部分banner 横幅部分content 内容部分

下面不多说了，都在代码里兄弟们

html 代码

<div class="background"><div class="side"><!-- 题头部分 --><div class="title"><a href=""><h3>礼品</h3></a><span>给她·最美好的礼物</span><a href="" class="more">更多礼品></a></div><!-- 横幅部分 --><div class="banner"><ul><li><a href="">水晶内雕/3D激光内雕水晶</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 class="brands"><div class="brand"><a href=""><img src="img/swarovski.png" alt="图片加载失败"><p>施华洛世奇</p></a></div><div class="brand"><a href=""><img src="img/glam ever.png" alt="图片加载失败"><p>Glam&nbsp;Ever潮拍饰品</p></a></div><div class="brand"><a href=""><img src="img/dior.png" alt="图片加载失败"><p>迪奥Dior</p></a></div><div class="brand"><a href=""><img src="img/猫王.png" alt="图片加载失败"><p>猫王收音机</p></a></div><div class="brand"><a href=""><img src="img/hello kitty.png" alt="图片加载失败"><p>Hello&nbsp;Kitty</p></a></div></div></div><!-- 内容部分 --><div class="content"><div class="item"><a href=""><img src="img/a1.jpg" alt="图片加载失败"><p class="item-name">礼品 · 花好月圆永生花台...</p><p class="item-sub">节日定制款</p><p class="num">¥ 298</p><span>已售 1271 件</span></a></div><div class="item"><a href=""><img src="img/a2.jpg" alt="图片加载失败"><p class="item-name">礼品 · 麋鹿水晶音乐盒/旋...</p><p class="item-sub">灯光蓝牙音响</p><p class="num">¥ 296</p><span>已售 946 件</span></a></div><div class="item"><a href=""><img src="img/a3.jpg" alt="图片加载失败"><p class="item-name">礼品 · 爱的礼物-迪奥全新...</p><p class="item-sub">全新高定礼盒</p><p class="num">¥ 699</p><span>已售 169 件</span></a></div><div class="item"><a href=""><img src="img/a4.jpg" alt="图片加载失败"><p class="item-name">礼品 · 磁悬浮3D打印月球...</p><p class="item-sub">热销创意悬浮灯</p><p class="num">¥ 398</p><span>已售 136 件</span></a></div><div class="item"><a href=""><img src="img/a5.jpg" alt="图片加载失败"><p class="item-name">礼品 · 巧克巧蔻定制16粒...</p><p class="item-sup"></p><p class="num">¥ 288</p><span>已售 5759 件</span></a></div><div class="item"><a href=""><img src="img/a6.jpg" alt="图片加载失败"><p class="item-name">礼品 · 迪奥小姐花漾淡香...</p><p class="item-sub">迪奥新款礼盒</p><p class="num">¥ 1699</p><span>已售 167 件</span></a></div><div class="item"><a href=""><img src="img/a7.jpg" alt="图片加载失败"><p class="item-name">礼品 · woody书灯木质led...</p><p class="item-sub">送长辈精选礼物</p><p class="num">¥ 198</p><span>已售 692 件</span></a></div><div class="item"><a href=""><img src="img/a8.jpg" alt="图片加载失败"><p class="item-name">礼品 · 磁悬浮永生花灯/蓝...</p><p class="item-sub">热销创意新品</p><p class="num">¥ 399</p><span>已售 990 件</span></a></div><div class="item"><a href=""><img src="img/a9.jpg" alt="图片加载失败"><p class="item-name">礼品 · 桑蚕丝法式复古丝...</p><p class="item-sub">热销款暖心礼物</p><p class="num">¥ 169</p><span>已售 74 件</span></a></div><div class="item"><a href=""><img src="img/a10.jpg" alt="图片加载失败"><p class="item-name">礼品 · 灵犀感应音箱/深空...</p><p class="item-sub">新品上线</p><p class="num">¥ 168</p><span>已售 1 件</span></a></div></div></div></div>

css代码

<style>/* 整体布局 */* {margin: 0;padding: 0;}.background {/* background-color: black; */height: 1200px;background-color: #F7F9FA;}.side {width: 1215px;margin: 0 auto;/* 内容水平居中的写法 */}/* 题头部分 */.title {width: 100%;height: 30px;padding-bottom: 5px;padding-top: 20px;}.title a {display: inline-block;color: black;font-size: 24px;font-weight: 700;line-height: 30px;/* 此时的line-height的值与.title的hight值相等，实现了文字竖直居中 */padding-left: 2px;}.title span {font-size: 20px;font-weight: 400;color: rgb(35, 38, 40);line-height: 24px;display: inline-block;border-left: 1px rgb(35, 38, 40) solid;padding-left: 15px;margin-left: 16px;}.title .more {color: rgb(113, 121, 127);font-size: 14px;line-height: 30px;float: right;font-weight: 400;}/* 横幅部分 */.banner {width: 96%;height: 158px;background-color: white;margin-top: 10px;padding: 10px 20px 5px;border-radius: 13px;margin-left: 5px;}.banner li {display: inline-block;padding: 0px 10px;font-size: 13px;line-height: 18px;}.banner li a,.brand p {color: rgb(113, 121, 127);}.brands {width: 100%;height: 90px;padding-top: 22px;margin-left: 26px;}.brand {width: 116px;height: 84px;display: inline-block;text-align: center;/* 文本水平居中 */}.brand img {width: 100%;height: 64px;}.brand p {font-size: 12px;line-height: 16px;}/* 内容部分 */.content {width: 100%;height: 734px;font-size: 0;margin-top: 16px;}.item {width: 211px;height: 343px;background-color: white;display: inline-block;text-align: center;padding: 8px 8px 0px;margin: 16px 8px 0px;border-radius: 8px;}.item img {width: 100%;height: 230px;border-radius: 5px;}.item-name {font-size: 16px;color: rgb(35, 38, 40);line-height: 20px;padding-top: 10px;padding-bottom: 5px;}.item-sub {font-size: 14px;color: rgb(255, 115, 76);border: 1px solid rgb(255, 115, 76);background-color: #FFF0EC;border-radius: 10px;margin: 0 auto;display: inline-block;padding: 0px 10px;}.item-sup {height: 20px;}.num {font-size: 16px;font-weight: 700;color: black;padding-top: 5px;}.item span {font-size: 12px;margin-top: 6px;line-height: 16px;color: rgb(113, 121, 127);display: inline-block;}/* 超级链接样式部分 */a {text-decoration: none;}a:hover h3,a:hover p,li a:hover,a:hover span {color: rgb(255, 115, 76);}</style>

效果展示

到这里就结束啦，欢迎给各位大佬评论区提点！