仿京东静态网站制作之网站头部

一、logo区

主要知识点：LOGO SEO优化

HTML结构

  <div class="logo">
         <h1>
           <a href="index.html" title="品优购">品优购商城</a>
         </h1>
   </div>

结构解释：

1.给logo盒子嵌套h1标签是为了提权，对搜索引擎更友好

2.a链接的作用是方便用户在网页的任何一个地方都能返回首页

3.title提示文字和a链接的文字都是为了对搜索引擎更友好

CSS代码

.header .logo {
    position: absolute;
    top: 27px;
    left: 2px;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png);
}

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    font-size: 0;
}

二、search搜索区

主要知识点：定位

HTML结构

        <div class="search">
            <form action="">
                <input type="search" value="语言开发">
                <div><a href="#">搜索</a></div>
            </form>
        </div>

CSS代码

.header .search {
    position: absolute;
    top: 27px;
    left: 347px;
    line-height: 35px;
}

.header input {
    float: left;
    width: 458px;
    height: 35px;
    border: 2px solid #b1191a;
    color: #666666;
    font-size: 14px;
}

.header .search div {
    float: left;
    height: 35px;
    width: 80px;
    background-color: #b1191a;
    text-align: center;
}

.header .search div a {
    color: #f1f1f1;
    font-size: 16px;
}

没有使用bottom导致CSS有点儿复杂了

三、hotwords热词区

主要知识点：定位

HTML结构

        <div class="hotwords">
            <li><a href="#" class="red">优惠购首发</a></li>
            <li><a href="#">亿元优惠</a></li>
            <li><a href="#">9.9元团购</a></li>
            <li><a href="#">每满99减30</a></li>
            <li><a href="#">办公用品</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">通信</a></li>
        </div>

CSS代码

.header .hotwords {
    position: absolute;
    bottom: 20px;
    left: 347px;
    width: 527px;
}

.hotwords li {
    float: left;
    padding-left: 20px;
    font-size: 12px;
    color: #666666;
}

四、shopcar购物车区

主要知识点：伪元素选择器& 定位&圆角边框

HTML结构

        <div class="shopcar"><a href="#">我的购物车</a></div>
        <div class="count">8</div>

CSS代码

.shopcar {
    position: absolute;
    top: 27px;
    right: 17px;
    height: 35px;
    width: 140px;
    background-color: #f7f7f7;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
}

.shopcar::before {
    content: '\e93a';
    color: #c81623;
    padding-right: 10px;
    font-family: 'icomoon';
    font-size: 20px;
}

.shopcar::after {
    content: '\e903';
    padding-left: 4px;
    font-family: 'icomoon';
}

.count {
    position: absolute;
    top: 20px;
    left: 1155px;
    height: 14px;
    background-color: #c81623;
    border-radius: 7px 7px 7px 0;
    font-size: 14px;
    color: #fff;
    padding: 0 5px;
    line-height: 14px;
}

最终效果