核心产品及促销活动
发布时间：2025-06-24 19:16:19 作者：北方职教升学中心 阅读量：597
border: 1px solid red;用红色边框可视化这些区域的边界。本次参考了小米官网首页的部分布局，分为以下几个模块：
1.顶部横幅广告：显示服务快捷链接和大图广告。
li 项的样式
.banner li {float:left;width:70px;height:64px;padding:03px;}横向排列图标：每个服务项
li宽度为 70px，高度为 64px，并有少量左右内边距 3px。
运行结果
这张可以看到，当鼠标悬停在图标上方时会突出显示：
这张可以看到，当鼠标悬停在右方广告图上方时会有悬浮效果：
3.促销广告区板块
3.1 HTML部分：布局结构
<div class="ad"><div class="container"><a href=""><img src="assets/ad-1.webp"alt=""></a></div></div>图片的来源：可以直接通过小米官网那里的图片链接进行下载并存放在自己的文件下以便于导入
3.2 CSS：样式结构
.ad{height:120px;background:#f5f5f5;padding-top:22px;padding-bottom:22px;}1.设置固定高度为 120px,同时设置背景颜色，使用了浅灰色（#f5f5f5）；
2.为广告区域的顶部和底部添加 22px 的内边距，这样广告图与容器的上下边缘有一定的间隔，使其看起来更加美观。段落、项目背景
电商首页是用户的第一印象，需要清晰地展示品牌形象、
链接样式
.banner li a {display:block;padding-top:18px;font-size:14px;line-height:1.5;color:#fff;opacity:.7;transition:opacity .2s;text-align:center;}链接样式：链接文字的字体大小为 14px，颜色为白色，初始透明度为 0.7，并设置平滑过渡效果。
动效：悬浮效果
.banner div.row {transition:all .2s linear;}平滑过渡：为
row添加平滑过渡效果，使得元素在状态变化时更加平滑，时长为 0.2s。
.content .title:after {display:block;content:"";clear:both;}
:after： CSS 伪元素，通常用于清除浮动元素的影响。
.content .goods-list li:nth-child(n+2){padding-top:20px;}.content .goods-list li:nth-child(n+2)img {width:160px;height:160px;display:block;margin:0auto 18px;}.content .goods-list li:nth-child(n+2)h3 {margin:010px 2px;text-align:center;font-size:14px;font-weight:400;color:#333;}
nth-child(n+2)：该规则应用于从第二个商品项开始的所有商品项。margin-left: 14px;：为商品项设置左外边距。
图标背景图案：需要到阿里巴巴矢量图标库上面寻找合适的右箭头背景图案下载svg文件并存放在自己文件下以便于后续导入background-size: 20px;：设置背景图标的尺寸为 20px，确保图标尺寸合适。font-size: 14px; font-weight: 400;：设置商品名称的字体大小为 14px，并且使用常规的字体粗细（400）。:hover：当鼠标悬停在.more按钮上时，背景图会变化，显示一个橙色的右箭头图标（arrow-right-big-orange.svg），使按钮有交互效果。margin: 0 10px 2px;：为标题添加左右外边距，确保它与图片和其他内容之间有适当的间隔。
.banner div.row:hover {transform:translate3d(0,-2px,0);box-shadow:015px 30px rgba(0,0,0,.1);}悬浮效果：当鼠标悬停在
row上时，元素会稍微向上移动 2px，并添加一个轻微的阴影效果，使其具有层次感。width: 92px;：设置 .more 按钮的宽度为 92px，确保按钮有足够的点击区域。
3.产品列表区：展示主推产品，包含图片、
.content .goods-list li {width:234px;height:280px;float:left;background:#ffffff;margin-left:14px;margin-bottom:14px;transition:all .2s linear;}.content .goods-list li:hover {transform:translate3d(0,-2px,0);box-shadow:015px 30px rgba(0,0,0,.1);}
width: 234px;：设置每个商品项的宽度为 234px。标题、
ul {list-style:none;}去除列表样式：去除
ul的默认列表标记（圆点）。transition: all .2s linear;：设置过渡效果，使商品项在状态变化时（如悬停）会有平滑的动画过渡。
标题样式
.content .title h2 {float:left;line-height:58px;font-weight:200;color:#333333;}1.将标题
<h2>浮动到左侧，使得它占据左边位置，后面的元素会在右侧排列；
2.同时设置行高为 58px，用于使标题文字垂直居中，确保文本在容器内垂直对齐。核心产品及促销活动。line-height: 58px;：与标题保持一致，确保 .more 按钮的高度和行高匹配，从而使其垂直居中对齐。
横幅区域（.banner）
.banner {height:170px;margin-bottom:26px;}高度设置：设置横幅区域的高度为
170px，并且设置下方的外边距为26px。transition: all .4s;：为 .more 按钮添加平滑过渡效果，持续时间为 0.4 秒，all 表示所有可过渡的属性都将平滑过渡。
.banner ul.row {width:234px;background:#5f5750;margin-left:0;border:none;}图标区域样式：
ul.row设置了背景色#5f5750，并调整了宽度和外边距。
运行结果
这张可以看到，背景颜色为灰色，且图片居中显示：
4.产品列表区板块
4.1 HTML部分：布局结构
<div class="content"><div class="container"><div class="title"><h2>手机</h2><div class="more"><a href="">查看更多</a></div></div><ul class="goods-list"><li class="goods-first"><img src="assets/goods-1.webp"alt=""></li><li ><img src="assets/goods-2.webp"alt=""><h3>REDMITurbo 4</h3><p class="desc">REDMITurbo 4好看又能打</p><p class="price"><span class="num">1999</span>元<span>起</span></p></li><li ><img src="assets/goods-3.webp"alt=""><h3>Redmi 14C</h3><p class="desc">【持久续航】5160mAh 大电池</p><p class="price"><span class="num">499</span>元<span>起</span></p></li><li ><img src="assets/goods-4.webp"alt=""><h3>REDMIK80Pro</h3><p class="desc">骁龙8至尊版|2K新国屏|全焦段影像</p><p class="price"><span class="num">3699</span>元<span>起</span></p></li><li ><img src="assets/goods-5.webp"alt=""><h3>REDMIK80</h3><p class="desc">第三代骁龙8|2K新国屏|6550mAh 超长续航</p><p class="price"><span class="num">2499</span>元<span>起</span></p></li><li ><img src="assets/goods-6.webp"alt=""><h3>Xiaomi 15</h3><p class="desc">徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS2</p><p class="price"><span class="num">4499</span>元<span>起</span></p></li><li ><img src="assets/goods-7.webp"alt=""><h3>Xiaomi 15Pro</h3><p class="desc">徕卡光学 Summilux 高速镜头｜ 骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池｜小米澎湃OS2</p><p class="price"><span class="num">5299</span>元<span>起</span></p></li><li ><img src="assets/goods-8.webp"alt=""><h3>Xiaomi 15定制版</h3><p class="desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS2</p><p class="price"><span class="num">4999</span>元<span>起</span></p></li><li ><img src="assets/goods-9.webp"alt=""><h3>Redmi Note 14Pro+</h3><p class="desc">第三代骁龙®7s</p><p class="price"><span class="num">1899</span>元<span>起</span></p></li></ul></div></div>1.内容：展示多个商品，且每个商品项都包含商品图片、translate3d 是 3D 变换函数，可以提高性能和流畅度。
.ad .container{width:1226px;margin:0auto;}设置
.container的宽度为 1226px，同时利用margin: 0 auto实现.container水平居中，使其在父容器中居中显示。
.banner li img {display:block;width:24px;height:24px;margin:0auto 4px;}图标样式：每个服务项
li内的图标宽度和高度设置为 24px，并且水平居中显示，图标和文字之间有 4px 的间距。
img {max-width:100%;max-height:100%;}图片响应式：确保图片的宽度和高度不会超过其容器的宽度和高度，避免图片拉伸。
box-shadow: 0 15px 30px rgba(0,0,0,.1);：为悬停的商品项添加阴影效果，创造一种浮动的视觉效果，增加交互感。width: 160px; height: 160px;：商品图片的宽高被设置为 160px，使商品图标保持一致的大小。
3.<body>部分：<div class="banner"></div>：代表页面的顶部横幅广告区域；<div class="ad"></div>：代表页面的促销广告区域；<div class="content"></div>：代表页面的产品列表区域。
.banner li a:hover {opacity:1;}悬浮时的透明度变化：当鼠标悬浮在链接上时，链接的透明度会从 0.7 变为 1，突出显示。
margin-bottom: 14px;：为商品项设置下外边距。float: right;：使 .more 按钮浮动到右侧，与左侧的标题分开。height: 280px;：设置每个商品项的高度为 280px。描述和价格。float: left;：使每个商品项浮动到左侧，形成横向排列的效果，多个商品项会依次排列在同一行中，直到宽度不够换行。
2.促销广告区：单独的横幅展示当前热销活动。今天，我们将小米官网首页部分布局为基础，解析如何设计一个简洁、
商品列表样式
.content .goods-list {height:628px;}设置商品列表的高度为628px。
width: 160px; height: 160px;：商品图片的宽高被设置为 160px，使商品图标保持一致的大小。1.网页框架的初步规划
第一步我们需要先规划出每一个板块所需要的框架
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>小米官网首页</title><style>body,h1,h2,h3,h4,h5,h6,p,ul{padding:0;margin:0;}.banner{height:170px;border:1px solid red;}.ad{height:120px;border:1px solid red;}.content{height:686px;border:1px solid red;}</style></head><body><div class="banner"></div><div class="ad"></div><div class="content"></div></body></html>1.全局样式重置：目的是清除常见的 HTML 元素（如标题、
margin: 0 auto 18px;：通过 auto 水平居中图片，并且在图片底部添加 18px 的外边距，确保图片和其他元素之间有间隔。描述和价格。
3.图片的来源：可以直接通过小米官网那里的图片链接进行下载并存放在自己的文件下以便于导入2.2 CSS：样式结构
为了使其与小米官网的样式相像，这里需要进行样式的设计:
基本样式
a {text-decoration:none;}去除链接下划线：确保
<a>标签的文字没有默认的下划线。.container 容器
.banner .container {width:1226px;margin:0auto;}居中容器：通过设置容器宽度为
1226px，并使用margin: 0 auto来实现容器的水平居中。运行结果
这张可以看到，鼠标悬停在上方时会有悬浮效果：
这张可以看到，鼠标悬停在查看更多时会和右箭头图案一起出现橙色效果：
完整代码<!DOCTYPEhtml><html lang="en"><head><meta charset="UTF-8"><title>小米官网首页</title><style>body,h2,h3,p,ul{padding:0;margin:0;font-weight:normal;}a{text-decoration:none;}img{max-width:100%;max-height:100%;}ul{list-style:none;}.banner{height:170px;margin-bottom:26px;}.banner .container{width:1226px;margin:0auto;}.banner .container:after{display:block;content:"";clear:both;}.banner .row{float:left;width:316px;height:170px;margin-left:15px;}.banner ul.row{width:234px;background:#5f5750;margin-left:0;border:none;}.banner li{float:left;width:70px;height:64px;padding:03px;}.banner li img{display:block;width:24px;height:24px;margin:0auto 4px;}.banner div.row{transition:all .2s linear;}.banner div.row:hover{transform:translate3d(0,-2px,0);box-shadow:015px 30px rgba(0,0,0,.1);}.banner div.row:nth-child(2){margin-left:14px;}.banner li a{display:block;padding-top:18px;font-size:14px;line-height:1.5;color:#fff;opacity:.7;transition:opacity .2s;text-align:center;}.banner li a:hover{opacity:1;}.ad{height:120px;background:#f5f5f5;padding-top:22px;padding-bottom:22px;}.ad .container{width:1226px;margin:0auto;}.content{height:686px;background:#f5f5f5;}.content .container{width:1226px;margin:0auto;}.content .container .title:after{display:block;content:"";clear:both;}.content .title h2{float:left;line-height:58px;font-weight:200;color:#333333;}.content .title .more{background:url("./images/arrow-right-big-gray.svg")no-repeat 70px 18px;background-size:20px;transition:all .4s;float:right;line-height:58px;width:92px;}.content .title .more:hover{background:url("./images/arrow-right-big-orange.svg")no-repeat 70px 18px;background-size:20px;}.content .more a{font-size:16px;color:#424242;display:block;}.content .more a:hover{color:#ff6700;}.content .goods-list{height:628px;}.content .goods-list li{width:234px;height:280px;float:left;background:#ffffff;margin-left:14px;margin-bottom:14px;transition:all .2s linear;}.content .goods-list li:hover{transform:translate3d(0,-2px,0);box-shadow:015px 30px rgba(0,0,0,.1);}.content .goods-list li:first-child{height:614px;margin-left:0;}.content .goods-list li:nth-child(n+2){padding-top:20px;}.content .goods-list li:nth-child(n+2)img{width:160px;height:160px;display:block;margin:0auto 18px;}.content .goods-list li:nth-child(n+2)h3{margin:010px 2px;text-align:center;font-size:14px;font-weight:400;color:#333;}.content .goods-list li:nth-child(n+2).desc{margin:010px 10px;height:18px;font-size:12px;color:#b0b0b0;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}.content .goods-list li:nth-child(n+2).price{margin:010px 10px;text-align:center;color:#ff6700;}</style></head><body><div class="banner"><div class="container"><ul class="row"><li><a href=""><img src="./images/icon-1.png">保障服务</a></li><li><a href=""><img src="./images/icon-2.png">企业团购</a></li><li><a href=""><img src="./images/icon-3.png">F码通道</a></li><li><a href=""><img src="./images/icon-4.png">米粉卡</a></li><li><a href=""><img src="./images/icon-5.png">以旧换新</a></li><li><a href=""><img src="./images/icon-6.png">话费充值</a></li></ul><div class="row"><img src="banner-1.png"></div><div class="row"><img src="banner-2.png"></div><div class="row"><img src="banner-3.png"></div></div></div><div class="ad"><div class="container"><a href=""><img src="ad-1.webp"alt=""></a></div></div><!--手机 --><div class="content"><div class="container"><div class="title"><h2>手机</h2><div class="more"><a href="">查看更多</a></div></div><ul class="goods-list"><li class="goods-first"><img src="./goods-1.webp"alt=""></li><li ><img src="./goods-2.webp"alt=""><h3>REDMITurbo 4</h3><p class="desc">REDMITurbo 4好看又能打</p><p class="price"><span class="num">1999</span>元<span>起</span></p></li><li ><img src="./goods-3.webp"alt=""><h3>Redmi 14C</h3><p class="desc">【持久续航】5160mAh 大电池</p><p class="price"><span class="num">499</span>元<span>起</span></p></li><li ><img src="./goods-4.webp"alt=""><h3>REDMIK80Pro</h3><p class="desc">骁龙8至尊版|2K新国屏|全焦段影像</p><p class="price"><span class="num">3699</span>元<span>起</span></p></li><li ><img src="./goods-5.webp"alt=""><h3>REDMIK80</h3><p class="desc">第三代骁龙8|2K新国屏|6550mAh 超长续航</p><p class="price"><span class="num">2499</span>元<span>起</span></p></li><li ><img src="./goods-6.webp"alt=""><h3>Xiaomi 15</h3><p class="desc">徕卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS2</p><p class="price"><span class="num">4499</span>元<span>起</span></p></li><li ><img src="./goods-7.webp"alt=""><h3>Xiaomi 15Pro</h3><p class="desc">徕卡光学 Summilux 高速镜头｜ 骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池｜小米澎湃OS2</p><p class="price"><span class="num">5299</span>元<span>起</span></p></li><li ><img src="./goods-8.webp"alt=""><h3>Xiaomi 15定制版</h3><p class="desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS2</p><p class="price"><span class="num">4999</span>元<span>起</span></p></li><li ><img src="./goods-9.webp"alt=""><h3>Redmi Note 14Pro+</h3><p class="desc">第三代骁龙®7s</p><p class="price"><span class="num">1899</span>元<span>起</span></p></li></ul></div></div></body></html>
