导航条已经完成，接下来做导航条下边的那一块
<body>
............【二里的body内容】
创建一个头部的外部容器
<div class=“header-wrapper”>
<div class=“header w clearfix”>
创建一个logo
<h1 class=“logo” title=“小米”>
<a class=“home” href=“/”></a>
<a class=“mi” href=“/”> </a>
</h1>
</div>
</div>
</body>
在.shop-cart i{
margin-right:2px;
}
.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中的文字
text-indent:-9999px;
}
统一设置logo超链接
. header . logo a{
display-block;cc
width: 55px;
height:55px;
left: 0;
background-color:red;
background-image: url（./图片logo的链接）
【提前将图片保存在我们的项目中】
background-position: center
transition: left 0.3s;
}
设置home图片
. header . logo .home{
background-image: url（./图片logo的接）
left:-55px;
}
设置鼠标移入以后两个图标的位置
. header .logo: hover .mi{
left:55px;
}
. header .logo: hover .home{
left:0;
}
设置中间的导航条
. header .nav-wrapper{
flaot:left;
margin-left:7px;
}
设置导航条
. header .nav{
height:100px;
line-height:100px;
padding-left:58px;
}
设置导航条中的li
. nav ＞ li{
float:left;
}
.all-goods-wrapper{
position:relative;
}
设置左侧导航条的样式
.left-menu{
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-menu li a{
display:block;
height:42px;
line-height:42px;
color:white;
margin-right:0;
padding:0 30px;
font-size:14px;
}
ul .left-menu li a:hover{
color:white;
background-color:#FF6700;
.left-menu a i{
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;
}
.nav . goods-info{
height:0;
background-color:#fff;
position: absolute;
top:100px;
left:0;
transition: height 0.3s;
z-index:9999;
}
.nav .show-goods:hover~.goods-info.goods-info:hover{
height:228px;
boder-top:1px solid rgb（224, 224, 224）;
box-shadow: 0 5px 3px rgba（0, 0, 0,.2）;
}
设置搜索框的容器
.search-wrapper{
width:296px;
height:50px;
float:right;
margin-top:25px;
}
.search-wrapper , search-inp{
box-sazing: border-box;
width:244px;
border:none;
float:left;
padding:0 10px;
height:50px;
font-size:16px;
border:1px solid rgb（224, 224, 224）;
outline:none
}
设置input获取焦点后的样式
.search-wrapper , search-inp:focus,
.search-wrapper , search-inp:focus + button{
background-color:#FF6700;
}
.search-wrapper , search-btn{
float:left;
height:t0px;
width:52px;
padding:o;
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
.bander{
position:relative;
height:460px;
}
.banner .img-list li{
position: absolute;
}
.banner img{
width:100%;
vertical-align:top;
}
设置五个导航点
.pointer{
position: absolute;
bottom: 22px;
right: 35px;
}
.pointer a{
float:left;
width:6px;
height:6px;
border: 2px rgba(255,255,255, .4) solid
border-radius:50%;
background-color: rgba（0,0,0,.4);
margin-left:6px;
}
.pointer a:hover,
.pointer a.active{
border-color: 2px rgba（0,0,0,.4);
background-color: rgba(255,255,255, .4);
设置两个箭头
.prev-next a{
width:41px;
height:69px;
background-image: url（背景路径）
position: absolute;
top:0;
bottom:0;
margin:auto 0;
}
.prev-next .prev{
left:234px;
background-position: -84px 0;
}
.prev-next .prev:hover{
background-position:0 0;
}
.prve-next .next{
right:0;
background-position: -125px 0;
}
.prve-next .next:hover{
background-position:-42px 0;
}
设置回到顶部的元素
.to-top{
width:26px;
height:206px;
background-color: orange;
开启固定定位
position:fixed;
bottom:60px;
right:50%;（将right值设置为视口宽度的50%）
margin-right:-639px;
设置下部广告区域
.ad{
height:170px;
margin-top:14px;
}
.ad .shortcut,
.ad .imgs
.ad li{
float:left;
}
设置左侧快捷方式
.ad .shortcut{
width:228px;
height:168px;
background-color:#5f5750;
margin-right:14px;
padding-top:2px;
padding-left:6px;
}
.ad .shortcut li{
position:relative;
}
.ad .shortcut li::before{
content:' ';
position:absolute;
width:64px;
height:1px;
background-color:#665e57;
left:0;
right:0;
top:0;
margin:0 auto
}
设置左边框
.ad .shortcut li::after{
content:' ';
position:absolute;
height:70px;
width:1px;
background-color:#665e57;
top:0;
bottom:0;
margin:auto 0;
left: 0;
设置快捷方式中的超链接
.ad .shortcut a{
display:block;
color:#cfccca;
height:84px;
width:76px;
font-size:12px;
overflow:hidden;
}
.ad .shortcut a:hover{
color:#fff;
}
设置图标字体
.ad .shortcut i{
display:block;
margin-top:20px;
margin-bottom:6px;
font-size:20px;
}
设置左侧图片
.ad .imgs li{
width:316px;
margin-right:15px;
}
.ad .imgs li:last-child{
margin:0;
}
.ad .imgs img{
width:100%;
vertical-align:top;
}
布局的等式
left＋margin-left＋width＋margin-right＋right＝包含块的宽度（视口的宽度）
auto＋0＋26＋0＋60＝视口宽度
auto＋0＋26＋0＋50%＝视口宽度
扫一扫
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
