小米logo+中间导航条+右侧搜索框
海报左侧导航栏+右侧海报+圆点导航
<!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>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
<link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 引入公共样式表 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="./font_3373002_ourrffhs0zc/iconfont.css">
<!-- 引入当前页面样式表 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 创建一个头部的外部容器 -->
<div class="header-wrapper">
<div class="header w clearfix">
<!-- 创建一个logo -->
<h1 class="logo" title="小米">
<a class="mi" href="#"></a>
</h1>
<!-- 创建一个中间导航条的容器 -->
<div class="nav-wrapper">
<!-- 创建导航条 -->
<ul class="nav clearfix">
<li class="all-goods-wrapper">
<a class="all-goods" href="#">全部商品分类</a>
<!-- 创建一个左侧导航菜单 -->
<ul class="left-meau">
<li>
<a href="#">
手机
<span>></span>
</a>
</li>
<li>
<a href="#">电视<span>></span>
</a>
</li>
<li>
<a href="#">笔记本 平板<span>></span>
</a>
</li>
<li>
<a href="#">家电<span>></span>
</a>
</li>
<li>
<a href="#">出行 穿戴<span>></span>
</a>
</li>
<li>
<a href="#">智能 路由器<span>></span>
</a>
</li>
<li>
<a href="#">电源 配件<span>></span>
</a>
</li>
<li>
<a href="#">健康 儿童<span>></span>
</a>
</li>
<li>
<a href="#">耳机 音箱<span>></span>
</a>
</li>
<li>
<a href="#">生活 箱包<span>></span>
</a>
</li>
</ul>
</li>
<li class="show-goods"><a href="#">Xiaomi手机</a></li>
<li class="show-goods"><a href="#">Redmi 红米</a></li>
<li class="show-goods"><a href="#">电视</a></li>
<li class="show-goods"><a href="#">笔记本</a></li>
<li class="show-goods"><a href="#">平板</a></li>
<li class="show-goods"><a href="#">家电</a></li>
<li class="show-goods"><a href="#">路由器</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<!-- 创建搜索框的容器 -->
<div class="search-wrapper">
<form class="search" action="#">
<input class="search-inp" type="text">
<button class="search-btn">
<i class="iconfont"></i>
</button>
</form>
</div>
</div>
</div>
</body>
</head>样式：
.header-wrapper{
position: relative;
}
/* 设置中间的header */
.header{
height: 100px;
}
/* 设置logo的h1样式 */
.header .logo{
float: left;
margin-top: 22px;
width: 55px;
height: 55px;
position: relative;
overflow: hidden;
}
/* 统一设置logo的超链接 */
.header .logo a{
position: absolute;
width: 55px;
height: 55px;
left: 0;
background: url(../img/logo-mi.png) no-repeat center;
background-size: cover;
/* image-rendering: -webkit-optimize-contrast; */
}
/* 设置中间的导航条 */
.header .nav-wrapper{
float: left;
margin-left: 7px;
}
/* 设置导航条 */
.header .nav{
/* width: 792px; */
height: 100px;
line-height: 100px;
padding-left: 58px;
}
/* 设置导航条中的li */
.nav > li{
float: left;
}
/* 左侧导航条定位 */
.all-goods-wrapper{
position: relative;
}
/* 设置左侧导航条的样式 */
.left-meau{
width: 234px;
height: 420px;
padding: 20px 0;
background-color: rgba(0, 0, 0, .6);
position: absolute;
z-index: 999;
left: -120px;
line-height: 1;
}
/* 左侧导航条字体样式 */
ul.left-meau li a{
display: block;
height: 42px;
line-height: 42px;
color: white;
margin-right: 0;
padding: 0 30px;
font-size: 14px;
}
/* 左侧导航条移入样式 */
ul.left-meau li a:hover{
color: white;
background-color: #FF6700;
}
/* 左侧导航条箭头 */
.left-meau a span{
float: right;
line-height: 42px;
}
/* 导航条字体样式 */
.nav-wrapper li a{
display: block;
font-size: 16px;
margin-right: 20px;
}
.nav-wrapper li a:hover{
color: #FF6700;
}
/* 隐藏全部商品 */
.all-goods{
visibility: hidden;
}
/* 设置搜索框的容器 */
.search-wrapper{
width: 296px;
height: 50px;
float: right;
margin-top: 25px;
}
/* 设置左侧搜索框 */
.search-wrapper .search-inp{
box-sizing: border-box;
width: 244px;
border: none;
float: left;
height: 50px;
padding: 0 10px;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
outline: none;
}
/* 设置input获取焦点后的样式 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus + button{
border-color: #FF6700;
}
/* 设置右侧搜索框 */
.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;
}
/* 设置banner */
.banner{
height: 460px;
/* border: 1px solid red; */
image-rendering: -webkit-optimize-contrast;
overflow: hidden;
position: relative;
}
.banner img{
width: 100%;
position: absolute;
vertical-align: top;
}
/* 设置banner圆点导航 */
.pointer{
position: absolute;
bottom: 22px;
right: 35px;
}
.pointer a{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .4);
box-sizing: border-box;
background-color: rgba(0, 0, 0, .4);
margin: 0 4px;
}
.pointer a:hover,
.pointer .active{
border-color: rgba(0, 0, 0, .4);
background-color: rgba(255, 255, 255, .4);
}素材：
?效果图：
