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

说明：

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 设置过渡效果

仿写小米网站首页顶部导航栏部分相关推荐

仿写小米网站首页产品导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页中间部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
购物网站制作——顶部导航栏（index.html)
1. 快捷导航shortcut制作 1.1 如何分块分析如下 1.2 如何添加"| "分隔符 1.3 如何添加小箭头字体图标下载地址: IcoMoon App - Icon F ...
第一次仿写小米官方首页总结
自学前端有一个多月了,学完HTML+CSS基础部分也有一些时间了,于是就想着通过仿制网站来掌握和提高基础技能. 仿制页面是一种不错的学习方式,通过敲代码就能发现很多存在的问题,加以改进,并总结成自己的 ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...

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

仿写小米网站首页顶部导航栏部分相关推荐

最新文章

热门文章

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

仿写小米网站首页 顶部导航栏部分相关推荐

最新文章

热门文章

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

仿写小米网站首页顶部导航栏部分相关推荐