【前端】HTML+CSS 设计小米官网首页

最新推荐文章于 2025-02-27 16:54:18 发布

虚拟现实旅人

最新推荐文章于 2025-02-27 16:54:18 发布

阅读量1.7k

点赞数 69

文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/L10131/article/details/145229878

版权

【前端】HTML+CSS 设计小米官网首页

简介

在当今的互联网时代，电商平台的网页设计至关重要。今天，我们将小米官网首页部分布局为基础，解析如何设计一个简洁、美观、功能强大的电商首页。

项目背景

电商首页是用户的第一印象，需要清晰地展示品牌形象、核心产品及促销活动。本次参考了小米官网首页的部分布局，分为以下几个模块：
1.顶部横幅广告：显示服务快捷链接和大图广告。
2.促销广告区：单独的横幅展示当前热销活动。
3.产品列表区：展示主推产品，包含图片、标题、描述和价格。
在这里插入图片描述

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 元素（如标题、段落、列表等）的默认内边距（padding）和外边距（margin），以便更精确地控制页面布局。
2.布局容器样式：.banner、.ad 和 .content 代表页面的不同部分，每个部分都有固定的高度（单位：像素）。border: 1px solid red; 用红色边框可视化这些区域的边界。
3.<body> 部分：<div class="banner"></div>：代表页面的顶部横幅广告区域；<div class="ad"></div>：代表页面的促销广告区域；<div class="content"></div>：代表页面的产品列表区域。

运行结果
在这里插入图片描述

2.顶部横幅广告板块

2.1 HTML部分：布局结构

	<div class="banner">
        <div class="container">
            <ul class="row">
                <li><a href=""><img src="assets/images/icon-1.png">保障服务</a></li>
                <li><a href=""><img src="assets/images/icon-2.png">企业团购</a></li>
                <li><a href=""><img src="assets/images/icon-3.png">F码通道</a></li>
                <li><a href=""><img src="assets/images/icon-4.png">米粉卡</a></li>
                <li><a href=""><img src="assets/images/icon-5.png">以旧换新</a></li>
                <li><a href=""><img src="assets/images/icon-6.png">话费充值</a></li>
            </ul>
            <div class="row"><img src="assets/banner-1.png"></div>
            <div class="row"><img src="assets/banner-2.png"></div>
            <div class="row"><img src="assets/banner-3.png"></div>
        </div>
    </div>

这部分板块主要包括了两个部分：
1.服务图标导航栏：一个包含多个图标和文字链接的横幅，展示了不同的服务入口。
2.广告横幅：三个广告图轮播，展示活动或促销信息。
3.图片的来源：可以直接通过小米官网那里的图片链接进行下载并存放在自己的文件下以便于导入

2.2 CSS：样式结构

为了使其与小米官网的样式相像，这里需要进行样式的设计:

基本样式

a {
    text-decoration: none;
}

去除链接下划线：确保 <a> 标签的文字没有默认的下划线。

img {
    max-width: 100%;
    max-height: 100%;
}

图片响应式：确保图片的宽度和高度不会超过其容器的宽度和高度，避免图片拉伸。

ul {
    list-style: none;
}

去除列表样式：去除 ul 的默认列表标记（圆点）。

横幅区域（.banner）

.banner {
    height: 170px;
    margin-bottom: 26px;
}

高度设置：设置横幅区域的高度为 170px，并且设置下方的外边距为 26px。

.container 容器

.banner .container {
    width: 1226px;
    margin: 0 auto;
}

居中容器：通过设置容器宽度为 1226px，并使用 margin: 0 auto 来实现容器的水平居中。

.banner .container:after {
    display: block;
    content: "";
    clear: both;
}

清除浮动：利用 ::after 伪元素清除浮动，以确保容器包裹住所有浮动的子元素。

.row 的布局

.banner .row {
    float: left;
    width: 316px;
    height: 170px;
    margin-left: 15px;
}

横向排列：float: left 让元素从左到右排列，设置每个 row 区域的宽度为 316px，与横幅区域的高度匹配。

.banner ul.row {
    width: 234px;
    background: #5f5750;
    margin-left: 0;
    border: none;
}

图标区域样式：ul.row 设置了背景色 #5f5750，并调整了宽度和外边距。

li 项的样式

.banner li {
    float: left;
    width: 70px;
    height: 64px;
    padding: 0 3px;
}

横向排列图标：每个服务项li宽度为 70px，高度为 64px，并有少量左右内边距 3px。

.banner li img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
}

图标样式：每个服务项li内的图标宽度和高度设置为 24px，并且水平居中显示，图标和文字之间有 4px 的间距。

动效：悬浮效果

.banner div.row {
    transition: all .2s linear;
}

