对于这一部分大致分为三个区域:左侧的logo区域、导航区域、右侧的搜索区域
左侧的 logo 区域就是两张图片
左侧的导航区域主要用ul li实现,这里需要注意的是第一个li里放的是一张动图
右侧的搜索区域就是一个input标签以及button按钮,还有就是模拟当鼠标点击到搜索框后会弹出一个搜索历史
其基本机构如下:
<!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>Document</title>
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="white-nav">
<div class="wrap">
<!-- 左侧logo区域 -->
<div class="logo">
<img class="mi-home" src="images/mi-home.png" alt="">
<img class="mi-logo" src="images/mi-logo.png" alt="">
</div>
<!-- 左侧导航区域 -->
<div class="nav-bar">
<ul>
<li>
<a href="">
<img src="images/f58837161090e2e04bf687088b2ffe77.gif" alt="">
</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>
<!-- 右侧搜索区域 -->
<div class="search">
<input type="text" placeholder="元宇宙">
<button class="iconfont"></button>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.wrap {
width: 1226px;
margin: 0 auto;
text-align: center;
}
接下来就是去设置相应的样式
.white-nav {
width: 100%;
height: 100px;
background: #fff;
position: relative;
}
logo区域:
当鼠标移动到logo上时默认的 mi logo就会被向右给寄过去,然后最开始隐藏的那个 logo 此时显示从左侧向右出现
/* logo区域 */
.logo {
width: 55px;
height: 55px;
background: #ff6700;
float: left;
margin-top: 22.5px;
/* 这里默认有两张图片,当鼠标移动到logo区域时
实现图标的滑动切换,但是默认情况下只显示一张
隐藏这里利用overflow:hidden;进行隐藏 */
overflow: hidden;
/* logo区域的图片相对于logo定位 */
position: relative;
}
.logo>img {
width: 100%;
height: 100%;
/* 通过绝对定位来调整图片的位置 */
position: absolute;
top: 0;
transition: all .2s;
}
.mi-home {
left: -55px;
}
.mi-logo {
left: 0;
}
.logo:hover>.mi-home {
left: 0;
}
.logo:hover>.mi-logo {
left: 55px;
}
接下来实现左侧的导航样式:
左侧导航整体向左浮动
右侧搜索区域整体向右浮动
左侧导航整体浮动后,其里面的li也应该向左浮动,这样才会在一行内显示
当鼠标移动到左侧导航的li标签上时字体颜色会变
/* 导航样式 */
.nav-bar {
width: 875px;
height: 100px;
line-height: 100px;
float: left;
}
.nav-bar li {
float: left;
}
.nav-bar>ul>li>a {
color: #333;
padding: 0px 10px;
}
.nav-bar>ul>li>a:hover {
color: #ff6700;
}
.nav-bar>ul>li:first-child img {
margin-top: 22.5px;
}
右侧搜索区域:
对于这一部分的话主要就是样式的设置,需要注意的是可能会出现搜索框和按钮对不齐的情况:
解决的方法就是在 input 搜索框样式里加上:vertical-align: top; 即可解决
/* 搜索区域 */
.search {
float: right;
width: 296px;
height: 100px;
line-height: 100px;
}
.search input {
width: 244px;
height: 50px;
border: 1px solid #e0e0e0;
margin-top: 25px;
/* 去除选中的边框 */
outline: none;
padding: 0 10px;
/* 由于设置了内边距,那么原先的宽高就会被撑大
为了防止这种情况,需要将其设置为怪异盒模型 */
box-sizing: border-box;
border-right: 0;
/* 解决搜索框和button对不齐的问题 */
vertical-align: top;
}
.search button {
width: 52px;
height: 50px;
line-height: 50px;
background-color: #fff;
border: 1px solid #e0e0e0;
float: right;
margin-top: 25px;
}
.search button:hover {
background-color: #ff6700;
color: #fff;
}
下拉菜单区域:
对于这一部分其实就是直接在左侧导航部分的li下面直接加上二级下来菜单的相应内容,然后利用定位来实现
二级下拉菜单li里面主要就顶部的图片、底部的手机名称以及手机价格
这里需要注意的是二级下拉菜单的定位(nav-bar-list)是相对于最层的父级(nav-bar)来进行决定定位的,这样才是100%全屏撑开,否则就不是
默认二级下来菜单是不显示的,只有当我们鼠标滑动到li标签上时,才会显示对应的二级下拉菜单
对于右侧的竖线的实现其实就是给包含手机图片的容器设置它的右边框即可,需要注意的是最后一个的右边框没有
<li>
<a href="#">小米手机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone1.jpg" alt="">
</div>
<p class="name1">小米10</p>
<p class="price1">3999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone2.jpg" alt="">
</div>
<p class="name1">小米Note9</p>
<p class="price1">2999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone3.jpg" alt="">
</div>
<p class="name1">小米R</p>
<p class="price1">4299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone4.jpg" alt="">
</div>
<p class="name1">小米10至尊纪念版</p>
<p class="price1">5299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
/* 二级菜单区域 */
.nav-bar-list {
width: 100%;
height: 229px;
background-color: #fff;
border-top: 1px solid #eee;
box-shadow: 0 3px 4px rgba(0,0,0,.1);
/* 相对于最外层的父元素也就是 nav-bar
来定位,这样才能 100% 全屏撑开 */
position: absolute;
left: 0;
top: 100px;
display: none;
}
/* 当鼠标滑动到li标签上时,显示对应的二级下拉菜单 */
.nav-bar li:hover .nav-bar-list {
display: block ;
}
.nav-bar-list .img-box {
width: 100%;
height: 110px;
margin-top: 35px;
/* 实现每个商品右侧的分割线 */
border-right: 1px solid #eee;
/* 变为怪异盒模型 */
box-sizing: border-box;
margin-bottom: 16px;
}
.img-box img {
transition: all .3s;
}
.img-box img:hover {
transform: translateY(-5px) scale(1.1);
}
.nav-bar-list li:last-child .img-box{
border-right: 0;
}
.nav-bar-list p {
font-size: 12px;
line-height: 20px;
}
.nav-bar-list .name1 {
color: #333;
}
.nav-bar-list .price1 {
color: #ff6700;
}
源码:
<!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>Document</title>
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="white-nav">
<div class="wrap">
<!-- 左侧logo区域 -->
<div class="logo">
<img class="mi-home" src="images/mi-home.png" alt="">
<img class="mi-logo" src="images/mi-logo.png" alt="">
</div>
<!-- 左侧导航区域 -->
<div class="nav-bar">
<ul>
<li>
<a href="">
<img src="images/f58837161090e2e04bf687088b2ffe77.gif" alt="">
</a>
</li>
<li>
<a href="#">小米手机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone1.jpg" alt="">
</div>
<p class="name1">小米10</p>
<p class="price1">3999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone2.jpg" alt="">
</div>
<p class="name1">小米Note9</p>
<p class="price1">2999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone3.jpg" alt="">
</div>
<p class="name1">小米R</p>
<p class="price1">4299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone4.jpg" alt="">
</div>
<p class="name1">小米10至尊纪念版</p>
<p class="price1">5299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Redmi 红米</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/h-phone1.jpg" alt="">
</div>
<p class="name1">K40Pro</p>
<p class="price1">5299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone1.jpg" alt="">
</div>
<p class="name1">小米10</p>
<p class="price1">3999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone2.jpg" alt="">
</div>
<p class="name1">小米Note9</p>
<p class="price1">2999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone3.jpg" alt="">
</div>
<p class="name1">小米R</p>
<p class="price1">4299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone4.jpg" alt="">
</div>
<p class="name1">小米10至尊纪念版</p>
<p class="price1">5299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/phone3.jpg" alt="">
</div>
<p class="name1">小米R</p>
<p class="price1">4299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">笔记本</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/notebook1.jpg" alt="">
</div>
<p class="name1">RedmiBook Pro 14</p>
<p class="price1">4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/notebook2.jpg" alt="">
</div>
<p class="name1">RedmiBook Pro 14</p>
<p class="price1">4999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/notebook3.jpg" alt="">
</div>
<p class="name1">Redmi G 游戏本</p>
<p class="price1">5299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/notebook4.jpg" alt="">
</div>
<p class="name1">RedmiBook 16</p>
<p class="price1">4699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/notebook5.jpg" alt="">
</div>
<p class="name1">RedmiBook Air 13</p>
<p class="price1">4499元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/notebook6.jpg" alt="">
</div>
<p class="name1">曲面显示器 34英寸</p>
<p class="price1">2399元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">家电</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/jiadian1.jpg" alt="">
</div>
<p class="name1">米家风冷对开门冰箱 483L</p>
<p class="price1">2399元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/jiadian2.jpg" alt="">
</div>
<p class="name1">米家扫拖机器人1T</p>
<p class="price1">1999元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/jiadian3.jpg" alt="">
</div>
<p class="name1">米家互联网洗烘一体机</p>
<p class="price1">1899元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/jiadian4.jpg" alt="">
</div>
<p class="name1">小米净水器S1 800G</p>
<p class="price1">2798元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/jiadian5.jpg" alt="">
</div>
<p class="name1">米家空气净化器3 高效除菌</p>
<p class="price1">899元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/jiadian6.jpg" alt="">
</div>
<p class="name1">米家两门冰箱 160L</p>
<p class="price1">949元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">路由器</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/luyouqi1.jpg" alt="">
</div>
<p class="name1">小米路由器AX6000</p>
<p class="price1">599元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/luyouqi2.jpg" alt="">
</div>
<p class="name1">Redmi路由器 AX6</p>
<p class="price1">349元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/luyouqi3.jpg" alt="">
</div>
<p class="name1">Redmi路由器 AX5</p>
<p class="price1">249元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/luyouqi4.jpg" alt="">
</div>
<p class="name1">小米路由器 AX1800</p>
<p class="price1">329元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/luyouqi5.jpg" alt="">
</div>
<p class="name1">小米AIoT路由器 AX3600</p>
<p class="price1">499元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/luyouqi6.jpg" alt="">
</div>
<p class="name1">Redmi路由器AC2100</p>
<p class="price1">159元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">智能硬件</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/znyj1.jpg" alt="">
</div>
<p class="name1">小米全自动智能门锁</p>
<p class="price1">1699元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/znyj2.jpg" alt="">
</div>
<p class="name1">Redmi小爱触屏音箱Pro 8</p>
<p class="price1">499元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/znyj3.jpg" alt="">
</div>
<p class="name1">小爱触屏音箱</p>
<p class="price1">199元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/znyj4.jpg" alt="">
</div>
<p class="name1">Redmi小爱音箱 Play</p>
<p class="price1">89元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img width="160" height="110px" src="images/znyj5.jpg" alt="">
</div>
<p class="name1">查看全部</p>
<p class="price1">智能硬件</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">服务</a>
</li>
<li>
<a href="#">社区</a>
</li>
</ul>
</div>
<!-- 右侧搜索区域 -->
<div class="search">
<input type="text" placeholder="元宇宙">
<button class="iconfont"></button>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.wrap {
width: 1226px;
margin: 0 auto;
text-align: center;
}
.white-nav {
width: 100%;
height: 100px;
background: #fff;
position: relative;
}
/* logo区域 */
.logo {
width: 55px;
height: 55px;
background: #ff6700;
float: left;
margin-top: 22.5px;
/* 这里默认有两张图片,当鼠标移动到logo区域时
实现图标的滑动切换,但是默认情况下只显示一张
隐藏这里利用overflow:hidden;进行隐藏 */
overflow: hidden;
/* logo区域的图片相对于logo定位 */
position: relative;
}
.logo>img {
width: 100%;
height: 100%;
/* 通过绝对定位来调整图片的位置 */
position: absolute;
top: 0;
transition: all .2s;
}
.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;
}
.nav-bar li {
float: left;
}
.nav-bar>ul>li>a {
color: #333;
padding: 0px 10px;
}
.nav-bar>ul>li>a:hover {
color: #ff6700;
}
.nav-bar>ul>li:first-child img {
margin-top: 22.5px;
}
/* 二级菜单区域 */
.nav-bar-list {
width: 100%;
height: 229px;
background-color: #fff;
border-top: 1px solid #eee;
box-shadow: 0 3px 4px rgba(0,0,0,.1);
/* 相对于最外层的父元素也就是 nav-bar
来定位,这样才能 100% 全屏撑开 */
position: absolute;
left: 0;
top: 100px;
display: none;
}
/* 当鼠标滑动到li标签上时,显示对应的二级下拉菜单 */
.nav-bar li:hover .nav-bar-list {
display: block ;
}
.nav-bar-list .img-box {
width: 100%;
height: 110px;
margin-top: 35px;
/* 实现每个商品右侧的分割线 */
border-right: 1px solid #eee;
/* 变为怪异盒模型 */
box-sizing: border-box;
margin-bottom: 16px;
}
.img-box img {
transition: all .3s;
}
.img-box img:hover {
transform: translateY(-5px) scale(1.1);
}
.nav-bar-list li:last-child .img-box{
border-right: 0;
}
.nav-bar-list p {
font-size: 12px;
line-height: 20px;
}
.nav-bar-list .name1 {
color: #333;
}
.nav-bar-list .price1 {
color: #ff6700;
}
/* 搜索区域 */
.search {
float: right;
width: 296px;
height: 100px;
line-height: 100px;
}
.search input {
width: 244px;
height: 50px;
border: 1px solid #e0e0e0;
margin-top: 25px;
/* 去除选中的边框 */
outline: none;
padding: 0 10px;
/* 由于设置了内边距,那么原先的宽高就会被撑大
为了防止这种情况,需要将其设置为怪异盒模型 */
box-sizing: border-box;
border-right: 0;
/* 解决搜索框和button对不齐的问题 */
vertical-align: top;
}
.search button {
width: 52px;
height: 50px;
line-height: 50px;
background-color: #fff;
border: 1px solid #e0e0e0;
float: right;
margin-top: 25px;
}
.search button:hover {
background-color: #ff6700;
color: #fff;
}