关于web前端开发copy小米的案例（目前正在学web，所以对于大神来说我这个就是垃圾，仅供参考）

paopilong

已于 2024-05-30 22:59:20 修改

阅读量758

点赞数 23

文章标签：前端 css html

于 2023-12-12 18:48:06 首次发布

本文链接：https://blog.csdn.net/paopilong/article/details/134956313

版权

1设计内容

本次设计的内容是小米商城的仿照设计，包括导航栏，搜索栏，第一个身体展示部分，第二身体展示部分，侧边功能按键，底部背景图片嵌入，团队显示

2 背景知识：

1盒子：

盒子用到的参数主要有

1 margin：设置盒子的外边距，会将盒子撑大

2 padding：设置盒子的内边距，会将盒子撑大

3 background-color：设置盒子的背景颜色

4 border-radius：设置盒子边角弧度

5 line-height：设置行内距，使盒子内字体居中

6 width:盒子的宽度

7 height:盒子的高度

2 定位：

1 Position:fixed; 固定定位，将盒子定位在网页的固定位置

2 Position:absolute; 绝对定位，以网页为参照

3 Position:relative; 相对定位，以父为参照物，若父无定位，以爷为参照

3选择器：

1 简单选择器：通过元素类型、class 或 id 匹配一个或多个元素。

2属性选择器：通过属性 / 属性值匹配一个或多个元素。

3 伪类选择器： a:hover 设置鼠标悬停样式

4 其他：

浮动;float 让元素漂浮起来

<a></a> 超链接 <p></p> 段落 <img src=”图片地址” target=”blank”>图片,target打开网页方式（新建或其他） ul li 列表

<hr> 分割线 color 设置文字颜色......

3设计流程：

1盒子大体模型

1：将所有的小盒子放进最大的一个盒子里面，然后设置最大的盒子始终居中，即可实现网页缩放时所有的内容都保持在网页中间，代码如下：

.main {

height: 100%;

width: 1170px;

margin:0px auto 0px auto;

}

<div class=”main”> </div> body里面最大的盒子

设置最大的盒子的宽度和高度，以及在网页中的位置，该margin是以整个网页为参照。

2：利用类选择器设置顶部导航栏参数将顶部设置为一个大盒子，再将每个超链接设置成单独的小盒子，利用float将盒子横着漂浮在top大盒子的左边，利用text-alin将文字居中，并利用text-decoratin：none;取消超链接下划线，font-size设置字体大小。利用boder-radious设置边框为圆弧，最后，通过伪类选择器设置鼠标悬停时字体颜色为白色。

.top {

width: 1120;

height: 50px;

background-color: rgb(56, 57, 58);

margin: 5px auto;

padding-left: 5px;

padding-right: 60px;

border-radius: 15px;

}

/* 定义顶部大盒子 */

.top1 a {

float: left;

width: 70px;

}

.top2 a {

float: right;

width: 70px;

margin: 0 3px;

}

.top3 a {

width: 150px;

height: 50px;

line-height: normal;

float: right;

margin: 0 20px;

border-radius: 20px;

background-color: rgb(62, 62, 61);

}

.top a {

font-size: 13px;

text-align: center;

text-decoration: none;

color: rgb(203, 199, 199);

line-height:50px;

margin: 0 auto;

}

/* 设置顶部盒子里的所有超链接盒子，并设置盒子里字体的颜色和位置*/

.top a:hover {

color: white;

}

/* 设置鼠标悬停样式为白色，一下都是 */

以上为类选择器

以下为body内容显示：

<a href="https://www.mi.com/appdownload" target="_blank">下载app</a>

</div>

</div>

</div>

3：设置搜索栏，这是第二个盒子，类为dh，该盒子里面将图片做成超链接，通过position: absolute;实现绝对定位，而此盒子里面的小盒子全采用相对定位，此乃“父绝子相”，通过display: block;实现竖着的超链接横着放，同样设置了鼠标悬停。设置了submit按钮和type=“text”文本输入框，通过float将这个盒子漂浮在dh盒子的右侧。

