php_admin_value的一个坑
关于月报/周报/日报
Feb
12
现在写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>
两个实现的结果是一样的.但作为一个共用类,或者以后修改使用其它的标签,这是一个麻烦的事.不便重复调用.所以推荐使用 类选择器基本的样式控制
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>
两个实现的结果是一样的.但作为一个共用类,或者以后修改使用其它的标签,这是一个麻烦的事.不便重复调用.所以推荐使用 类选择器基本的样式控制