平滑过渡：为 row 添加平滑过渡效果，使得元素在状态变化时更加平滑，时长为 0.2s。

.banner div.row:hover {
    transform: translate3d(0,-2px,0);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}

悬浮效果：当鼠标悬停在 row 上时，元素会稍微向上移动 2px，并添加一个轻微的阴影效果，使其具有层次感。

链接样式

.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 li a:hover {
    opacity: 1;
}

悬浮时的透明度变化：当鼠标悬浮在链接上时，链接的透明度会从 0.7 变为 1，突出显示。

运行结果
这张可以看到，当鼠标悬停在图标上方时会突出显示：
在这里插入图片描述
这张可以看到，当鼠标悬停在右方广告图上方时会有悬浮效果：

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 的内边距，这样广告图与容器的上下边缘有一定的间隔，使其看起来更加美观。

.ad .container{
    width: 1226px;
    margin: 0 auto;
}

设置 .container 的宽度为 1226px，同时利用 margin: 0 auto 实现 .container 水平居中，使其在父容器中居中显示。

运行结果
这张可以看到，背景颜色为灰色，且图片居中显示：
在这里插入图片描述

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>REDMI Turbo 4</h3>
                    <p class="desc">REDMI Turbo 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>REDMI K80 Pro</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>REDMI K80</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 小米金沙江电池 小米澎湃OS 2</p>
                    <p class="price">
                        <span class="num">4499</span>元<span>起</span>
                    </p>
                </li>
                <li >
                    <img src="assets/goods-7.webp" alt="">
                    <h3>Xiaomi 15 Pro</h3>
                    <p class="desc">徕卡光学 Summilux 高速镜头｜ 骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池｜小米澎湃OS 2</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 小米金沙江电池 小米澎湃OS 2</p>
                    <p class="price">
                        <span class="num">4999</span>元<span>起</span>
                    </p>
                </li>
                <li >
                    <img src="assets/goods-9.webp" alt="">
                    <h3>Redmi Note 14 Pro+</h3>
                    <p class="desc">第三代骁龙®7s</p>
                    <p class="price">
                        <span class="num">1899</span>元<span>起</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>

1.内容：展示多个商品，且每个商品项都包含商品图片、名称、描述和价格。
2.图片来源：可以直接通过小米官网那里的图片链接进行下载并存放在自己的文件下以便于导入

4.2 CSS：样式结构

整体结构样式

.content {
    height: 686px;
    background: #f5f5f5;
}

设置它的固定高度为 686px；并且设置一个浅灰色背景（#f5f5f5）

.content .container {
    width: 1226px;
    margin: 0 auto;
}

设置 .container 宽度为 1226px，控制页面内容的最大宽度，不会超出这个宽度。这个宽度一般用于布局中的中央容器，确保页面内容不拉得过宽；同时使 .container 水平居中显示。

.content .title:after {
    display: block;
    content: "";
    clear: both;
}

:after： CSS 伪元素，通常用于清除浮动元素的影响。这里的 clear: both; 清除 .title 内部浮动元素（如 h2 和 .more），确保 .title 下面的元素能够正确布局。

标题样式

.content .title h2 {
    float: left;
    line-height: 58px;
    font-weight: 200;
    color: #333333;
}

1.将标题<h2>浮动到左侧，使得它占据左边位置，后面的元素会在右侧排列；
2.同时设置行高为 58px，用于使标题文字垂直居中，确保文本在容器内垂直对齐。
3.将字体的粗细设置为 200（较轻）
4.设置字体颜色为深灰色（#333333）

.content .title .more {
    background: url("assets/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("assets/images/arrow-right-big-orange.svg") no-repeat 70px 18px;
    background-size: 20px;
}

background: url(...) no-repeat 70px 18px;：为 .more 按钮设置背景图案，使用右箭头图标（arrow-right-big-gray.svg），并且不重复显示。70px 18px 是背景图的定位位置，表示图标位置相对于元素的左上角偏移。
图标背景图案：需要到阿里巴巴矢量图标库上面寻找合适的右箭头背景图案下载svg文件并存放在自己文件下以便于后续导入
background-size: 20px;：设置背景图标的尺寸为 20px，确保图标尺寸合适。
transition: all .4s;：为 .more 按钮添加平滑过渡效果，持续时间为 0.4 秒，all 表示所有可过渡的属性都将平滑过渡。
float: right;：使 .more 按钮浮动到右侧，与左侧的标题分开。
line-height: 58px;：与标题保持一致，确保 .more 按钮的高度和行高匹配，从而使其垂直居中对齐。
width: 92px;：设置 .more 按钮的宽度为 92px，确保按钮有足够的点击区域。
:hover：当鼠标悬停在 .more 按钮上时，背景图会变化，显示一个橙色的右箭头图标（arrow-right-big-orange.svg），使按钮有交互效果。

商品列表样式

.content .goods-list {
    height: 628px;
}

设置商品列表的高度为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: 0 15px 30px rgba(0,0,0,.1);
}

