有路网页面拆解--顶部

先上效果

image.png

1HTML骨架

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

<div class="topBar">
    <div class="wrap">
        <div class="topBarL">
            <img src="../有路网图片/welcome.jpg" alt="">
            <span>您好，欢迎光临有路网！</span>
        </div>
        <ul class="topBarR">
            <li>
                <a href="" class="login">请登陆</a>&nbsp;&nbsp;<a href="" class="regist-link">免费注册</a>
            </li>

            <li>
                <div class="menu_hd">
                    <a href="" target="_blank">我的有路</a><b></b>
                </div>

            </li>

            <li>
                <a href="" target="_blank">我要开店</a>
            </li>

            <li><a href="" target="_blank">团购批发</a></li>

            <li>
                <div class="menu_hd">
                    <a href="">客服服务</a><b></b>
                </div>

            </li>

            <li><a href="" target="_blank" class="menu-btn">
                <img src="../有路网图片/ico_phone.gif">手机有路</a>

            </li>

            <li  class="last">
                <div>
                    <a href="" class="menu-btn">微信公众号</a>
                </div>
            </li>
        </ul>

    </div>
</div>

当前效果

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>标签包裹的<img>标签显示时有边框，故清除 */
}
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