<![CDATA[阿Tim日志]]> https://atim.cn/index.php zh-cn https://atim.cn/css-selector/ <![CDATA[css开发规则]]> bkkkd <partybase@gmail.com> Tue, 12 Feb 2013 15:32:11 +0000 https://atim.cn/css-selector/ 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 - , , ]]> https://atim.cn/css-selector/#blogcomment <![CDATA[[评论] css开发规则]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://atim.cn/css-selector/#blogcomment