购物网站制作——头部header（index.html)

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左右有距离