1. 头部header
1.1 logo图片定位
- css代码写在common.css里面
- 调用了.w类:版心
.w {
width : 1200px;
margin: 0 auto;
}
.header {
position: relative;
height: 90px;
background-color: #c81623;
}
.header h1 {
position: absolute;
top: 10px;
left: 0;
width: 250px;
height: 70px;
background-color: aqua;
}
.header h1 a {
display: block;
width: 250px;
height: 70px;
background: url(../images/logo.jpg) no-repeat;
background-size: 250px 70px;
font-size: 0;
}
<header class="header w">
<h1>
<a href="#" title="昕之优选官网">昕之优选购物网站</a>
</h1>
</header>
- 给a标签一个title,鼠标经过图片时有文字提示
- 最后要把给的背景颜色都删除
1.2 search搜索框
<!-- 搜索框 -->
<div class="search">
<input type="search" name="" id="" placeholder="请输入" />
<button>搜索</button>
</div>
.search {
position: absolute;
top: 16px;
left: 400px;
width: 490px;
height: 36px;
border: 2px solid #ed3947;
border-radius: 5px;
}
.search input {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 32px;
padding-left: 12px;
}
.search button {
position: absolute;
top: 0;
right: 0;
width: 90px;
height: 34px;
background-color: #ed3947;
font-size: 16px;
color: #fff;
}
1.3 热搜词
- 热搜词的宽和高与搜索框一样,定位时,top值大一点
.hotwords {
position: absolute;
top: 57px;
left: 400px;
width: 490px;
height: 36px;
}
.hotwords a {
margin: 0 10px;
}
<!-- 热搜词 -->
<div class="hotwords">
<a href="" class="style_red">海外直购</a>
<a href="">优选自有品牌</a>
<a href="">品质奶粉</a>
<a href="">人气面膜</a>
<a href="">华为手机</a>
<a href="">电器专卖</a>
</div>
1.3 购物车
<!-- 购物车 -->
<div class="shopcart">
我的购物车
</div>
.shopcart {
position: absolute;
top: 16px;
right: 74px;
width: 144px;
height: 36px;
line-height: 34px;
text-align: center;
font-size: 15px;
color: #000;
border: 2px solid #ed3947;
border-radius: 5px;
background-color: #f1f1f1;
}
.shopcart::before {
content: '';
font-family: 'icomoon';
}
.shopcart::after {
content: '';
font-family: 'icomoon';
}
1.4 提示信息
- position:absolute;定位top为负值
- border-radio:左上 右上 右下 左下;圆角边框,左下为0
- padding:上下 左右;内边距上下为0左右有距离
更多推荐
购物网站制作——头部header(index.html)
发布评论