项目介绍

学习HTML和CSS有一段时间了，笔者做了一个相对练习而言较为复杂的网页，某米的官网首页，上一下最终效果图：

这个网页相对来说还是比较有练习意义的，包含导航栏，大量的浮动和弹性布局以及一些细小却重要的知识点。

需求分析

自顶而下，先整体再局部，我们慢慢分析。

1.Header

头部比较简单，顶部有一个广告图，下面紧挨着一个黑色横向导航栏，以及最右侧的字体图标购物车标签。在往下就是一个白色导航栏。

2.Body

主体部分分为四大部分，主页面框架，广告页面框架，手机页面框架，家电页面框架，以及视频列表。

3.Footer

页脚左侧有导航栏，右侧为一些常规信息。

页面布局及样式实现

1.引入css文件及初始化

这里我们先引入一个自己设置的初始化文件，关于初始化文件，大家可以去自行搜索，每一个大型网页都有自己的初始化文件，其次，我们再创建一个我们网页的主css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/mi.css">
</head>

其中初始化reset.css为

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}

2.实现顶部广告

首先先写我们的html框架

<!-- 头部开始 -->
    <div class="header">
        <a href="#">
            <img src="../media/top.jpg" alt="">
        </a>
</div>
<!-- 头部结束 -->

接着写我们的css