width: 234px;：设置每个商品项的宽度为 234px。
height: 280px;：设置每个商品项的高度为 280px。
float: left;：使每个商品项浮动到左侧，形成横向排列的效果，多个商品项会依次排列在同一行中，直到宽度不够换行。
background: #ffffff;：每个商品项使用白色背景。
margin-left: 14px;：为商品项设置左外边距。
margin-bottom: 14px;：为商品项设置下外边距。
transition: all .2s linear;：设置过渡效果，使商品项在状态变化时（如悬停）会有平滑的动画过渡。
.transform: translate3d(0,-2px,0);：当用户鼠标悬停在商品项上时，商品项会稍微上移 2px。translate3d 是 3D 变换函数，可以提高性能和流畅度。
box-shadow: 0 15px 30px rgba(0,0,0,.1);：为悬停的商品项添加阴影效果，创造一种浮动的视觉效果，增加交互感。

.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: 0 auto 18px;
}
.content .goods-list li:nth-child(n+2) h3 {
    margin: 0 10px 2px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

nth-child(n+2)：该规则应用于从第二个商品项开始的所有商品项。
padding-top: 20px;：为这些商品项添加顶部内边距，确保商品图片与其他内容之间有一定的间距，使页面看起来更整齐。
width: 160px; height: 160px;：商品图片的宽高被设置为 160px，使商品图标保持一致的大小。
display: block;：使图片成为块级元素，避免图片底部的空白间隙（通常块级元素不会有空隙）。
margin: 0 auto 18px;：通过 auto 水平居中图片，并且在图片底部添加 18px 的外边距，确保图片和其他元素之间有间隔。
width: 160px; height: 160px;：商品图片的宽高被设置为 160px，使商品图标保持一致的大小。
display: block;：使图片成为块级元素，避免图片底部的空白间隙（通常块级元素不会有空隙）。
margin: 0 auto 18px;：通过 auto 水平居中图片，并且在图片底部添加 18px 的外边距，确保图片和其他元素之间有间隔。
margin: 0 10px 2px;：为标题添加左右外边距，确保它与图片和其他内容之间有适当的间隔。
text-align: center;：将商品名称居中显示。
font-size: 14px; font-weight: 400;：设置商品名称的字体大小为 14px，并且使用常规的字体粗细（400）。
color: #333;：商品名称的字体颜色为深灰色。

运行结果
这张可以看到，鼠标悬停在上方时会有悬浮效果：
在这里插入图片描述
这张可以看到，鼠标悬停在查看更多时会和右箭头图案一起出现橙色效果：

完整代码

<!DOCTYPE html>
<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: 0 auto;
    }
    .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: 0 3px;
    }
    .banner li img{
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto 4px;
    }
    .banner div.row{
        transition: all .2s linear;
    }
    .banner div.row:hover{
        transform: translate3d(0,-2px,0);
        box-shadow: 0 15px 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: 0 auto;
    }
    .content{
        height: 686px;
        background: #f5f5f5;
    }
    .content .container{
        width: 1226px;
        margin: 0 auto;
    }
    .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: 0 15px 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: 0 auto 18px;
    }
    .content .goods-list li:nth-child(n+2) h3{
        margin: 0 10px 2px;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #333;
    }
    .content .goods-list li:nth-child(n+2) .desc{
        margin: 0 10px 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: 0 10px 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>REDMI Turbo 4</h3>
                    <p class="desc">REDMI Turbo 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>REDMI K80 Pro</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>REDMI K80</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 小米金沙江电池 小米澎湃OS 2</p>
                    <p class="price">
                        <span class="num">4499</span>元<span>起</span>
                    </p>
                </li>
                <li >
                    <img src="./goods-7.webp" alt="">
                    <h3>Xiaomi 15 Pro</h3>
                    <p class="desc">徕卡光学 Summilux 高速镜头｜ 骁龙®8至尊版移动平台｜6100mAh 小米金沙江电池｜小米澎湃OS 2</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 小米金沙江电池 小米澎湃OS 2</p>
                    <p class="price">
                        <span class="num">4999</span>元<span>起</span>
                    </p>
                </li>
                <li >
                    <img src="./goods-9.webp" alt="">
                    <h3>Redmi Note 14 Pro+</h3>
                    <p class="desc">第三代骁龙®7s</p>
                    <p class="price">
                        <span class="num">1899</span>元<span>起</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>