小兔鲜儿案例

一、注意点

1、Header 部分开发：logo搜索引擎优化做法

h1里面放a,a里面输入网站名，图标用背景导入，字体为0不显示。

 <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
    </div>

.header .logo{
    float: left;
    width: 209px;
    height: 70px;
    /* background-color: green; */
    margin-right: 40px;
}

/* logo搜索引擎优化做法 */
.logo h1{
    width: 209px;
    height: 70px;
}
.logo h1 a{
    display:block;
    /* 如果是转成行内块，需要vertical-align居中 */
    width: 209px;
    height: 70px;
    background-image: url(../images/logo.png);
    background-size: contain;
    /* 目的：h1里面的字看不见 */
    font-size: 0;
}

2、居中

如果居中不了，用vertical-align和line-height都试过了，还不行，只能定位，定位后不占位置的影响，可以考虑利用margin移动。

3、底部的导航不需要ul>li>a

底部的导航不需要优化，不需要ul>li>a, 直接打出来就行

 <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a> 
</p>

4、伪元素+nth:

li:nth-child(2):before{
}

5、如果有因为不方便设置高度带来的浮动的影响，需要调用clearfix清除

6、发现以下情况：

（绿色的本来应该是一块的，但是现在分成两段）遇到这种情况，就从上面的和他对齐的地方找原因，极有可能是他们影响的，这里看到品质靠谱，

去浏览器检查发现标题一块高118，但是只设置了height为114，是h2撑开了行高，需要设置回去