CSS：页面编写代码的基本思路心得-优快云博客

文章目录

1、先写html结构

根据UI文件，以及html标签语义的含义，编写html结构。并给上对应的class类名

  <div class="topbar">
<!--      版心-->
    <div class="container clearfix">
        <div class="welcome leftfix">
            <span class="hello ">尚品汇欢迎您</span>
            <span class="login">请<a href="#">登录</a></span>
            <a href="#" class="register">免费注册</a>
        </div>
        <div class="topbar-nav rightfix">
            <ul class="list clearfix">
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的购物车</a></li>
                <li><a href="#">我的尚品汇</a></li>
                <li><a href="#">尚品汇会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a href="#">关注尚品汇</a></li>
                <li><a href="#">合作招商</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
        </div>
    </div>
  </div>

2、写css样式

开始写css样式。
依据依然是UI文档规范。

编写顺序怎么来了？
根据html标签的嵌套性，由外向内逐步写样式。
或者说，由父页签向子页签的顺序写样式。

最后，检查是否存在公共样式，进行代码提取与归并。

.container {
    width: 1190px;
    margin: 0 auto;     /*这行代码，使自身块元素居中*/
}
.topbar{
    height: 30px;
    background-color: #ECECEC;
    /*text-align: center;     !*这行代码居中失效，它对块元素无效*!*/
}

.welcome {
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666666;
}
.hello,.login,.register{
    font-size: 12px;
}

.login {
    margin-left: 28px;
    padding-right: 10px;
    border-right: 1px solid #666666;
}
.register {
    padding-left: 10px;
}

/*-------------------------------*/
.topbar-nav {
    height: 30px;
    line-height: 30px;
}
.topbar-nav .list li {
    /*font-size: 0px;  导致上下多2.4px，总共高度加4.8px*/
    /*color: #666666;  这里字体颜色可以不写，因为reset.css文件中已经给a标签上色了*/
    float: left;
}
.topbar-nav .list li a{
    font-size: 12px;
    padding:0 15px;
    border-right: 1px solid #666666;
}
.topbar-nav .list li:last-child a{
    padding-right: 0;
    border-right: 0;
}

.topbar-nav .list li:first-child a {
    padding-left: 0px;
}