品优购首页快捷导航部分

制作favicon图标

seo优化

顶部布局.shortcut

search模块

hotword模块

shopcar模块

制作favicon图标

1 把品优购图标切成png图片

2 png图片转换为ico图标，比特虫：http://www.bitbug.net/

3 <link rel="shortcut icon" href="favicon.ico">

seo优化

title,description, keyword（meta name里面）

title:网站名-网站介绍（30字以内）

description: 我们是干啥的

首先创建common.css，里面保存页面共有的属性，包括版心w

css 复制代码

.w {
    width:1200px;
    margin: 0 auto;
}

顶部布局.shortcut

一个背景里嵌套版心大小，左边浮动，右边浮动

其中左边浮动包括一个ul两个li，右边通过13个li实现，其中选中偶数个li表示为竖线｜

左右浮动部分都要垂直居中,直接对父元素shortcut加上line-height

html 复制代码

<section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您!&nbsp;</li>
                    <li><a href="#">请登录</a>&nbsp;<a href="#" class="style_red">免费注册</a></li>
                </ul>
            </div>

            <div class="fr">
                <!-- 有的三个字有的四个字 -->

                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>

css 复制代码

.shortcut {
    height: 31px;
    line-height: 31px;
    /* font-size: 12px; */
    background-color: #f1f1f1;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

左边部分

品优购欢迎您!
请登录免费注册

这两个在li里都要浮动不然上下行，而且需要*里面去除自带的边距

css 复制代码

.shortcut ul li {
    float: left;
}

css 复制代码

.shortcut .fr ul li:nth-child(even)

/* li:nth-child中li和nth之间不能有空格 */
    {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

通过伪元素after实现框里面的下拉小箭头

css 复制代码

.arrow-icon::after {
    font-family: 'icomoon';
    content: '\ea43';
    margin-left: 6px;

}

注意：在css里引入直到block的部分，并且记得改五行关于front的目录，将front文件夹放入根目录里，\ea43记得加反斜杠转义符号

header布局：

html 复制代码

<header class="header w">
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
                <!-- 加了title鼠标放上面能显示信息 -->
            </h1>
        </div>
    </header>

logo里放h1标签

h1里放一个链接
链接里放文字,但是文字不要显示出来：

1 text-indent移盒子外面,然后overflow hidden里面也看不到了

css 复制代码

text-indent: -9999px;
overflow: hidden;

2 直接font-size:0

最后给链接加title属性

logo图片放在css的background url里面

search模块

首先是search整个模块，与父盒子header关系是子绝父相，调整top和left值到正确位置，然后在search整个模块里包含input:search和button两个模块，分别调整高和宽，里面的input设置padding

最重要的是input和button都是行内块，所以需要两者都浮动，不然button会掉下去。

html 复制代码

<div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
            <!-- 表单有默认灰色边框，搜索框的蓝色边框也不需要 -->
        </div>

在base.css里添加outline和border要求：

css 复制代码

button,
input {
    border: 0;
    /* 去除灰色边框
     */
    outline: none;
}

css 复制代码

.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid red;
}

.search input {
    float: left;
    width: 454px;
    height: 32px;
    padding-left: 10px;
}

.search button {
    float: left;
    width: 80px;
    height: 32px;
    background-color: red;
    font-size: 16px;
    color: #fff;
}

/* 因为input和button都属于行内块元素，中间有缝隙，加浮动解决 */

hotword模块

关键词就一堆下来后继续absolute，修改top和left的值，然后hotwords里的a设置个margin

css 复制代码

.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;

}

.hotwords a {
    margin: 0 10px;
}

html 复制代码

<div class="hotwords">

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

shopcar模块

同样创建一个absolute的模块，通过before添加购物车和after添加三角

css 复制代码

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    color: red;

}

.shopcar::after {
    content: '\e920';
    font-family: 'icomoon';
}

shopcar里的气泡8:

也是绝对定位，通过调整top为负数跑上面去，固定left的值防止购买东西太多

css 复制代码

.count {
    position: absolute;
    top: -5px;
    /* right: 20px;不要用right定位，万一个数特大 */
    left: 105px;
    height: 14px;
    line-height: 14px;
    /* 默认继承父亲的，8的line-height需要被覆盖，不然是35 */
    color: #fff;
    background-color: red;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 7px 7px 7px 0;

}