Feb 12

css开发规则 不指定

bkkkd , 23:32 , 开发应用 , 评论(0) , 引用(0) , 阅读(4663) , Via 本站原创 | |
现在写css的人都是都喜欢使用标签进行定义样式,虽然我不是一个反传统的人,但写上标签在css里面,如果以后要改变标签,就不太方便了.特别一些共用的类.直接写标签限制太多了.所以建议如下:
1,使用css类作为基本定义方式.
2,标签的样式定义只用于reset
3,每一个内容块中的子类,都使用"s-"开头,如:s-item,s-tab-nav
4,共用类使用 "t-"开头,如:t-clearfix

现在要实现下面这种标签实的内容
点击在新窗口中浏览此图片
代码一,使用了标签

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <style type="text/css">
            .tab {height:29px}
            .tab .tab-nav{}
            .tab li{float:left;list-style:none;margin:5px;}
            .tab li.on{background:#ccc;}
            .tab .tab-con{clear:both;border:1px solid #ccc;width:300px;}
            .tab p{display:none;}
            .tab p.on{display:block;}
        </style>
    </head>

    <body>
        <div class="tab">
            <ul class="tab-nav">
                <li>标签一</li>
                <li class="on">标签二</li>
                <li>标签三</li>
            </ul>
            <div class="tab-con">
                <p>内容一</p>
                <p class="on">内容二</p>
                <p>内容三</p>
            </div>
        </div>
    </body>
</html>

代码二,全部使用css类

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <style type="text/css">
            .tab {height:29px}
            .tab .s-tab-nav{}
            .tab .s-tab-nav .s-item {float:left;list-style:none;margin:5px;}
            .tab .s-tab-nav .s-item.on{background:#ccc;}
            .tab .s-tab-con{clear:both;border:1px solid #ccc;width:300px;}
            .tab .s-tab-con .s-item{display:none;}
            .tab .s-tab-con .s-item.on{display:block;}
        </style>
    </head>
    <body>
        <div class="tab">
            <ul class="s-tab-nav">
                <li class="s-item">标签一</li>
                <li class="s-item on">标签二</li>
                <li class="s-item">标签三</li>
            </ul>
            <div class="s-tab-con">
                <p class="s-item">内容一</p>
                <p class="s-item on">内容二</p>
                <p class="s-item">内容三</p>
            </div>
        </div>
    </body>
</html>

两个实现的结果是一样的.但作为一个共用类,或者以后修改使用其它的标签,这是一个麻烦的事.不便重复调用.所以推荐使用 类选择器基本的样式控制
Tags: , ,
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]