《2018年11月15日》【连续408天】
标题:header里的搜索,购物车部分完成;
内容:
<!-- 搜索部分 -->
<div class="search">
<input type="text">
<button>
<i></i>
</button>
<em></em>
</div>
<!-- 热词部分 -->
<div class="hotwords">
<a href="#" class="style-red">学生专享</a>
<a href="#">300减160</a>
<a href="#">300减160</a>
<a href="#">300减160</a>
<a href="#">300减160</a>
<a href="#">300减160</a>
<a href="#">300减160</a>
<a href="#">300减160</a>
<a href="#">300减160</a>
</div>
<!-- 购物车部分 -->
<div class="shopCar">
<i></i>
<a href="#">我的购物车</a>
<s>0</s>
</div>
<!-- 电脑 -->
<div class="computer">
<a href="#">
<img src="images/computer.jpg" height="40" width="190" alt="">
</a>
</div>
/*搜索部分*/
.search {
position: absolute;
width: 550px;
height: 35px;
top: 25px;
left: 320px;
}
.search input {
width: 493px;
height: 33px;
border: 1px solid #F10215;
padding-left: 5px;
outline: none; /*取消蓝色边框*/
color: #989898;
float: left;
}
.search button {
width: 50px;
height: 35px;
background-color: #F10215;
float: left;
cursor: pointer;
outline: none;
}
.search i {
font-family: "icomoon";
color: #fff;
font-style: normal;
font-size: 12px;
}
.search em {
position: absolute;
top: 9px;
right: 65px;
width: 19px;
height: 15px;
cursor: pointer;
background: url(../images/sprite-search.png) no-repeat;
}
.search em:hover {
background-position: -30px 0;
}
/*热词部分*/
.hotwords {
position: absolute;
top: 70px;
left: 320px;
}
.hotwords a{
color: #9E9B99;
font-size: 12px;
}
.hotwords a:hover {
color: #F10215;
}
/*购物车*/
.shopCar {
width: 188px;
height: 33px;
border: 1px solid #ccc;
position: absolute;
top: 25px;
right: 100px;
text-align: center;
line-height: 33px;
}
.shopCar a {
font-size: 14px;
color: #F10215;
}
.shopCar i {
font-family: "icomoon";
color: #F10215;
font-style: normal;
}
.shopCar s {
position: absolute;
top: 5px;
left: 142px;
text-decoration: none;
background-color: #f10215;
height: 13px;
line-height: 13px;
font-size: 12px;
padding: 0 3px;
border-radius: 7px;
color: #fff;
}
/*电脑*/
.computer {
position: absolute;
right: 0;
bottom: 10px;
}
input, button {
padding: 0;
}
a {
text-decoration: none;
}