仿写小米网站首页产品导航栏

说明：

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

目标：仿写小米官网的产品导航栏：

初步HTML元素分析：

      观察可知，与顶部导航栏部分类似，整体结构为一个整个的块，使用一个div元素。中间有一个表示内容区的块存放要显示的内容。内容区分为三部分（logo、中间的列表和右侧搜索框），logo部分用div元素，里面放图片。中间的列表用ul元素实现，且其中的每一项都是一个链接，所以每个li中都是一个链接。除此之外，每个li都有一个下拉框。右侧搜索框单独放在一个div元素中。整体框架如下：

<div class="product-bar"><div class="product-content"><div class="logo"><a href="#" ><img src=""></a></div><ul class="list"><li><a href="#">小米手机</a><!-- 下拉框 --><div class="item"></div></li>   <li class="become-color"><a href="#">服务</a></li><li class="become-color"><a href="#">社区</a></li></ul><div class="right"><div class="search"</div></div>      </div></div>

CSS样式分析：

  1.对于整个的块div，宽度为整个页面宽度，需设定高度。2.对于内容区，高度为父元素高度，需设置一定宽度，用 margin：0 auto；使其水平居中。需设置定位，方便后面子元素定位。3.对于内容区中logo部分需要开启绝对定位，排列在内容区的最左边。4.对于内容区中间列表部分，其中的li需要靠左横向排列。每个 li 都有下拉框，所以 li 中的链接要设置鼠标移入样式和下拉框的元素和样式。

代码实现：

