仿写小米网站首页顶部导航栏部分

最新推荐文章于 2022-01-25 18:59:18 发布

格格不入ち

最新推荐文章于 2022-01-25 18:59:18 发布

阅读量8.9k

点赞数 5

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/qq_45234177/article/details/117194192

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

说明：

1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。
4.总体框架分析见博客《仿写小米官网简单的HTML+CSS练习》

目标：仿写小米官网的顶部导航栏：
在这里插入图片描述
初步HTML元素分析：

      观察可知，整体部分为一个整个的块，使用一个div元素。中间有一个表示内容区的块存放要显示的内容。
      内容区分为两部分（左侧导航栏和右侧导航栏），都用ul元素实现，且其中的每一项都是一个链接，所以
      每个li中都是一个链接。除此之外，每个li后面又有一个隔开符，也要用li隔开。整体框架如下：

<div class="all">
        <div class="top-bar">
            <div class="content">
                <ul class="left-bar">
                	<li>
                       <a href="#">小米商城</a>    
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                </ul>
                <ul class="right-bar">
                </ul>
            </div>
        </div>
</div>

CSS样式分析：

  1.对于整个的块div，宽度为整个页面宽度，需设定高度。上部需要设置边框。
  2.对于内容区，高度为父元素高度，需设置一定宽度，用 margin：0 auto；使其居中。
  3.对于内容区中左部导航栏，其中的li需要靠左横向排列。li中的链接要设置鼠标移入样式。其中鼠标移入
    “下载app”这项内容有一个下拉框，所以要添加下拉框元素和样式。
  4.对于内容区中右部导航栏，其中的li需要靠右横向排列。li中的链接要设置鼠标移入样式。其中
    “购物车（0）”这项内容中有一个图标,需要引入图标字体来实现，鼠标移入 “购物车（0）”这项内容有一
    个下拉框，所以要添加下拉框元素和样式。

代码实现：

<!DOCTYPE html>
<html lang="zh">
<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>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./iconfont/fontawesome-free-5.15.3-web/css/all.css">
    <style>
        body{
        	/* 设置整个字体样式 */
            font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
        }
        .top-bar{
            width: 100%;
            height: 40px;
            background-color: #333;
   			 /* 设置上边框 */
            border-top: 1px solid #DADCE0;
            font-size: 14px;
        }
        .top-bar a{
            color: #b0b0b0;
            font-size: 12px;
            /* 去掉链接文字的下划线 */
            text-decoration: none;
        }
        /* 鼠标移入时样式 */
        .top-bar a:hover{
            color: white;
        }
        .top-bar .content{
            width: 1226px;
            height: 40px;
            margin: 0 auto;
            line-height: 40px;
        }
        .top-bar .left-bar{
            height: 100%;
            float: left;
        }
        .top-bar .left-bar li{
            float: left;
        }
        .right-bar{
            float: right;
        }
        .right-bar li{
            float: left;
        }
        /* 分隔符样式 */
        .content .line{
            display: inline-block;
            width: 1px;
            height: 12px;
            margin:  15px 8px;
            background-color: #424242;
        }
        #shopping-car{
            display: inline-block;
            width: 105px;
            height: 40px;
            margin-left: 25px;
            padding-left: 15px;
            background-color: #424242;
            position: relative;
            z-index: 999;
        }
        /* 购物车内容中图标文字样式 */
        #shopping-car .fas{
            color: #b0b0b0;
        }
        /* 设置下拉框中的小三角 */
        .drop-box1::after{
            display: none;
            content: '';
            width: 0px;
            height: 0px;
            border: 8px solid transparent;
            border-top: none;
            border-bottom-color: white;
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: 0 auto;
        }
        /* 下拉二维码 */
        .drop-box1{
            display: block;    
            position: relative;
        }
        .download{
            /* display: none; */
            position: absolute;
            z-index: 999;
            background-color: white;
            box-shadow: 0 1px 5px #aaa;
            top: 40px;
            left: -30px; 
            width: 124px;
            height: 0px;
            overflow: hidden;
            /* 设置过渡样式 */
            transition: height 0.3s;
        }
        .download img{
           /* display: block; */
            width: 90px;
            height: 90px;
            margin: 18px auto 0px;
        }
        .download span{
            margin-left: 17px;    
        }
        .drop-box1:hover .download,
        .drop-box1:hover::after{
            display: block;
            height: 161px;
        }
        /* 购物车下拉框 */
        .drop-box2{
            display: none;
            width: 316px;
            height: 100px;
            line-height: 100px;
            background-color: white;
            /* 开启定位并设置位置 */
            position: absolute;
            z-index: 997;
            top: 40px;
            right: 0;
            /* 设置阴影 */
            box-shadow: 0 5px 5px rgba(170, 170, 170, 0.425);
        }
        .drop-box2 div{
            font-size: 12px;
            margin: 0 65px;        
        }
        #shopping-car:hover .drop-box2{
            display: block;
        }
        #shopping-car:hover{
            background-color: white;    
            border-bottom: 2px solid white;
        }
        #shopping-car:hover .fas{
            color: orange;
        }
        #shopping-car:hover a{
            color: orange;
        }
	</style>
</head>
<body>
    <div class="all">
        <div class="top-bar">
            <div class="content">
                <ul class="left-bar">
                    <li>
                       <a href="#">小米商城</a>    
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#"> MIUI</a>
                    </li> 
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">IoT</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">云服务</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">天星数科</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">有品</a>
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">小爱开放平台</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">企业团购</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">资质证照</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">协议规则</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li class="drop-box1">
                        <a href="#">下载app</a> 
                        <!-- 下拉框 -->
                        <div class="download" >
                            <img src="./img/download.png" alt="二维码">
                            <span>小米商城APP</span>
                        </div>
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">智能生活</a> 
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">Select Location</a> 
                    </li>
                </ul>
                <ul class="right-bar">
                    <li>
                        <a href="#">登录</a>
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">注册</a>
                    </li>
                    <li>
                        <span class="line"></span>
                    </li>
                    <li>
                        <a href="#">消息通知</a>
                    </li>
                    <li id="shopping-car">
                        <div class="shopping-box">
                        	<!-- 图标文字 -->
                            <i class="fas fa-shopping-cart"></i>
                            <a href="#">购物车（0）</a>
                        </div>    
                        <div class="drop-box2">
                            <div>购物车中还没有商品，赶紧选购吧!</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
	</div>
</div>
</body>
</html>

最终结果：
在这里插入图片描述

小结：
1.在内容区中设置 line-height 与 height 相等，可以使子元素中的文字在其中垂直居中。
2.在内容区中，设置两个 ul 中内容浮动时，可以先分别设置两个 ul 浮动，再设置 ul 中的每个 li 靠左浮动，这样，右侧导航栏就会按正确顺序排列。
3.分隔符要单独放在一个 li 元素里，不然格式就会混乱。
4.开启相对定位后会根据最近的开启定位的父元素来定位，所以开启相对定位时，要为其父元素开启定位，一般用 position: relative ，这个定位不会对元素产生影响。
5.用伪类生成小三角形，以.drop-box1类为例：

.drop-box1::after{
            display: none;
            content: '';
            width: 0px;
            height: 0px;
            border: 8px solid transparent;
            border-top: none;
            border-bottom-color: white;
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: 0 auto;
        }

6.用 transition 设置过渡效果