尚硅谷html+css小米官网

一. 准备工作

• 创建index.html文件
• 创建index.css文件
• 创建base.css文件

二.搭建结构

• 引入css文件：

    <!-- 引入index.css文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入清除默认样式css文件 -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入base.css文件 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="../fa/css/all.css">

• 设置公共样式:

/* 公共样式 */
body{
    font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    min-width: 1226px;
}
/* 防止高度塌陷 */
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}
/* 设置一个类，用来表示中间容器的宽度 */
.w{
    /* 固定容器的宽度 */
    width: 1226px;
    /* 设置容器居中 */
    margin: 0 auto;
}
/* 给所有a标签去除下划线 */
a{
    text-decoration: none;
    color: #333;
}

1.头部导航条：

• 在index.html中搭建结构：

    <!-- 导航条 -->
    <!-- 创建外部容器 -->
    <div class="topbar-wrapper">
        <!-- 创建内部容器 -->
        <div class="topbar w clearfix">
            <!-- 左部导航 -->
            <ul class="servlce">
                <li><a href="">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="">MUUI</a></li>
                <li class="line">|</li>
                <li><a href="">loT</a></li>
                <li class="line">|</li>
                <li><a href="">云服务</a></li>
                <li class="line">|</li>
                <li><a href="">金融</a></li>
                <li class="line">|</li>
                <li><a href="">有品</a></li>
                <li class="line">|</li>
                <li><a href="">小爱开发平台</a></li>
                <li class="line">|</li>
                <li><a href="">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="">协议规则</a></li>
                <li class="line">|</li>
                <li><a href="">下载app</a></li>
                <li class="line">|</li>
                <li><a href="">Select Location</a></li>
            </ul>
            <!-- 购物车 -->
            <ul class="shop-cart">
                    <li>
                        <a href="">
                            <i class="fas fa-shopping-cart"></i>
                            购物车
                        </a>
                    </li>
            </ul>
            <!-- 用户登录注册块 -->
            <ul class="user-info">
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
                <li><a href="">消息通知</a></li>
            </ul>
        </div>
    </div>

• 给导航条设置样式：

/* 主页index样式文件 */
.topbar-wrapper {
    /* 设置宽度 */
    width: 100%;
    /* 设置高度 */
    height: 40px;
    /* 设置行高，使文字垂直居中 */
    line-height: 40px;
    /* 设置背景颜色 */
    background-color: #333;
}

/* 设置a标签样式 */
.topbar a{
    color: #b0b0b0;
    font-size: 12px; 
    display: block;
}
/* 设置a标签鼠标悬浮效果 */
.topbar a:hover{
    color: #fff;
}
/* 设置左边导航栏 */
.service,
.topbar li {
    float: left;
}


/* 设置导航栏中间线条样式 */
.topbar .line {
    font-size: 12px;
    color: #424242;
    margin: 0 8px;
    margin-top: -1px;
}

/* 设置右边导航栏 */
.shop-cart,
.user-info {
    float: right;
}
/* 设置导航栏购物车样式 */
.shop-cart a{
    width: 120px;
    text-align: center;
    background-color: #424242;
}
.shop-cart{
    margin-left: 26px;
}
.shop-cart:hover a{
    background-color: white;
    color: #ff6700;
}
.shop-cart i{
    margin-right: 2px;
}

• 运行效果：

• 创建下载app弹出层：

• 在index.html中加入代码：

  <a class="app" href="">下载app
                        <!-- 弹出框 -->
                        <div class="qrcode">
                            <img src="../img/download.png" alt="">
                            <span>小米商城app</span>
                        </div>
                    </a>

• 在index.css加入样式：

