顶部导航
基础结构
需要达到的效果
css样式参考代码
注释:网页结构部分默认样式自行清楚
.warpper {
margin: 0 auto;
width: 1240px;
}
.logo {
width: 207px;
height: 70px;
}
.logo h1 {
width: 100%;
height: 100%;
}
.logo a {
display: block;
width: 207px;
height: 70px;
background: url(../images/logo.png) no-repeat 0 0/100%;
font-size: 0;
}
.nav {
margin-left: 40px;
}
.nav li {
float: left;
margin-right: 48px;
height: 70px;
line-height: 70px;
font-size: 16px;
}
.nav li a:hover {
color: #27ba9b;
padding-bottom: 8px;
border-bottom: 1px solid #27ba9b;
}
.search {
position: relative;
width: 172px;
height: 30px;
margin-top: 23px;
margin-left: 34px;
}
.search input {
width: 172px;
height: 30px;
padding-left: 31px;
border-bottom: 2px solid #e7e7e7;
}
.search input::placeholder {
color: #ccc;
}
.search::before {
position: absolute;
content: '';
left: 2px;
top: 6px;
width: 18px;
height: 18px;
background: url(../images/sprites.png) -80px -70px;
}
.cart {
position: relative;
margin-top: 23px;
margin-left: 15px;
width: 23px;
height: 23px;
background: url(../images/sprites.png) -120px -70px;
}
.cart span {
position: absolute;
top: -5px;
right: -10px;
width: 20px;
height: 15px;
line-height: 15px;
border-radius: 7px;
text-align: center;
color: white;
font-size: 13px;
background-color: #e26237;
}