/* 头部样式开始 */
.header{
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    /* 图片，以中间开始渲染 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/* 头部样式结束 */

overflow:hiddeb 清除浮动

这里因为我们图片有点过长，我们要稍微做点调整，用到位置摆放，巧妙使用left和transform参数使我们的图片摆放在页面正中间。

初步完成后的网页效果

看着还不错，继续！

3.黑色导航栏

首先先写我们的HTML框架

    <!-- 黑色导航栏部分开始 -->
    <!-- 
        黑色导航栏实现步骤：
            1.主容器，背景黑色
            2.内容部分居中显示，容器处理
            3.做导航和右导航
            4.动画
     -->
    <div class="black-nav">
        <div class="wrap">
            <ul class="black-nav-left">
                <li><a href="#">小米商城<span>丨</span></a></li>
                <li><a href="#">MIUI<span>丨</span></a></li>
                <li><a href="#">loT<span>丨</span></a></li>
                <li><a href="#">云服务<span>丨</span></a></li>
                <li><a href="#">天星数科<span>丨</span></a></li>
                <li><a href="#">有品<span>丨</span></a></li>
                <li><a href="#">小爱开放平台<span>丨</span></a></li>
                <li><a href="#">企业团购<span>丨</span></a></li>
                <li><a href="#">资质证照<span>丨</span></a></li>
                <li><a href="#">协议规则<span>丨</span></a></li>
                <li>
                    <a href="#">下载APP</a>
                    <span>丨</span>
                    <div class="download">
                        <img src="../media/download.png" alt="">
                        <p>小米商城APP</p>
                    </div>
                    <div class="stri"></div>
                </li>
                <li><a href="#">智能生活<span>丨</span></a></li>
                <li><a href="#">SelectLocation<span>丨</span></a></li>
            </ul>
            <ul class="black-nav-right">
                <li><a href="#">登录<span>丨</span></a></li>
                <li><a href="#">注册<span>丨</span></a></li>
                <li><a href="#">消息通知<span>丨</span></a></li>
                <li class="cart">
                    <a href="#">
                        <i class="iconfont">&#xe607;</i>
                        <i>购物车(0)</i>
                    </a>
                    <div class="cart-list">
                        购物车中还没有商品，赶紧选购吧
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 黑色导航栏部分结束 -->

接着写我们的css样式

/* 黑色导航栏样式开始 */
.black-nav{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    font-size: 12px;
}
.wrap{
    width: 1224px;
    margin: 0 auto;
}
.black-nav-right{
    float: right;
}
.black-nav-left{
    float: left;
}
.black-nav li{
    float: left;
    position: relative;
}
.black-nav a{
    color: #b0b0b0;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
.download{
    width: 115px;
    height: 0;
    background-color: #fff;
    box-shadow: 0 1px 5px #aaa;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -70px;
    overflow: hidden;
    transition: all 0.3s;
}
.download p{
    color: #333;
    font-size: 14px;
    line-height: 14px;
}
.download img{
    width: 90px;
    margin: 18px auto 0;
}
.black-nav-left li:hover>.download{
    height: 148px;
}
.stri{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 25%;
    margin-right: -8px;
    display: none;
}
.black-nav-left>li:hover>.stri{
    display: block;
}
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    position: relative;
}
.cart:hover{
    background-color: #fff;
}
.cart:hover>a{
    color: #ff6700;
}
.cart i{
    font-style: normal;
    margin-right: 8px;
}
.cart-list{
    width: 316px;
    height: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0;
    top: 40px;
    color: #424242;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 100px;
}
.cart:hover>.cart-list{
    height: 100px;
}
/* 黑色导航栏样式结束 */

其中我们用到了字体图标中的购物车样式，然后我们在下载APP和购物车图标那加了一个动画效果，主要用到transition，在下载APP那加了.stri,这个是画一个白色的三角形。动画效果如下：

好了，看一下最终效果

还不错，继续！

4.白色导航

先分析一些我们我们要的最终效果是什么样的，首先这个白色导航栏与上面的黑色导航栏以及后面的部分宽度是一样的你，可以共用一个属性样式，白色导航栏的最左边是一个小米的logo和一个小房子两个图片组成的一个动画，接着是一个列表，里面有一个动态的图片和几个文字标签，当鼠标滑动到标签上将内容展示出来，最右边是一个搜索框和一个字体图标。我这里只给小米手机加了内容，其他的标签原理都一样。

首先写我们的HTML框架

    <!-- 白色导航栏部分开始 -->
    <div class="white-nav">
        <div class="wrap">
            <div class="logo">
                <img src="../media/mi-home.png" class="mi-home">
                <img src="../media/mi-logo.png" class="mi-logo">
            </div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#"><img src="../media/zzxsh.gif" alt=""></a></li>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <div class="img-box">
                                            <img src="../media/phone.png" alt="">
                                        </div>
                                        <p class="name">小米10至尊纪念版</p>
                                        <p class="price">5200元</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../media/phone.png" alt="">
                                        </div>
                                        <p class="name">小米10至尊纪念版</p>
                                        <p class="price">5200元</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../media/phone.png" alt="">
                                        </div>
                                        <p class="name">小米10至尊纪念版</p>
                                        <p class="price">5200元</p>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="../media/phone.png" alt="">
                                        </div>
                                        <p class="name">小米10至尊纪念版</p>
                                        <p class="price">5200元</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </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="search">
                <input type="text" placeholder="元宇宙">
                <button class="iconfont">&#xe63d;</button>
            </div>
        </div>
    </div>
    <!-- 白色导航栏部分结束 -->

接着写css样式

/* 白色导航栏样式开始 */
.white-nav{
    width: 100%;
    height: 100px;
    background-color: #fff;
    position: relative;
}
.logo{
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    float: left;
    margin-top: 22.5px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}
.logo img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.mi-home{
    left: -55px;
}
.mi-logo{
    left: 0;
}
.logo:hover>.mi-home{
    left: 0;
}.logo:hover>.mi-logo{
    left: 55px;
}
.nav-bar{
    width: 875px;
    height: 100px;
    line-height: 100px;
    float: left;
}
.search{
    width: 296px;
    height: 100px;
    float: right;
}
.nav-bar li{
    float: left;
}
.nav-bar>ul>li>a{
    color: #333;
    padding: 0 10px;
}
.nav-bar>ul>li>a:hover{
    color: #ff6700;
}
.nav-bar>ul>li:first-child img{
    margin-top: 22.5px;
}
.search input{
    width: 244px;
    height: 50px;
    border: 1px solid #e0e0e0;
    margin-top: 25px;
    /* 去掉选中的边框 */
    outline: none;
    padding: 0 10px;
    box-sizing: border-box;
}
.search button{
    width: 52px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    float: right;
    margin-top: 25px;
}
.search button:hover{
    background-color: #ff6700;
    color: #fff;
}
.nav-bar-list{
    width: 100%;
    height: 229px;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 3px 4px rgba(0,0,0,.1);
    position: absolute;
    /* top: 100px; */
    left: 0;
    display: none;
    z-index: 10;
}
.nav-bar li:hover .nav-bar-list{
    display: block;
}
.img-box{
    width: 100%;
    height: 110px;
    margin-top: 35px;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    margin-bottom: 16px;
}
.nav-bar-list li:last-child .img-box{
    border-right: 0;
}
.nav-bar-list p{
    font-size: 12px;
    line-height: 20px;
}
.name{
    color:  #333;
}
.price{
    color: #ff6700;
}
/* 白色导航栏样式结束 */

看一下最后效果

看着还不错，继续！

5.banner

主要框架是左边一个列表，当鼠标移到到列表选项使，会出现具体的详细信息，右边是一个大大图片。笔者这里只完善了第一个手机选项的内容。

先写我们的HTML框架

    <!-- banner部分开始 -->
    <div class="banner">
        <div class="wrap">
            <img class="bannner-img" src="../media/banner.jpg" alt="">
            <div class="slide">
                <ul>
                    <li>
                        <a href="#">手机 <i class="iconfont">&#xe621</i></a>
                        <div class="slide-list">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../media/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">电视 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">电脑 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">笔记本 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">显卡 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">台式机 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">手机 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">手机 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">手机 <i class="iconfont">&#xe621</i></a></li>
                    <li><a href="#">手机 <i class="iconfont">&#xe621</i></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- banner部分结束 -->

接着写css样式

/* banner样式开始 */
.banner{
    width: 100%;
    height: 460px;
    /* position: relative; */
}
.bannner-img{
    width: 100%;
}
.banner>.wrap{
    position: relative;
}
.slide{
    width: 234px;
    height: 420px;
    padding: 22.5px 0;
    background-color: rgba(105,101,101,.6);
    position: absolute;
    left: 0;
    top: 0;
}
.slide>ul>li{
    height: 42px;
    line-height: 42px;
    text-align: left;
    padding-left: 30px;
    font-size: 14px;
}
.slide>ul>li:hover{
    background-color: #ff6700;
}
.slide>ul>li>a{
    color: #fff;
}
.slide i{
    float: right;
    padding-right: 20px;
}
.slide-list{
    width: 1006px;
    height: 465.5px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left: none;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    padding-top: 2px;
    position: absolute;
    top: 0;
    left: 234px;
    display: none;
}
.slide-list ul{
    float: left;
    width: 100%;
}
.slide-list ul li{
    width: 247.75px;
    height: 76px;
    padding: 18px 0 18px 20px;
    box-sizing: border-box;
    line-height: 40px;
    float: left;
}
.slide-list img{
    width: 40px;
    margin-right: 14px;
}
.slide-list span{
    color: #333;
    font-size: 14px;
    /* 一行宽度不够的时候，用...代替 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 一行宽度不够的时候，用...代替 */
    position: relative;
    top: -14px;
}
.slide-list li:hover span{
    color: #ff6700;
}
.slide li:hover .slide-list{
    display: block;
}
/* banner样式结束 */

来看一下最后效果

不错，大体内容已经出来了，继续！

6.广告

这里主要是字体图标和三个广告图片

先写我们的HTML框架

    <!-- 广告部分开始 -->
    <div class="ad">
        <div class="wrap">
            <div class="ad-aside">
                <ul>
                    <li><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    <li><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    <li><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    <li><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    <li><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                    <li><a href="#"><i class="iconfont">&#xe733</i><p>米粉卡</p></a></li>
                </ul>
            </div>
            <div class="ad-img">
                <a href="#"><img src="../media/ad.jpg" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="../media/ad.jpg" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="../media/ad.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 广告部分结束 -->

接着写css样式

/* 广告样式开始 */
.ad{
    width: 100%;
    height: 170px;
    padding: 14px 0 26px;
    background-color: #fff;
    margin-top: 10px;
}
.ad-aside{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    padding: 3px;
    box-sizing: border-box;
    font-size: 12px;
    float: left;
}
.ad-aside li{
    float: left;
    width: 76px;
    height: 82px;
    padding-top: 18px;
    box-sizing: border-box;
    opacity: 0.7;
}
.ad-aside a{
    color: #fff;
}
.ad-aside i{
    font-size: 24px;
    margin-bottom: 4px;
    display: block;
}
.ad-aside li:hover{
    opacity: 1;
}
.ad-img{
    width: 316px;
    height: 170px;
    float: left;
    margin-left: 19.2px;
}
.ad-img img{
    height: 100%;
}
/* 广告样式结束 */

来看一下最后效果

还可以，比较简单。继续！

实训-利用HTML+CSS制作某米官网首页（一）

项目介绍

需求分析

页面布局及样式实现

1.引入css文件及初始化

2.实现顶部广告

3.黑色导航栏

4.白色导航

5.banner

6.广告

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

实训-利用HTML+CSS制作某米官网首页（一）

项目介绍

需求分析

页面布局及样式实现

1.引入css文件及初始化

2.实现顶部广告

3.黑色导航栏

4.白色导航

5.banner

6.广告

热门文章

最新文章

相关课程

相关电子书

相关实验场景