.dh {

position: absolute;

top: 55px;

width: 1166px;

height: 60px;

padding: 5px;

}

.dh0 {

position: relative;

float: left;

line-height: 60px;

}

.dh1 {

position: relative;

display: block;

padding-left: 50px;

line-height: 60px;

margin-right: 20px;

float: left;

}

.dh2 {

position: relative;

line-height: 60px;

float: right;

margin-right: 20px;

}

.dh a{

padding-left: 10px;

text-indent: 4em;

text-decoration: none;

font-size: 15px;

color:black;

}

.dh a:hover {

color: rgb(240, 83, 21);

}

以上为类选择器

以下为body内容显示：

</a>

</div>

<a href="#">xioami手机</a>

<a href="#">readmi手机</a>

</div>

<button type="submit" style="width:55px; height:30px;">search</button>

</div>

4：第一个显示的内容区域 bd1 ，里面包括竖着的当行栏，鼠标悬停背景变色，文本居中。第二块则是一张大的红米k70图片，做成了超链接，第三块是自己的照片，三个盒子都是dh1盒子的相对定位。

.bd1 {

position: absolute;

top: 125px;

width: 1155px;

height: 350px;

left: auto;

padding: 10px;

}

.bdd1 a {

position: relative;

display: block;

text-decoration: none;

line-height: 10px;

width: 80px;

height: 15px;

background-color: rgb(161, 160, 159);

font-size: 12px;

color: white;

padding: 10px;

}

.bdd2 {

position: relative;

left: 100px;

bottom: 350px;

height: 350px;

width: 800px;

line-height: normal;

}

.bdd4 a {

position: relative;

left: 5px;

bottom: 175px;

float:left;

background-color: #b9b7b7;

height: 30px;

width: 30px;

line-height: 30px;

text-decoration: none;

text-align: center;

border-radius: 10px;

color: black;

}

.bdd5 a {

position: relative;

right: 5px;

bottom: 175px;

float: right;

background-color: #b9b7b7;

height: 30px;

width: 30px;

line-height: 30px;

text-decoration: none;

text-align: center;

border-radius: 10px;

color: black;

}

.bdd3 img {

position: relative;

left: 870px;

bottom: 700px;

height: 350px;

width: 250px;

}

.bd a:hover {

background-color: rgb(242, 104, 13);

}

以上为类选择器

以下为body内容显示：

<a href="#">智能路由器</a>

<a href="#">笔记本平板</a>

</div>

</div>

</div>

</div>

5：第五个盒子和第四个盒子大体内容一样，bd2也是绝对定位，里面的小盒子都是相对定位。

.bd2 {

position: absolute;

top: 495px;

width: 1175px;

height: 290px;

left: auto;

padding: 10px 0 0 0;

/* 设置上右下左的内边距，会把盒子撑大 */

}

.bddd1 p {

position: relative;

left: 10px;

height: 280px;

width: 280px;

margin-right: 10px;

}

.bd2 p a {

position: inherit;

top: 35px;

left: 5px;

float: left;

height: 100px;

width: 86px;

margin: 2px;

}

.bd2 p a:hover {

color: aliceblue;

}

.bddd2 a {

position: relative;

left: 300px;

float: left;

bottom: 280px;

height: 280px;

width: 280px;

margin-right: 10px;

}

以上为类选择器

以下为body内容显示：

<p>

</p>

</div>

</div>

6：btm盒子，此盒子放了一个小米14的照片，同样是绝对定位

.btm {

position: absolute;

top: 830px;

height: 130px;

width: 1175px;

}

</div>

7：设计底部显示，先做个很大的盒子，然后将所需要的信息一步步填进去顶部为四个绿色的导航，有鼠标悬停变色，背景颜色设置为绿色

代码分栏展示：

.food {

padding-top: 5px;

padding-left: 6px;

position: absolute;

top: 980px;

height: 500px;

width: 1175px;

}

