有路网页面拆解--顶部

先上效果

image.png

1HTML骨架

顶部信息：
1.欢迎图标
2.欢迎标语
3.服务链接列表

    

        

            
            您好，欢迎光临有路网！
        
        

            

                请登陆  免费注册
            

            

                

                    我的有路
                

            

            

                我要开店
            

            
团购批发

            

                

                    客服服务
                

            

            

                手机有路

            

            

                

                    微信公众号
                
            
        

    

当前效果

image.png

2 引入默认样式重置

/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
    margin: 0;
    font-size: 12px; /* 中文字体大小的最小值 */
    /* font-family: xx; 也可以设置字体 */
}
ol,ul {
    list-style: none; /* 去除列表样式 */
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}
img {
    border: none; /* 在IE6中标签包裹的标签显示时有边框，故清除 */
}
a {
    color: #464646;
    text-decoration: none;
}

a:hover {
    color: #f60;
    text-decoration: underline;
}
/*
*代表所有页面中的标签，也可以如下重置默认样式，但一般不这样做，
依然一个一个标签重置
* {
    margin: 0;
    padding: 0;
}        */

image.png

3 添加顶部整体样式

.wrap {
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .topBar {
            background-color: #f4f4f4;
            height: 29px;
            line-height: 29px;
            width: 100%
        }

image.png

4 添加左右内嵌样式

.topBar .topBarR {
            display: inline-block;
        }
        .topBar .topBarL {
            display: inline-block;
            margin-right:280px;
        }

image.png

5 添加右侧列表内嵌样式

.topBar .topBarR li {
            display: inline-block;
        }

image.png

6 添加超链接样式

.topBar .topBarR li a{
            line-height: 20px;
            padding: 0 8px;
            border-right: 1px solid #ddd;
        }

image.png

7 添加“请登录”字体颜色，欢迎标语字体颜色

.topBar .topBarR .login {
            color: #f51400
        }
        .topBarL span {
            font-size: 12px;
            color: #636363;
        }

image.png