/* 弹出框 */
.app .qrcode{
    width: 124px;
    height: 148px;
    /* 清除上面行高样式，不然会使span下移 */
    line-height: 1;
    text-align: center;
    background-color: #fff;
    /* 加上边框阴影效果 */
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    /* 开启绝对定位 */
    position: absolute;
    /* 设置偏移量 */
    left: -40px;
    /* margin-left: -62px; */

}
/* 设置二维码图片 */
.qrcode img{
    width: 90px;
    margin:17px;
    margin-bottom: 10px;
}
/* 设置二维码文字 */
.qrcode span{
    color: black;
    font-size: 14px;
}
.app{
    position: relative;
}
/* 设置app下的小三角 */
.app::after{
    content: '';
    width: 0;
    height: 0;
    /* 开启绝对定位 */
    position: absolute;
    /* 设置四个方向的边框 */
    border: 8px solid transparent;
    /* 去除上边框 */
    border-top: none ;
    border-color: transparent transparent white transparent;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

• 加入鼠标移入效果：

1. 原始的鼠标移入效果：

      鼠标移入第一种方法:
       index.css：
   

/* 首先加入display:none;使弹出框隐藏 */
.app .qrcode{
    /* 隐藏 */
    display: none;
}
/* 设置app下鼠标移入的小三角 */
/* 在.app::after前加入li:hover */
li:hover>.app::after {
    content: '';
    width: 0;
    height: 0;
    /* 开启绝对定位 */
    position: absolute;
    /* 设置四个方向的边框 */
    border: 8px solid transparent;
    /* 去除上边框 */
    border-top: none;
    border-color: transparent transparent white transparent;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* 鼠标悬浮效果 */
/* .app:hover .qrcode,
.app:hover .app::after{
    display: block;
} */
li:hover>.app .qrcode{
    display: block;
}

   第二种方法

  		index.html:
  		在li中加入类选择器app-warpper

<!-- 在li加入类选择器app-wrapper -->
<li class="app-wrapper">
                    <a class="app" href="">下载app
                        <!-- 弹出框 -->
                        <div class="qrcode">
                            <img src="../img/download.png" alt="">
                            <span>小米商城app</span>
                        </div>
                    </a>
                </li>

• index.css：

     把li:hover换成.app-weapper:hover
  

/* 设置app下鼠标移入的小三角 */
.app-wrapper:hover>.app::after {
    content: '';
    width: 0;
    height: 0;
    /* 开启绝对定位 */
    position: absolute;
    /* 设置四个方向的边框 */
    border: 8px solid transparent;
    /* 去除上边框 */
    border-top: none;
    border-color: transparent transparent white transparent;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* 鼠标悬浮效果 */
/* .app:hover .qrcode,
.app:hover .app::after{
    display: block;
} */
.app-wrapper:hover>.app .qrcode{
    display: block;
}

2. 另外的鼠标移入的效果：

• index.html:

     在.qrcode中修改：
     		1.首先把display:nono;样式去除
     		2.把高度调整为0
     		3.增加一个transition: height 0.3s;属性
  

/* 弹出框 */
.app .qrcode {
    width: 124px;
    /* 想要好多的鼠标移入效果首页把高度隐藏 */
    /* height: 148px; */
    /* 高度设置为0 */
    height: 0;
    /* 设置overflow: hidden;隐藏 */
    overflow: hidden;
    /* 清除上面行高样式，不然会使span下移 */
    line-height: 1;
    text-align: center;
    background-color: #fff;
    /* 加上边框阴影效果 */
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    /* 开启绝对定位 */
    position: absolute;
    /* 设置偏移量 */
    left: -40px;
    /* margin-left: -62px; */
    /* 隐藏 */
    /* display: none; */
    
    /* transition: ; 用于为样式设置过渡效果*/
    transition: height 0.3s;
        /* 设置层级 */
    z-index: 9999;

}
 /* 设置鼠标移入效果*/
.app:hover .qrcode,
.app:hover::after{
    display: block;
    /*当鼠标移入时高度增加到148px*/
    height: 148px;
}

• 创建购物车弹出框：

     1.在index.html中加入代码：
     2.设置购物车样式和鼠标移入效果：
  

index.html：

 <!-- 购物车 -->
            <ul class="shop-cart">
                <li>
                    <a href="">
                        <i class="fas fa-shopping-cart"></i>
                        购物车（0）
                        <div class="shopcart-wrapper">
                            <p>购物车中还没有商品，赶紧选购吧！</p>
                        </div>
                    </a>
                </li>
            </ul>

index.css购物车代码：

/* 购物车弹出框 */
.shopcart-wrapper{
    width: 400px;
    /* 设置高度为0，使用动态显示效果 */
    /* height: 120px; */
    height: 0;
    line-height: 120px;
    background-color: #fff;
    border-top: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    position: absolute;
    right: 0;
    /* 设置默认不显示 */
    /* display: none; */
    /* 设置overflow: hidden;隐藏 */
    overflow: hidden;
    transition: height 0.3s;
     /* 设置层级 */
    z-index: 9999;
}
.shopcart-wrapper p{
    color: black;
    font-size: 15px;
}
/* 设置鼠标移入购物车图标时弹出框显示 */
.shop-cart:hover .shopcart-wrapper,
.shop-cart:hover .shopcart-wrapper p{
    display: block;
    height: 120px;
}

运行图：

2.内容区：

  	index.html:
  	1. 左边logo区html代码：

    <div class="header-wrapper">
        <div class="header w  clearfix">
            <div class="logo">
                小米官网
                <a href="" class="home"></a>
                <a href="" class="mi"></a>
            </div>
        </div>
    </div>

  	index.css:
  	1.左边logo区css代码：

/* 设置header部分 */
.header{
    width: 100%;
    height: 100px;
    background-color: #fff;
}

.header .logo{
    width: 55px;
    height: 55px;
    float: left;
    margin: 22px 0;
    position: relative;
    /* 只显示一个logo */
    overflow: hidden;
    /* 隐藏logo中的文字 */
    text-indent: -9999px;
}
.header .logo a{
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    border-radius: 30%;
    background-image: url(../img/mi-logo.png);
    background-position: center;
    /* 开启绝对定位 */
    position: absolute;
    /* 开启鼠标移入动态效果 */
    transition: left 0.3s;
    /* 设置left:0; */
    left: 0;
}
.header .logo .home{
    left: -55px;
    background-image: url(../img/mi-home.png);
}
.header .logo:hover .mi{
    left: 55px;
}
.header .logo:hover .home{
    left: 0px;
}

  	index.html:
  	1.中间导航条html代码：

 <!-- 创建header导航条 -->
            <div class="nav-warpper clearfix">
                <ul class="nav">
                    <li><a href="#" class="all-goods">全部商品分类</a></li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">Redmi 红米</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>

  	index.css:
  	1.中间导航条css代码：

/* header导航条 */
/* 设置中间导航条 */
.header .nav-warpper{
    float: left;
    margin-left: 7px;
}
/* 设置导航条 */
.nav{
    /* width: 800px; */
    height: 100px;
    line-height: 100px;
    background-color: #fff;
    padding-left: 77px;
}
/* 设置导航条中li */
.header li{
    float: left;
}
/* 设置导航条a标签样式 */
.nav-warpper li a{
    font-size: 16px;
    display: block;
    margin: 0 10px;
}
/* 隐藏全部商品分类 */
.nav .all-goods{
    /* 隐藏但是能占据位置 */
    visibility: hidden;
    /* 隐藏但是不能占据位置 */
    /* display: none; */
}
.nav-warpper a:hover{
    color: #ff6700;
}

  	index.html:
  	1.中间导航条弹出框html代码：

       <li><a href="#">社区</a></li>
                    <!-- 导航条弹出框 -->
                    <div class="goods-info">

                    </div>
                </ul>

  	index.css:
  	1.中间导航条弹出框css代码：
  	注意：波浪是兄弟元素选择器，+号也是兄弟选择器，但是需要紧接着，不能隔着其他兄弟元素

/* 导航条弹出框 */
.nav .goods-info{
    width: 100%;
    /* 设置鼠标移入效果首先把高度设置为0 */
    /* height: 228px; */
    height: 0;
    overflow: hidden;
    background-color: #fff;
    /* border-top: 1px solid rgb(224, 224, 224);
    box-shadow: 0 5px 3px rgba(0 , 0, 0, .2); */
    position: absolute;
    top: 100px;
    left: 0;
    /* 动态显示效果 */
    transition: height 0.3s;
    /* 层级 */
    z-index: 999;
}
/* 鼠标移入效果 */
/* not(:first-of-type) 第一个不显示
:not(:nth-child(9)) 第九个
:not(:nth-child(10))  第十个不显示 */
/* .nav li:not(:first-of-type):not(:nth-child(9)):not(:nth-child(10)):hover ~ .goods-info, */
.nav .show-goods:hover ~.goods-info,
.goods-info:hover{
    height: 228px;
    border-top: 1px solid rgb(224, 224, 224);
    box-shadow: 0 5px 3px rgba(0 , 0, 0, .2);
}

  	index.html:
  	1.右边搜索框html代码：

 <!-- 创建搜索框 -->
            <div class="search-wrapper">
                <form action="" class="search">
                    <input type="text" class="search-inp">
                    <!-- 创建搜索框中内容 -->
                    <div class="search-word">
                        <a href="">Redmi Note 8</a>
                        <a href="">小米 9</a>
                    </div>
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>

  	index.css:
  	1.右边搜索框css代码：

/* 设置搜索框的容器 */
.search-wrapper{
    width: 296px;
    height: 50px;
    float: right;
    margin-top: 25px;
    position: relative;
}

.search-wrapper .search-inp{
    box-sizing: border-box;
    width: 244px;
    border: none;
    float: left;
    padding: 0 10px;
    height: 50px;
    font-size: 13px;
    border: 1px solid rgb(224, 224, 224);
    outline: none;
    padding: 20px;
    color: #616161;
}

.search-wrapper .search-btn{
    float: left;
    height: 50px;
    width: 52px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #616161;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    border-left: none;
}

.search-wrapper .search-btn:hover{
    background-color: #FF6700;
    color: white;
    border: none;
}
/* 搜索框内容 */
.search-word{
    position: absolute;
    top: 17px;
    left: 93px;
    font-size: 12px;
    margin: 0 5px;
}
.search-word a{
    background-color: #ECEEEB;
    padding: 5px 5px;
    margin: 0 2px;
}
.search-word a:hover{
    color: #fff;
    background-color: #FF6700;
}

  	index.css:
  	1.右边搜索框点击出现红色边框效果css代码：

/* 设置input获取焦点后的样式 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus + button{
    border-color: #FF6700;
}

  	index.html:
  	1.全部商品分类左边导航栏代码：

 <li class="all-goods-wrapper">
                        <a href="#" class="all-goods">全部商品分类</a>
                        <ul class="left-menu">
                            <li>
                                <a href="">手机 电话卡
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">电视 盒子
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">笔记本 平板
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">家电 插线板
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">出行 穿戴
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">智能 路由器
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">电源 配件
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">健康 儿童
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">耳机 音箱
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">生活 箱包
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>

  	index.css:
  	1.全部商品分类左边导航栏css代码：
  	2.首先改动前面的浮动效果

/* 1.设置导航条中li */
.nav > li{
    float: left;
}
/* 设置全部商品分类左边导航条 */
.all-goods-wrapper{
    position: relative;
}
.all-goods-wrapper .left-menu{
    width: 234px;
    height: 420px;
    position: absolute;
    background-color: rgba(0, 0, 0, .7);
    z-index: 999;
    left: -138px;
    line-height: 1;
    padding:20px 0;
}
ul .left-menu li a{
    display: block;
    height: 42px;
    color: #fff;
    line-height: 42px;
    font-size: 14px;
    margin-right: 0;
    margin-left: 0;
    padding: 0 30px;
}
.left-menu li i{
    float: right;
    line-height: 42px;
}

.left-menu a:hover{
    background-color: #ff6700;
    color: #fff;
}

  	index.html:
  	1.全部商品分类左边导航栏弹出框html代码：

 <li><a href="#">社区</a></li>
                    <!-- 导航条弹出框 -->
                    <div class="goods-info">

                    </div>
                </ul>

  	index.css:
  	1.全部商品分类左边导航栏弹出框css代码：

/* 设置全部商品分类左边导航条弹出框 */
.left-menu .all-info{
    /* width: 992px; */
    height: 460px;
    width: 0;
    overflow: hidden;
    transition: width 0.3s;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 234px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    /* display: none; */
    z-index: 999;
}
/* 设置鼠标移入效果 */
.left-menu:hover .all-info{
    /* display: block; */
    width: 992px;
}

  	index.html:
  	1.轮播图html代码：

                <!-- 创建轮播图 -->
                <div class="banner-warpper">
                    <div class="banner w">
                        <ul class="img-list">
                            <li><a href=""><img src="../img/banner1.jpg" alt=""></a></li>
                            <li><a href=""><img src="../img/banner2.jpg" alt=""></a></li>
                            <li><a href=""><img src="../img/banner3.jpg" alt=""></a></li>
                            <li><a href=""><img src="../img/banner4.jpg" alt=""></a></li>
                            <li><a href=""><img src="../img/banner5.jpg" alt=""></a></li>
                        </ul>
                        <!-- 导航点 -->
                        <div class="pointer">
                            <a href="#" class="highlight"></a>
                            <a href="#"></a>
                            <a href="#"></a>
                            <a href="#"></a>
                            <a href="#"></a>
                        </div>
                        <!-- 创建切换按钮 -->
                        <div class="prev-next">
                            <a href="" class="prev"></a>
                            <a href="" class="next"></a>
                        </div>
                    </div>
                </div>

  	index.css:
  	1.轮播图css代码：

/* 设置轮播图样式 */
.banner {
    position: relative;
    height: 460px;
}

.banner-warpper {
    height: 460px;
    position: relative;
}

.banner img {
    width: 100%;
    vertical-align: top;
}

.banner .img-list li {
    position: absolute;
}

/* 设置导航点 */
.banner .pointer {
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 22px;
    right: 35px;
}

.pointer a {
    width: 6px;
    height: 6px;
    float: left;
    margin: 0 3px;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
}

.pointer a:hover {
    border-color: rgba(0, 0, 0, .4);
    background-color: rgba(255, 255, 255, .4);
}

.pointer .highlight {
    border-color: rgba(0, 0, 0, .4);
    background-color: rgba(255, 255, 255, .4);
}

/* 设置切换按钮样式 */
.prev-next {
    position: relative;
}

.prev-next .prev {
    position: relative;
}

.prev-next .prev {
    width: 41px;
    height: 69px;
    display: block;
    background-image: url(../img/icon-slides.png);
    position: absolute;
    background-position: -83px;
    top: 200px;
    left: 235px;
}

.prev-next .next {
    width: 41px;
    height: 69px;
    display: block;
    background-image: url(../img/icon-slides.png);
    position: absolute;
    top: 200px;
    left: 1184px;
    background-position: -125px;
}
.prev-next .prev:hover{
    background-position: 0 0;
}
.prev-next .next:hover{
    background-position: -41px;
}

3.广告区:

  	index.html:
  	1.广告区html代码：

    <!-- 创建广告容器 -->
    <div class="adv w">
        <ul class="shortcut">
            <li>
                <a href="">
                    <i class="fas fa-clock"></i>
                    小米秒杀
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fas fa-building"></i>
                    企业团购
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fab fa-facebook"></i>
                    F码通道
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fas fa-sd-card"></i>
                    米粉卡
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fas fa-user-clock"></i>
                    以旧换新
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fas fa-dollar-sign"></i>
                    话费充值
                </a>
            </li>
        </ul>
        <!-- 广告区图片内容 -->
        <ul class="adv-img">
            <li><a href=""><img src="../img/1.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/2.jpg" alt=""></a></li>
            <li><a href=""><img src="../img/3.jpg" alt=""></a></li>
        </ul>
    </div>

  	index.css:
  	1.广告区css代码：

/* 广告区 */ 
.adv{
    padding-top: 14px ;
    height: 170px;
}
.adv .shortcut,
.adv .imgs,
.adv li{
    float: left;
}
/* 左边快捷方式 */
.adv .shortcut{
    width: 230px;
    height: 168px;
    margin-right: 14px;
    background-color: #5f5750;
    padding-top: 2px;
    padding-left: 4px;
    font-size: 2px;
}
.adv .shortcut a{
    display: block;
    width: 76px;
    height: 84px;
    color: #cfccca;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
}
.adv  ul li{  
    float: left;
}
.adv .shortcut i{
    display: block;
    margin-top: 20px;
    margin-bottom: 6px;
    font-size: 20px;
}
.adv .adv-img li{
    width: 316px;
    margin-right: 15px;
}
.adv .adv-img li:last-child{
    margin: 0;
}
.adv .adv-img img{
    width: 100%;
}
/* 鼠标移入效果 */
.adv .shortcut a:hover{
    color: #fff;
}
.adv .shortcut li{
    position: relative;
}
/* 设置边框线条 */
.adv .shortcut li::before{
    content: '';
    width: 64px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #6e5e57;

}
.adv .shortcut li::after{
    content: '';
    width: 1px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto 0;
    background-color: #6e5e57;
}

三. 整体效果:

  运行截屏：