.f1 a {

text-align: center;

line-height: 50px;

text-decoration: none;

background-color: rgb(184, 235, 140);

color: #000;

position: relative;

float: left;

height: 50px;

width: 285px;

margin-right: 5px;

border-radius: 20px;

}

.f2 {

float: left;

top: 8px;

height: 5px;

}

.f3 {

top: 80px;

height: 60px;

width: 1155px;

}

.f3 p {

bottom: 50px;

position: relative;

display: block;

padding-left: 50px;

line-height: 60px;

margin: auto 50px;

float: left;

}

.f4 {

top: 50px;

left: 80px;

height: 350px;

width: 100px;

float: left;

text-align: center;

}

.f4 a {

position: relative;

display: block;

text-decoration: none;

line-height: 20px;

width: 80px;

height: 10px;

font-size: 15px;

color: #000;

padding: 10px;

}

.f5 {

top: 50px;

left: 190px;

height: 350px;

width: 110px;

float: left;

text-align: center;

}

.f5 a {

position: relative;

display: block;

text-decoration: none;

line-height: 20px;

width: 80px;

height: 10px;

font-size: 15px;

color: #000;

padding: 10px;

}

.f6 {

top: 50px;

left: 310px;

height: 350px;

width: 100px;

float: left;

text-align: center;

}

.f6 a {

position: relative;

display: block;

text-decoration: none;

line-height: 20px;

width: 80px;

height: 10px;

font-size: 15px;

color: #000;

padding: 10px;

}

.f7 {

top: 50px;

left: 440px;

height: 350px;

width: 100px;

float: left;

text-align: center;

}

.f7 a {

position: relative;

display: block;

text-decoration: none;

line-height: 20px;

width: 80px;

height: 10px;

font-size: 15px;

color: #000;

padding: 10px;

}.f8 {

top: 50px;

left: 560px;

height: 350px;

width: 100px;

float: left;

text-align: center;

}

.f8 a {

position: relative;

display: block;

text-decoration: none;

line-height: 20px;

width: 80px;

height: 10px;

font-size: 15px;

color: #000;

padding: 10px;

}

.ta {

position: relative;

}

.food a:hover {

color: rgb(240, 83, 21);

}

Body内容展示代码：

<a href="#">预约维修服务</a>

<a href="#">7天无理由退货</a>

<a href="#">15天免费换货</a>

</div>

<hr>

</div>

<p>维修服务价格</p>

</div>

</div>

<a href="">维修服务价格</a>

</div>

<a href="">授权体验店/专区</a>

</div>

</div>

<a href="">投资者关系</a>

<a href="">可持续发展</a>

<a href="">公益基金会</a>

</div>

8：固定定位fixed，是以整个网页为参照，位置固定在固定的位置，不管网页缩放与否，位置始终不变此处我将该功能列表放在右下角。为top设置超链接，将导航栏top的ID链接到此，点击Top则会回到顶部。

.thetop {

position: fixed; 固定定位，定位在指定位置

bottom:10px;

right:5px;

}

.thetop a {

border-radius: 20%;

color: #000;

display: block;

font-size: 12px; 字体大小

width: 20px;

height: 15px;

padding-bottom: 7px; 盒子底部的内边距

margin-bottom: 1px;

text-decoration: none;

background-color: rgb(117, 228, 66);

opacity: 0.6;

}

9：设置最底下的盒子，通过列表展示团队信息，通过 list-style: none;

将列表前面的原点隐藏起来。

还设置了以小米14为背景图片的网页设计报告样式。

