品优购首页快捷导航部分

                 目录

制作favicon图标

seo优化

 顶部布局.shortcut

search模块

hotword模块

shopcar模块

---

制作favicon图标

1 把品优购图标切成png图片
2 png图片转换为ico图标，比特虫：http://www.bitbug.net/
3

seo优化

title,description, keyword（meta name里面）
title:网站名-网站介绍（30字以内）
description: 我们是干啥的

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

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

 顶部布局.shortcut

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

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

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

        

            

                

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

            

                

                

                    
我的订单
                    

                    
我的品优购
                    

                    
品优购会员
                    

                    
企业采购
                    

                    
关注品优购
                    

                    
客户服务
                    

                    
网站导航
                
            
        
    

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

.fl {
    float: left;
}

.fr {
    float: right;
}

左边部分

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

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

.shortcut ul li {
    float: left;
}

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

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

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

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

}

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

header布局：

        

            

                品优购商城
                
            
        
    

logo里放h1标签
h1里放一个链接
链接里放文字,但是文字不要显示出来：
1 text-indent移盒子外面,然后overflow hidden里面也看不到了

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会掉下去。

            
            搜索
            
        

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

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

.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

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

}

.hotwords a {
    margin: 0 10px;
}

            优惠购首发
            亿元优惠
            9.9元团购
            美满99减30
            办公用品
            电脑
            通信
        

shopcar模块

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

.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的值防止购买东西太多

.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;

}