<!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;}/* product-bar 产品导航 */.product-bar{width: 100%;height: 100px;}.product-content{width: 1226px;height: 100%;margin: 0 auto;position: relative;font: 14px;}/* 产品导航左侧logo */.logo{margin-top: 21px;position: absolute;}.product-content img{width: 56px;height: 56px;}/* 产品导航 产品列表*/.product-content .list a{text-decoration: none;color: #333;font-size: 16px;}.product-content .list{display: inline-block;width: 620px;height: 100px;line-height: 100px;margin-left: 245px;position: absolute;}.product-content .list li{margin-right: 20px;float: left;}/* 产品导航 产品列表 下拉框 */.item{display: none;width: 1536px;height: 220px;line-height: 230px;border-top: 1px solid #e0e0e0;position: absolute;z-index: 995;left: -400px;background-color: white;}.item ul{width: 1250px;height: 220px;margin: 0px auto;padding-top: 10px;}.item ul li{float: left;height: 220px;}.item ul li img{width: 160px;height: 110px;}.list li:hover a{color: #FF6A00;}.list li:hover .item{display: block;}.item ul li .first-txt{display: block;color: #333;width: 100%;height: 20px;font-size: 12px;line-height: 20px;margin-top: -90px;padding-left: 35px;}.tv .item ul .first-txt{padding-left: 0px;}.item ul li .second-txt{display: block;width: 100%;font-size: 12px;height: 20px;line-height: 20px;color: #FF6A00;padding-left: 50px;}.item ul .line{display: inline-block;width: 1px;height: 100px;background-color: #e0e0e0;}.become-color a:hover{color: #FF6A00;}/* 右侧搜索区 */.search{width: 296px;height: 50px;position: absolute;right: 0;top: 25px; }/* 设置点击搜索框样式 */.search input{box-sizing: border-box;float: left;height: 50px;width: 244px;border: none;padding: 0 10px;font-size: 16px;border: 1px solid rgb(224, 224, 224);/* 去掉轮廓线 */outline: none;}.search button{float: left;height: 50px;width: 52px;padding: 0;border: none;background-color: white;color: #616161;font-size: 16px;border: 1px solid rgb(224, 224, 224);border-left: none;}/* 获取焦点 */.search input:focus{/* 边框颜色 */border: 1px solid #ff6700; }/* 分组选择器  兄弟元素*/.search input:focus + button{border: 1px solid #ff6700;border-left: none;}.search button:hover{background-color: #ff6700;border: none;} .search button:hover i{color: white;}</style>
</head>
<body><div class="all"><div class="product-bar"><div class="product-content"><div class="logo"><a href="#" ><img src="./img/milogo-mi2.png" alt="logo"></a></div><ul class="list"><li><a href="#">小米手机</a><div class="item"><ul><li><a href="#"><img src="./img/p11.png"><span class="first-txt">小米MIX FOLD</span><span class="second-txt">999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p12.png"><span class="first-txt">小米MIX FOLD</span><span class="second-txt">999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p13.png"><span class="first-txt">小米MIX FOLD</span><span class="second-txt">999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p14.png"><span class="first-txt">小米MIX FOLD</span><span class="second-txt">999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p15.png"><span class="first-txt">小米MIX FOLD</span><span class="second-txt">999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p16.png"><span class="first-txt">小米MIX FOLD</span><span class="second-txt">999元起</span></a></li></ul></div></li><li><a href="#">Redmi红米</a><div class="item"><ul><li><a href="#"><img src="./img/p21.png"><span class="first-txt">K40 游戏增强版</span><span class="second-txt">1999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p22.png"><span class="first-txt">K40 Pro 系列</span><span class="second-txt">2799元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p23.png"><span class="first-txt">Redmi K40</span><span class="second-txt">1999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p24.png"><span class="first-txt">Redmi Note 9 系列</span><span class="second-txt">999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p25.png"><span class="first-txt">Redmi K30S 至尊纪念版</span><span class="second-txt">2299元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p26.jpg"><span class="first-txt">Redmi K30 至尊纪念版</span><span class="second-txt">999元起</span></a></li></ul></div></li><li><a href="#">电视</a><div class="item"><ul><li><a href="#"><img src="./img/p31.png"><span class="first-txt">Redmi MAX 86” 超大屏电视</span><span class="second-txt">9999元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p32.png"><span class="first-txt">小米电视大师 82英寸至尊纪念版</span><span class="second-txt">49999元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p33.png"><span class="first-txt">小米电视大师 82英寸</span><span class="second-txt">11999元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p34.jpg"><span class="first-txt">小米透明电视</span><span class="second-txt">49999元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p35.png"><span class="first-txt">小米电视 大师 65英寸OLED</span><span class="second-txt">9999元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p36.jpg"><span class="first-txt">Redmi 智能电视 MAX 98''</span><span class="second-txt">19999元</span></a></li></ul></div></li><li><a href="#">笔记本</a><div class="item"><ul><li><a href="#"><img src="./img/p41.png"><span class="first-txt">小米笔记本Pro 14</span><span class="second-txt">5299元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p42.png"><span class="first-txt">小米笔记本Pro 15</span><span class="second-txt">6499元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p43.png"><span class="first-txt">RedmiBook Pro 14</span><span class="second-txt">4699元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p44.png"><span class="first-txt">RedmiBook Pro 15</span><span class="second-txt">4999元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p45.png"><span class="first-txt">Redmi G 游戏本</span><span class="second-txt"></span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p46.png"><span class="first-txt">RedmiBook 16</span><span class="second-txt">5499元</span></a></li></ul></div></li><li><a href="#">家电</a><div class="item"><ul><li><a href="#"><img src="./img/p51.jpg"><span class="first-txt">米家风冷对开门冰箱 483L</span><span class="second-txt">2499元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p52.png"><span class="first-txt">米家扫拖机器人1T</span><span class="second-txt">2299元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p53.png"><span class="first-txt">米家互联网洗烘一体机10kg</span><span class="second-txt">1999元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p54.png"><span class="first-txt">小米净水器S1 800G</span><span class="second-txt">2299元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p55.png"><span class="first-txt">小米净水器S1 800G</span><span class="second-txt">899元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p56.jpg"><span class="first-txt">米家两门冰箱 160L</span><span class="second-txt">899元</span></a></li></ul></div></li><li><a href="#">路由器</a><div class="item"><ul><li><a href="#"><img src="./img/p61.png"><span class="first-txt">小米路由器AX6000</span><span class="second-txt">599元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p62.png"><span class="first-txt">Redmi路由器 AX6</span><span class="second-txt">399元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p63.png"><span class="first-txt">小米路由器AX9000</span><span class="second-txt">999元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p64.png"><span class="first-txt">小米路由器 AX1800</span><span class="second-txt">399元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p65.png"><span class="first-txt">小米AIoT路由器AX3600</span><span class="second-txt">499元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p66.png"><span class="first-txt">小米AIoT路由器AX3600</span><span class="second-txt">169元</span></a></li></ul></div></li><li><a href="#">智能硬件</a><div class="item"><ul><li><a href="#"><img src="./img/p71.png"><span class="first-txt">小米全自动智能门锁</span><span class="second-txt">1699元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p72.png"><span class="first-txt">Redmi小爱触屏音箱Pro8</span><span class="second-txt">499元起</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p73.jpg"><span class="first-txt">小米小爱触屏音箱</span><span class="second-txt">219元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p74.png"><span class="first-txt">Redmi小爱音箱 Play</span><span class="second-txt">89元</span></a></li><li><span class="line"></span></li><li><a href="#"><img src="./img/p75.png"><span class="first-txt">查看全部</span><span class="second-txt">智能硬件</span></a></li></ul></div></li><li class="become-color"><a href="#">服务</a></li><li class="become-color"><a href="#">社区</a></li></ul><div class="search"><form action="#"><input type="search"><button><a href="#"><i class="fas fa-search"></i></a></button></form></div></div></div></div>
</div>
</body>
</html>

最终结果：

小结：
对于兄弟元素，要使用分组选择器。
搜索框默认有轮廓线，在设置边框时要去掉轮廓线。

仿写小米网站首页产品导航栏相关推荐

仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页中间部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
第一次仿写小米官方首页总结
自学前端有一个多月了,学完HTML+CSS基础部分也有一些时间了,于是就想着通过仿制网站来掌握和提高基础技能. 仿制页面是一种不错的学习方式,通过敲代码就能发现很多存在的问题,加以改进,并总结成自己的 ...
仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...
仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
演练网站的头部导航栏的制作 1014 HTML
演练网站的头部导航栏的制作 1014 HTML 视频演练菜单按钮的制作 HTML5 2216 - 西瓜视频 https://www.ixigua.com/6883480625635033613/ ...
HTML+CSS 仿写京东网站界面
在学习了HTML和CSS以后,用俩天的时间仿写京东网站的部分界面,基本将之前学习的内容都应用到了,收货颇多,也对网站的布局有了更深的认识. 总结整体的布局在开始写网站之前,要考虑整体的布局,事先将 ...
安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）
安卓项目实践--仿淘宝界面(一)--底部导航栏技术(Fragment实现) 1.实现效果展示 2.技术简述该导航栏主要使用Fragment技术实现,关于Fragment的介绍大家可以自行百度,导航栏 ...

仿写小米网站首页产品导航栏

仿写小米网站首页产品导航栏相关推荐

最新文章

热门文章

仿写小米网站首页 产品导航栏

仿写小米网站首页 产品导航栏相关推荐

最新文章

热门文章

仿写小米网站首页产品导航栏

仿写小米网站首页产品导航栏相关推荐