.endf {

position: absolute;

top: 1600px;

width: 1155px;

height: 180px;

background-image: url(\pengpai.webp); 以图片为背景

background: rgba(#fff, #FFF, #Fff, 0.1); 设置背景透明度

opacity: 0.7; 设置整体透明度

}

.endf p {

position: relative;

left: 0;

height: 50px;

width: 1155px;

color: #e1e6c9;

font-size: 20PX;

line-height: 50PX;

text-align: center;

}

.team {

position: relative; 相对定位

top: 1730px;

left: 500px;

height: 200px;

width: 200px;

background-color: #c6f290;

}

.team ul {

float: left; 让ul列表漂浮在盒子左边

line-height: 30px; 设置使文字上下居中

color: black;

list-style: none; 隐藏列表原点

}

<ul>

</ul>

</div>

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>copyxiaomi</title>
    <style>
        * {padding: 0; margin: 0;}
        /* 初始化内外边距为0*/
    .main{
    height: 100%;
    width: 1170px;
	margin:0px auto 0px auto;
        }
        /* 将所有的盒子放进大盒子里面，实现缩放居中 */
        .top {
            width: 1120;
            height: 50px;
            background-color: rgb(56, 57, 58);
            margin: 5px auto;
            padding-left: 5px;
            padding-right: 60px;
            border-radius: 15px;
        }
        /* 定义顶部大盒子 */
        .top1 a {
            float: left;
            width: 70px;
        }
        .top2 a {
            float: right;
            width: 70px;
            margin: 0 3px;
        }
        .top3 a {
            width: 150px;
            height: 50px;
            line-height: normal;
            float: right;
            margin: 0 20px;
            border-radius: 20px;
            background-color: rgb(62, 62, 61);
        }
        .top a {
            font-size: 13px;
            text-align: center;
            text-decoration: none;
            color: rgb(203, 199, 199);
            line-height:50px;
            margin: 0 auto;
        }
        /* 设置顶部盒子里的所有超链接盒子 ，并设置盒子里字体的颜色和位置*/
        .top a:hover {
            color: white;
        }
        /* 设置鼠标悬停样式为白色，一下都是 */



        .dh {
            position: absolute;
            top: 55px;
            width: 1166px;
            height: 60px;
            padding: 5px;
        }
        .dh0 {
            position: relative;
            float: left;
            line-height: 60px;

        }
        .dh1 {
            position: relative;
            display: block;
            padding-left: 50px;
            line-height: 60px;
            margin-right: 20px;
            float: left;
        }
        .dh2 {
            position: relative;
            line-height: 60px;
            float: right;
            margin-right: 20px;
        }
        .dh a{
            padding-left: 10px;
            text-indent: 4em;
            text-decoration: none;
            font-size: 15px;
            color:black;

        }
        .dh a:hover {
            color: rgb(240, 83, 21);
        }



        .bd1 {
            position: absolute;
            top: 125px;
            width: 1155px;
            height: 350px;
            left: auto;
            padding: 10px;
        }
        .bdd1 a {
            position: relative;
            display: block;
            text-decoration: none;
            line-height: 10px;
            width: 80px;
            height: 15px;
            background-color: rgb(161, 160, 159);
            font-size: 12px;
            color: white;
            padding: 10px;
        }
        .bdd2 {
            position: relative;
            left: 100px;
            bottom: 350px;
            height: 350px;
            width: 800px;
            line-height: normal;
        }
        .bdd4 a {
            position: relative;
            left: 5px;
            bottom: 175px;
            float:left;
            background-color: #b9b7b7;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            border-radius: 10px;
            color: black;
        }
        .bdd5 a {
            position: relative;
            right: 5px;
            bottom: 175px;
            float: right;
            background-color: #b9b7b7;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            border-radius: 10px;
            color: black;
        }
        .bdd3 img {
            position: relative;
            left: 870px;
            bottom: 700px;
            height: 350px;
            width: 250px;
        }
        .bd a:hover {
            background-color: rgb(242, 104, 13);
        }


        .bd2 {
            position: absolute;
            top: 495px;
            width: 1175px;
            height: 290px;
            left: auto;
            padding: 10px 0 0 0;
            /* 设置上右下左的内边距，会把盒子撑大 */
        }
        .bddd1 p {
            position: relative;
            left: 10px;
            height: 280px;
            width: 280px;
            margin-right: 10px;
        }
        .bd2 p a {
            position: inherit;
            top: 35px;
            left: 5px;
            float: left;
            height: 100px;
            width: 86px;
            margin: 2px;
        }
        .bd2 p a:hover {
            color: aliceblue;
        }
        .bddd2 a {
            position: relative;
            left: 300px;
            float: left;
            bottom: 280px;
            height: 280px;
            width: 280px;
            margin-right: 10px;
        }

        .btm {
            position: absolute;
            top: 830px;
            height: 130px;
            width: 1175px;
        }


        .food {
            padding-top: 5px;
            padding-left: 6px;
            position: absolute;
            top: 980px;
            height: 500px;
            width: 1175px;
        }
        .f1 a {
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            background-color: rgb(184, 235, 140);
            color: #000;
            position: relative;
            float: left;
            height: 50px;
            width: 285px;
            margin-right: 5px;
            border-radius: 20px;
        }

        .f2 {
            float: left;
            top: 8px;
            height: 5px;
        }

        .f3 {
            top: 80px;
            height: 60px;
            width: 1155px;
        }
        .f3 p {
            bottom: 50px;
            position: relative;
            display: block;
            padding-left: 50px;
            line-height: 60px;
            margin: auto 50px;
            float: left;
        }
        .f4 {
           
            top: 50px;
            left: 80px;
            height: 350px;
            width: 100px;
            float: left;
            text-align: center;
        }
        .f4 a {
            position: relative;
            display: block;
            text-decoration: none;
            line-height: 20px;
            width: 80px;
            height: 10px;
            font-size: 15px;
            color: #000;
            padding: 10px;
        }

        .f5 {
            
            top: 50px;
            left: 190px;
            height: 350px;
            width: 110px;
            float: left;
            text-align: center;
        }
        .f5 a {
            position: relative;
            display: block;
            text-decoration: none;
            line-height: 20px;
            width: 80px;
            height: 10px;
            font-size: 15px;
            color: #000;
            padding: 10px;
        }

        .f6 {
           
            top: 50px;
            left: 310px;
            height: 350px;
            width: 100px;
            float: left;
            text-align: center;
        }
        .f6 a {
            position: relative;
            display: block;
            text-decoration: none;
            line-height: 20px;
            width: 80px;
            height: 10px;
            font-size: 15px;
            color: #000;
            padding: 10px;
        }

        .f7 {
            
            top: 50px;
            left: 440px;
            height: 350px;
            width: 100px;
           float: left;
            text-align: center;
        }
        .f7 a {
            position: relative;
            display: block;
            text-decoration: none;
            line-height: 20px;
            width: 80px;
            height: 10px;
            font-size: 15px;
            color: #000;
            padding: 10px;
        }

        .f8 {
           
            top: 50px;
            left: 560px;
            height: 350px;
            width: 100px;
            float: left;
            text-align: center;
        }
        .f8 a {
            position: relative;
            display: block;
            text-decoration: none;
            line-height: 20px;
            width: 80px;
            height: 10px;
            font-size: 15px;
            color: #000;
            padding: 10px;
        }
        .ta {
            position: relative;

        }

        .food a:hover {
            color: rgb(240, 83, 21);
        }

        .endf {
            position: absolute;
            top: 1600px;
            width: 1155px;
            height: 180px;
            background-image: url(\pengpai.webp);
            background: rgba(#fff, #FFF, #Fff, 0.1);
            opacity: 0.7;
        }
        .endf p {
            position: relative;
            left: 0;
            height: 50px;
            width: 1155px;
            color: #e1e6c9;
            font-size: 20PX;
            line-height: 50PX;
            text-align: center;
        }

        .thetop {
            position: fixed;
            bottom:10px;
            right:5px;
            }
        .thetop a {
            border-radius: 20%;
            color: #000;
            display: block;
            font-size: 12px;
            width: 20px;
            height: 15px;
            padding-bottom: 7px;
            margin-bottom: 1px;
            text-decoration: none;
            background-color: rgb(117, 228, 66);
            opacity: 0.6;
        }

        .team {
            position: relative;
            top: 1730px;
            left: 500px;
            height: 200px;
            width: 200px;
            background-color: #c6f290;
        }
        .team ul {
            float: left;
            line-height: 30px;
            color: black;
            list-style: none;
        }

    </style>
</head>

<body>
    <div class="main">
    <div class="top" name="k">
        <div class="top1">
            <a href="https://www.mi.com/" target="_blank">小米官网</a>
            <a href="https://www.mi.com/shop" target="_blank"> 小米商城</a>
            <a href="https://airstar.com/home" target="_blank">天星数科</a>
            <a href="https://xiaoai.mi.com/" target="_blank">小爱同学</a>
            <a href="https://qiye.mi.com/" target="_blank">企业团购</a>
            <a href="https://www.mi.com/shop/aptitude/list?id=41" target="_blank">资质证照</a>
            <a href="https://www.mi.com/shop/aptitude/list" target="_blank">协议规则</a>
            <a href="https://www.mi.com/appdownload" target="_blank">下载app</a>
            <a href="https://home.miui.com/" target="_blank">MIUI</a>
            <a href="https://i.mi.com/" target="_blank">云服务</a>
        </div>
        <div class="top2">
            <a href="#">注册</a></p2>
            <a href="#">登录</a></p2>
        </div>
        <div class="top3">
            <a href="#"><img src="shoppingcar.png" width="50px" height="30px">购物清单</a></p3>
        </div>
            
            
           
        
    </div>


    <div class="dh">
        <div class="dh0">
            <a href="https://www.mi.com/" target="_blank">
            <img src="小米图标.jfif" width="60px" height="60px">
        </a>
    </div>
        <div class="dh1">
            <a href="#">xioami手机</a>
            <a href="#">readmi手机</a>
            <a href="#">电视</a>
            <a href="#">笔记本</a>
            <a href="#">平板</a>
            <a href="#">家电</a>
            <a href="#">路由器</a>
            <a href="#">社区</a>
            <a href="#">服务中心</a>
        </div>
        <div class="dh2">
            <input type="text" placeholder="搜索.." name="search" style="width:200px; height:34px;">
            <button type="submit" style="width:55px; height:30px;">search</button>
        </div>  
    </div>


    <div class="bd1">
        <div class="bdd1 bd">
            <a href="#">手机</a>
            <a href="#">电视</a>
            <a href="#">家电</a>
            <a href="#">出行 穿戴</a>
            <a href="#">耳机 音响</a>
            <a href="#">健康 儿童</a>
            <a href="#">生活 箱包</a>
            <a href="#">电源 配件</a>
            <a href="#">智能 路由器</a>
            <a href="#">笔记本 平板</a>
        </div>

        <div class="bdd2">
            <a href="https://www.mi.com/shop/buy/detail?product_id=10050059"><img src="k70.png" width="800px" height="350px"></a>
            <div class="bdd4 bd">
                <a href="">&lt;</a>
            </div>
            <div class="bdd5 bd">
                <a href="">&gt;</a>
            </div>        
        </div>

        <div class="bdd3">
            <img src="live.jpg" alt="图片加载失败" height="350px" width="250px">
        </div>
    </div>

    <div class="bd2">
        <div class="bddd1">
            <p>
                <a href="#" ><img src="保障服务.jpg" alt="丢失"  height="100px" width="86px"></a>
                <a href="#" ><img src="企业团购.jpg" alt="丢失" height="100px" width="86px"></a>
                <a href="#" ><img src="f码通道.jpg" alt="丢失" height="100px" width="86px"></a>
                <a href="#" ><img src="米粉卡.jpg" alt="丢失" height="100px" width="86px"></a>
                <a href="#" ><img src="以旧换新.jpg" alt="丢失" height="100px" width="86px"></a>
                <a href="#" ><img src="话费充值.jpg" alt="丢失" height="100px" width="86px"></a>
            </p>
        </div>

        <div class="bddd2">
            <a href="https://www.mi.com/redmi7" target="_blank"><img src="redmi7.jpg" alt="图片加载失败" height="280px" width="280px"></a>
            <a href="https://www.mi.com/mix3" target="_blank"><img src="miaomiMIX3.jpg" alt="图片加载失败" height="280px" width="280px"></a>
            <a href="https://www.mi.com/shouhuan4" target="_blank"><img src="miaomi手环4.jpg" alt="图片加载失败" height="280px" width="280px"></a>
        </div>
    </div>

    <div class="btm">
        <a href="https://www.mi.com/shop/buy/detail?product_id=19288"><img src="pengpai.webp" alt="图片加载失败" height=130px; width=1175px;></a>
    </div>

    <div class="food">
        <div class="f1">
            <a href="#">预约维修服务</a>
            <a href="#">7天无理由退货</a>
            <a href="#">15天免费换货</a>
            <a href="#">满69元包邮</a>
        </div>

        <div class="f2 ta">
            <hr>
        </div>

        <div class="f3 ta">
            <p>选购指南</p>
            <p>服务中心</p>
            <p>申请售后</p>
            <p>维修服务价格</p>
            <p>关注我们</p>
        </div>

        <div class="f4 ta">
            <a href="">手机</a>
            <a href="">电视</a>
            <a href="">笔记本</a>
            <a href="">平板</a>
            <a href="">穿戴</a>
            <a href="">耳机</a>
            <a href="">家电</a>
            <a href="">路由器</a>
            <a href="">音箱</a>
            <a href="">配件</a>
        </div>
        <div class="f5 ta">
            <a href="">订单查询</a>
            <a href="">以旧换新</a>
            <a href="">保障服务</a>
            <a href="">防伪查询</a>
            <a href="">F码通道</a>
            <a href="">申请售后</a>
            <a href="">售后政策</a>
            <a href="">维修服务价格</a>
        </div>

        <div class="f6 ta">
            <a href="">小米之家</a>
            <a href="">服务网点</a>
            <a href="">授权体验店/专区</a>

        </div>

        <div class="f7 ta">
            <a href="">关于小米</a>
            <a href="">了解小米</a>
            <a href="">加入小米</a>
        </div>
        <div class="f8 ta">
            <a href="">投资者关系</a>
            <a href="">可持续发展</a>
            <a href="">廉洁举报</a>
            <a href="">新浪微博</a>
            <a href="">官方微信</a>
            <a href="">联系我们</a>
            <a href="">公益基金会</a>
        </div>
    </div>

    <div class="thetop">
        <a href="#" class="the1" title="回到顶部" id="k">Top</a>
        <a href="#" class="the2"><img src="a.png" alt="图片加载失败" title="维修中心" height="20px" width="20px"> </a>
        <a href="#" class="the3"><img src="b.png" alt="图片加载失败" title="手机中心" height="20px" width="20px"> </a>
        <a href="#" class="the4"><img src="c.png" alt="图片加载失败" title="人工客服" height="20px" width="20px"> </a>
        <a href="#" class="the5"><img src="d.png" alt="图片加载失败" title="个人中心" height="20px" width="20px"> </a>
    </div>

    <div class="endf">
        <P>2023年网页设计报告</P>
    </div>

    <div class="team">
        <ul>
            <li>制作团队</li>
            <li>班级:2022级</li>
            <li>姓名：明</li>
            <li>学号:2019</li>
            <li>专业:计算科学</li>
        </ul>
    </div>
</div>
</body>
</html>

paopilong

关注

23
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
关于web前端开发copy小米的案例（目前正在学web，所以对于大神来说我这个就是垃圾，仅供参考）

<img src="redmi7.jpg" alt="图片加载失败" height="280px" width="280px">
复制链接

扫一扫