CSS模块化编码让开发经济,面向属性的CSS命名

面向属性的CSS命名

2016/06/06 · CSS ·
命名

原文出处: 流云诸葛   

自打起始做前端开发以来,我意识在支付页面的时候,总是有一个题材越发影响自己的花费作用,那么些难题就是css的命名,首假如指css类拔取器的命名。那一个标题根本反映在:第一,有的内容你压根想不出用怎么着名字来给它命名,因为一般命名总是考虑语义化,好让其余人来看这几个css类的名字就知晓它是效益于哪一个内容的,可是出于网页内容的繁杂和三种性,你很难有限匡助每个部分都能起一个分外的名字,就算你最后无奈想出了一个名字,也会有其一名字是还是不是是最合适的那种交融存在,而且最要命的是,那个命名的进度是一项尤其麻烦的脑力活动,会损耗掉很多脑细胞,这一件很不值得的事务;第二,由于命名的时候是语义化的命名,那或多或少也许会阻拦css代码的任用,比如说某一个网页的情节用.title来讲述它的体制,那么些title包蕴了2条规则,{font-size:
14px; line-height:
20px},此时网页的另一个内容可能必要跟那么些title具有一模一样的体裁,然则从另一个内容所处的网页地方来说,可能用.desc来命名才是更贴切的选料,那么些时候,我相信喜欢语义化命名的人肯定会把卓越内容再单独起一个css类desc,然后把title的体裁复制过来,结果就导致css文件中会存在两份相同的样式规则,只是命名不一致而已,那样代码就再也了。

解决那一个题材的法子就是行使面向属性的css命名,把那么些大家实在想不盛名字的,而且尚未必要起名字的,并且能够只用单一的css属性或者组合的单一css属性来讲述的有些,通通都用面向属性的css类来支配样式,让您从烦乱的css命名的涡流中干净解放出来,除了升高你的工作效用,最器重的是压缩你脑细胞的花费,让您不会那么劳碌。

首先要申明,面向属性的css命名那么些考虑不是自我的原创,它来自于张鑫旭的博客。本身是顿时可比纠结于css的命名难题,然后找到了他的两篇小说,对本人重新认识css的命名以及哪些组织全站的css有很多的支持,那两篇作品分别是:
简短高效的CSS命名准则/方法
本人是怎么着对网站CSS进行架构的
您可以先去通过她的文章掌握那一个命名思想的根源,再回去看我的有的总计跟应用。

@charset “utf-8”;

不会用代码框,所以瞧着有些乱套,,,,
html部分

CSS模块化编码让开发经济

2011/11/24 · CSS · 2
评论 · 来源: CSS
wang     ·
CSS

原生JS因jQuery的”write less,do
more”变得极简,Html因语义化编码变得领会。那么,有没有一种办法让Css也愈发的快速精致呢?
当然有,那便是模块化编码。

Css的模块化,我们得以知道成(抑或本身就是)OOP思想,重用性、灵活性、可扩充性便是它终极的靶子,“类”便是它的要旨,OOP的多用组合少用继承一样是它的中坚条件。Css模块化是一个风行高效的Css编码方式,若有接触过YUI
Css的对象肯定对那种方式有所明白。

如何Css模块化,我想那才是豪门实在关心的。
我所了然的Css模块化,应该从两大块去分别:

首先大块:

从整站全局模块化。 那点我们并不陌生,时常使用的reset
css便是模块化的一局地,全局通用的书体样式,链接样式,以及通用底部尾部及主旨容器等等这个我们早已熟练,别的诸如定义文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、长度中度(如.w10{width:10px})、边距(如.m10{margin:10px})等页面中会常用到的样式,这一类,我们誉为Css通用原子类
(哈,与类扯上涉及了,那就权当成类吧).通用原子类有七个性状:
通用性和原子性,任何页面都足以随意动用它们,且他们只表现最基础的样式,一个通用原子类只设置一个体制,不可再分.
关于整站全局模块化不再详述,本文后边我会贴出阿当的《Web前端开发修炼之道》一书中常用通用原子类样式。

其次大块:

是从视觉效果上模块化,在视觉上样式和听从相对独立稳定的一部分即可视为模块。
拆分那一个模块,应该尽量根据一个尺度:
模块与模块之间尽量不要包蕴相同的部分,若有相同部分就再拆出来独立成一个模块。下图是自个儿画的一个简练的页面视觉图:

亚洲必赢官网 1

见状上图,菜鸟的Css编码一般是为1~4定义七个类名,为她们写各自的体制;
明智一点的写法是为1~4定义多个类名,用.a .b .c
.d{…}格局定义共同样式,然后再为各自定义分裂部分的体裁;可是,还有一种完美的法门,这便是模块化.
下边我就上述图为例做个不难的模块化分析。

第一步,分析任何视觉共用有些.
可以观察,1~4中,标题背景、标题文字、内容文字那多个部分的体裁都是相同的。所以,大家得以为这些八个区块定义一个类名,将联袂的体制写给这么些类名:

XHTML

; html-script: false ]<div> <h2>倒霉松鼠再出山h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice
Age内地译做《冰川时期》)再一次开拍续集…p> <div> <div>
<h2>糟糕松鼠再出山h2>
<p>20世纪Fox将为卖座动画片《冰河世纪》(Ice
Age内地译做《冰川时代》)再一次开拍续集…p> <div>

1
2
3
4
5
6
7
8
; html-script: false ]<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
<div>
<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
<div>

第二步,分析出不相同部分,并权衡高效使用.
可以寓目,分裂部分,首若是内容背景观和区块宽度两部分.
先说背景色,背景象有二种,淡黄(1个),白色(2个),黄色(1个),服从”模块与模块之间尽量不要包括相同的一些,若有相同部分就再拆出来独立成一个模块”的条件,大家要把2个白底的体制建议来,另两个单身定义,而据悉Css优先条件,大家可以把白底默许定义到第一步中的box样式中,另两种背景象可做重定义处理.
再来看看宽度与稳定,2,4大幅度等同且都右浮动,所以,我们可以把那有些提议来模块化,而转变一般可以直接调用通用原子类,所以,大家只是需求定义一个宽度样式中(若那几个宽度在通用原子类中也有就更好了).
如此的话,Html可以如此写:

XHTML

<div> <h2>倒霉松鼠再出山h2>
<p>20世纪Fox将为卖座动画片《冰河世纪》(Ice
Age内地译做《冰川期间》)再一次开拍续集…p> </div> <div>
<h2>糟糕松鼠再出山h2>
<p>20世纪Fox将为卖座动画片《冰河世纪》(Ice
Age内地译做《冰川时代》)再一次开拍续集…p> </div>

1
2
3
4
5
6
7
8
<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
</div>
<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
</div>

唯恐,那样的布局对Html页面来说,会显的略微臃肿,但Css文件因为重用性的拉长而大大的减小了.
Css模块化是一个相比实用但也要求去通晓的商量,实际应用中也急需宏观的分析,过多的模块也会招致维护性的下滑,就像是OOP编程一样,大家也要考虑”公有属性”与”私有属性”.
本文通过一个简练的事例解析了Css模块化的主导思想,越多关于Css模块化的学识,可以看YUI
Css或者其余网络上的资源.

CSS

CSS模块化编码让开发经济,面向属性的CSS命名。/*文字排版*/ .f12{font-size:12px} .f13{font-size:13px}
.f14{font-size:14px} .f16{font-size:16px} .f20{font-size:20px}
.fb{font-weight:bold} .fn{font-weight:normal} .t2{text-indent:2em}
.lh150{line-height:150%} .lh180{line-height:180%}
.lh200{line-height:200%} .unl{text-decoration:underline;}
.no_unl{text-decoration:none;} /*定位*/ .tl{text-align:left}
.tc{text-align:center} .tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;} .fl{float:left;display:inline}
.fr{float:right;display:inline} .cb{clear:both} .cl{clear:left}
.cr{clear:right}
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html
.clearfix{height:1%}.clearfix{display:block} .vm{vertical-align:middle}
.pr{position:relative} .pa{position:absolute}
.abs-right{position:absolute;right:0} .zoom{zoom:1}
.hidden{visibility:hidden} .none{display:none} /*长度中度*/
.w10{width:10px} .w20{width:20px} .w30{width:30px} .w40{width:40px}
.w50{width:50px} .w60{width:60px} .w70{width:70px} .w80{width:80px}
.w90{width:90px} .w100{width:100px} .w200{width:200px}
.w250{width:250px} .w300{width:300px} .w400{width:400px}
.w500{width:500px} .w600{width:600px} .w700{width:700px}
.w800{width:800px} .w{width:100%} .h50{height:50px} .h80{height:80px}
.h100{height:100px} .h200{height:200px} .h{height:100%} /*边距*/
.m10{margin:10px} .m15{margin:15px} .m30{margin:30px}
.mt5{margin-top:5px} .mt10{margin-top:10px} .mt15{margin-top:15px}
.mt20{margin-top:20px} .mt30{margin-top:30px} .mt50{margin-top:50px}
.mt100{margin-top:100px} .mb10{margin-bottom:10px}
.mb15{margin-bottom:15px} .mb20{margin-bottom:20px}
.mb30{margin-bottom:30px} .mb50{margin-bottom:50px}
.mb100{margin-bottom:100px} .ml5{margin-left:5px}
.ml10{margin-left:10px} .ml15{margin-left:15px} .ml20{margin-left:20px}
.ml30{margin-left:30px} .ml50{margin-left:50px}
.ml100{margin-left:100px} .mr5{margin-right:5px}
.mr10{margin-right:10px} .mr15{margin-right:15px}
.mr20{margin-right:20px} .mr30{margin-right:30px}
.mr50{margin-right:50px} .mr100{margin-right:100px} .p10{padding:10px;}
.p15{padding:15px;} .p30{padding:30px;} .pt5{padding-top:5px}
.pt10{padding-top:10px} .pt15{padding-top:15px} .pt20{padding-top:20px}
.pt30{padding-top:30px} .pt50{padding-top:50px} .pb5{padding-bottom:5px}
.pb10{padding-bottom:10px} .pb15{padding-bottom:15px}
.pb20{padding-bottom:20px} .pb30{padding-bottom:30px}
.pb50{padding-bottom:50px} .pb100{padding-bottom:100px}
.pl5{padding-left:5px} .pl10{padding-left:10px} .pl15{padding-left:15px}
.pl20{padding-left:20px} .pl30{padding-left:30px}
.pl50{padding-left:50px} .pl100{padding-left:100px}
.pr5{padding-right:5px} .pr10{padding-right:10px}
.pr15{padding-right:15px} .pr20{padding-right:20px}
.pr30{padding-right:30px} .pr50{padding-right:50px}
.pr100{padding-right:100px}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/*文字排版*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}

赞 1 收藏 2
评论

亚洲必赢官网 2

取名方式

其一措施,简单的话,就是间接以css属性简写作为css的类名,在采纳的时候,通过使用一个或组合五个这么的简写方式的css类来达到控制样式的目标。比如说网页中有一个网页内容,是一段居中的文本,大小为12px,行高为20px,段前后间隔分别为10px和15px,那么就足以定义一下那几个简单的属性类:

CSS

.tc {text-align: center;} .f12 {font-size: 12px;} .lh20 {line-height:
20px;} .mt10 {margin-top: 10px;} .mtb15 {margin-bottom: 15px;}

1
2
3
4
5
.tc {text-align: center;}
.f12 {font-size: 12px;}
.lh20 {line-height: 20px;}
.mt10 {margin-top: 10px;}
.mtb15 {margin-bottom: 15px;}

在页面中利用的时候,直接组合以上那么些css属性类即可:

XHTML

<p class=”tc f12 lh20 mt10 mb15″>…</p>

1
<p class="tc f12 lh20 mt10 mb15">…</p>

那就是那种属性命有名的模特式的切实运用方法。

css中有很多的习性都可以利用那种措施来命名。在张鑫旭的博客中,他把温馨的那套方法统计成了一个开源的css库:。大家得以先从她那一个库来打听她自家是什么协会那些不相同的css属性类的,然后再来商讨那其中的局地题目。

那是他的开源库中,选用面向属性命名的漫天css类(以下代码仅是为了阅读本文方便才引用,如若是想在实际上工作中选用,最好是关注张鑫旭本人的github或者博客,因为她会持续地优化自己的东西):

CSS

/* display */ .dn{display:none;} .di{display:inline;}
.db{display:block;} .dib{display:inline-block;}
div.dib{*display:inline; *zoom:1;}/* other block level tag(eg. p, li,
h1~h6), using ‘inline_any’ instead */ /* height */ .h0{height:0;}
.h16{height:14px;} .h16{height:16px;} .h18{height:18px;}
.h20{height:20px;} .h22{height:22px;} .h24{height:24px;}
.h30{height:30px;} /* width */ /* fixed width value */
.w20{width:20px;} .w50{width:50px;} .w70{width:70px;}
.w100{width:100px;} .w120{width:120px;} .w140{width:140px;}
.w160{width:160px;} .w180{width:180px;} .w200{width:200px;}
.w220{width:220px;} .w250{width:250px;} .w280{width:280px;}
.w300{width:300px;} .w320{width:320px;} .w360{width:360px;}
.w400{width:400px;} .w460{width:460px;} .w500{width:500px;}
.w600{width:600px;} .w640{width:640px;} .w700{width:700px;} /* percent
width value */ .pct10{width:10%;} .pct15{width:15%;} .pct20{width:20%;}
.pct25{width:25%;} .pct30{width:30%;} .pct33{width:33.3%;}
.pct40{width:40%;} .pct50{width:50%;} .pct60{width:60%;}
.pct66{width:66.6%;} .pct70{width:70%;} .pct75{width:75%;}
.pct80{width:80%;} .pct90{width:90%;} .pct100{width:100%;} /*
line-height */ .lh0{line-height:0;} .lh16{line-height:14px;}
.lh16{line-height:16px;} .lh18{line-height:18px;}
.lh20{line-height:20px;} .lh22{line-height:22px;}
.lh24{line-height:24px;} .lh30{line-height:30px;} /* margin */
.m0{margin:0;} .ml1{margin-left:1px;} .ml2{margin-left:2px;}
.ml5{margin-left:5px;} .ml10{margin-left:10px;} .ml15{margin-left:15px;}
.ml20{margin-left:20px;} .ml30{margin-left:30px;}
.mr1{margin-right:1px;} .mr2{margin-right:2px;} .mr5{margin-right:5px;}
.mr10{margin-right:10px;} .mr15{margin-right:15px;}
.mr20{margin-right:20px;} .mr30{margin-right:30px;}
.mt1{margin-top:1px;} .mt2{margin-top:2px;} .mt5{margin-top:5px;}
.mt10{margin-top:10px;} .mt15{margin-top:15px;} .mt20{margin-top:20px;}
.mt30{margin-top:30px;} .mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;} .mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;} .mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;} .mb30{margin-bottom:30px;} /* margin
negative */ .ml-1{margin-left:-1px;} .mr-1{margin-right:-1px;}
.mt-1{margin-top:-1px;} .mb-1{margin-bottom:-1px;}
.ml-3{margin-left:-3px;} .mr-3{margin-right:-3px;}
.mt-3{margin-top:-3px;} .mb-3{margin-bottom:-3px;}
.ml-20{margin-left:-20px;} .mr-20{margin-right:-20px;}
.mt-20{margin-top:-20px;} .mb-20{margin-bottom:-20px;} /* padding */
.p0{padding:0;} .p1{padding:1px;} .pl1{padding-left:1px;}
.pt1{padding-top:1px;} .pr1{padding-right:1px;}
.pb1{padding-bottom:1px;} .p2{padding:2px;} .pl2{padding-left:2px;}
.pt2{padding-top:2px;} .pr2{padding-right:2px;}
.pb2{padding-bottom:2px;} .pl5{padding-left:5px;} .p5{padding:5px;}
.pt5{padding-top:5px;} .pr5{padding-right:5px;}
.pb5{padding-bottom:5px;} .p10{padding:10px;} .pl10{padding-left:10px;}
.pt10{padding-top:10px;} .pr10{padding-right:10px;}
.pb10{padding-bottom:10px;} .p15{padding:15px;}
.pl15{padding-left:15px;} .pt15{padding-top:15px;}
.pr15{padding-right:15px;} .pb15{padding-bottom:15px;}
.p20{padding:20px;} .pl20{padding-left:20px;} .pt20{padding-top:20px;}
.pr20{padding-right:20px;} .pb20{padding-bottom:20px;}
.p30{padding:30px;} .pl30{padding-left:30px;} .pt30{padding-top:30px;}
.pr30{padding-right:30px;} .pb30{padding-bottom:30px;} /* border-color
name rule:
border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first
one letter/first two letter) |-> All colors are safe color*/
.bdc{border:1px solid #ccc;} .blc{border-left:1px solid #ccc;}
.brc{border-right:1px solid #ccc;} .btc{border-top:1px solid #ccc;}
.bbc{border-bottom:1px solid #ccc;} .bdd{border:1px solid #ddd;}
.bld{border-left:1px solid #ddd;} .brd{border-right:1px solid #ddd;}
.btd{border-top:1px solid #ddd;} .bbd{border-bottom:1px solid #ddd;}
.bde{border:1px solid #eee;} .ble{border-left:1px solid #eee;}
.bre{border-right:1px solid #eee;} .bte{border-top:1px solid #eee;}
.bbe{border-bottom:1px solid #eee;} /* background-color name rule: bg

  • (key word/Hex color) |-> All colors are safe color */
    .bgwh{background-color:#fff;} .bgfb{background-color:#fbfbfb;}
    .bgf5{background-color:#f5f5f5;} .bgf0{background-color:#f0f0f0;}
    .bgeb{background-color:#ebebeb;} .bge0{background-color:#e0e0e0;} /*
    safe color */ .g0{color:#000;} .g3{color:#333;} .g6{color:#666;}
    .g9{color:#999;} .gc{color:#ccc;} .wh{color:white;} /* font-size */
    .f0{font-size:0;} .f12{font-size:12px;} .f13{font-size:13px;}
    .f14{font-size:14px;} .f16{font-size:16px;} .f18{font-size:18px;}
    .f20{font-size:20px;} .f24{font-size:24px;} .f28{font-size:28px;} /*
    font-family */ .fa{font-family:Arial;} .ft{font-family:Tahoma;}
    .fv{font-family:Verdana;} .fs{font-family:Simsun;}
    .fl{font-family:’Lucida Console’;} .fw{font-family:’Microsoft Yahei’;}
    /* font-style */ .n{font-weight:normal; font-style:normal;
    white-space: normal;} .b{font-weight:bold;} .i{font-style:italic;} /*
    text-align */ .tc{text-align:center;} .tr{text-align:right;}
    .tl{text-align:left;} .tj{text-align:justify;} /* text-decoration */
    .tdl{text-decoration:underline;} .tdn,.tdn:hover,.tdn
    a:hover,a.tdl:hover{text-decoration:none;} /* letter-spacing */
    .lt-1{letter-spacing:-1px;} .lt0{letter-spacing:0;}
    .lt1{letter-spacing:1px;} /* white-space */
    .nowrap{white-space:nowrap;} /* word-wrap */
    .bk{word-wrap:break-word;} /* vertical-align */
    .vm{vertical-align:middle;} .vtb{vertical-align:text-bottom;}
    .vb{vertical-align:bottom;} .vt{vertical-align:top;}
    .v-1{vertical-align:-1px;} .v-2{vertical-align:-2px;}
    .v-3{vertical-align:-3px;} .v-4{vertical-align:-4px;}
    .v-5{vertical-align:-5px;} /* float */ .l{float:left;}
    .r{float:right;} /* clear */ .cl{clear:both;} /* position */
    .rel{position:relative;} .abs{position:absolute;} /*z-index*/
    .zx1{z-index:1;} .zx2{z-index:2;} /* cursor */ .poi{cursor:pointer;}
    .def{cursor:default;} /* overflow */ .ovh{overflow:hidden;}
    .ova{overflow:auto;} /* visibility */ .vh{visibility:hidden;}
    .vv{visibility:visible;} /* opacity */ .opa0{opacity:0;
    filer:alpha(opacity=0);} /* zoom */ .z{*zoom:1;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
/* display */
.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;}
div.dib{*display:inline; *zoom:1;}/* other block level tag(eg. p, li, h1~h6), using ‘inline_any’ instead */
/* height */
.h0{height:0;}
.h16{height:14px;}
.h16{height:16px;}
.h18{height:18px;}
.h20{height:20px;}
.h22{height:22px;}
.h24{height:24px;}
.h30{height:30px;}
/* width */
/* fixed width value */
.w20{width:20px;}
.w50{width:50px;}
.w70{width:70px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w250{width:250px;}
.w280{width:280px;}
.w300{width:300px;}
.w320{width:320px;}
.w360{width:360px;}
.w400{width:400px;}
.w460{width:460px;}
.w500{width:500px;}
.w600{width:600px;}
.w640{width:640px;}
.w700{width:700px;}
/* percent width value */
.pct10{width:10%;}
.pct15{width:15%;}
.pct20{width:20%;}
.pct25{width:25%;}
.pct30{width:30%;}
.pct33{width:33.3%;}
.pct40{width:40%;}
.pct50{width:50%;}
.pct60{width:60%;}
.pct66{width:66.6%;}
.pct70{width:70%;}
.pct75{width:75%;}
.pct80{width:80%;}
.pct90{width:90%;}
.pct100{width:100%;}
/* line-height */
.lh0{line-height:0;}
.lh16{line-height:14px;}
.lh16{line-height:16px;}
.lh18{line-height:18px;}
.lh20{line-height:20px;}
.lh22{line-height:22px;}
.lh24{line-height:24px;}
.lh30{line-height:30px;}
/* margin */
.m0{margin:0;}
.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mt1{margin-top:1px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
/* margin negative */
.ml-1{margin-left:-1px;}
.mr-1{margin-right:-1px;}
.mt-1{margin-top:-1px;}
.mb-1{margin-bottom:-1px;}
.ml-3{margin-left:-3px;}
.mr-3{margin-right:-3px;}
.mt-3{margin-top:-3px;}
.mb-3{margin-bottom:-3px;}
.ml-20{margin-left:-20px;}
.mr-20{margin-right:-20px;}
.mt-20{margin-top:-20px;}
.mb-20{margin-bottom:-20px;}
/* padding */
.p0{padding:0;}
.p1{padding:1px;}
.pl1{padding-left:1px;}
.pt1{padding-top:1px;}
.pr1{padding-right:1px;}
.pb1{padding-bottom:1px;}
.p2{padding:2px;}
.pl2{padding-left:2px;}
.pt2{padding-top:2px;}
.pr2{padding-right:2px;}
.pb2{padding-bottom:2px;}
.pl5{padding-left:5px;}
.p5{padding:5px;}
.pt5{padding-top:5px;}
.pr5{padding-right:5px;}
.pb5{padding-bottom:5px;}
.p10{padding:10px;}
.pl10{padding-left:10px;}
.pt10{padding-top:10px;}
.pr10{padding-right:10px;}
.pb10{padding-bottom:10px;}
.p15{padding:15px;}
.pl15{padding-left:15px;}
.pt15{padding-top:15px;}
.pr15{padding-right:15px;}
.pb15{padding-bottom:15px;}
.p20{padding:20px;}
.pl20{padding-left:20px;}
.pt20{padding-top:20px;}
.pr20{padding-right:20px;}
.pb20{padding-bottom:20px;}
.p30{padding:30px;}
.pl30{padding-left:30px;}
.pt30{padding-top:30px;}
.pr30{padding-right:30px;}
.pb30{padding-bottom:30px;}
/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/
.bdc{border:1px solid #ccc;}
.blc{border-left:1px solid #ccc;}
.brc{border-right:1px solid #ccc;}
.btc{border-top:1px solid #ccc;}
.bbc{border-bottom:1px solid #ccc;}
.bdd{border:1px solid #ddd;}
.bld{border-left:1px solid #ddd;}
.brd{border-right:1px solid #ddd;}
.btd{border-top:1px solid #ddd;}
.bbd{border-bottom:1px solid #ddd;}
.bde{border:1px solid #eee;}
.ble{border-left:1px solid #eee;}
.bre{border-right:1px solid #eee;}
.bte{border-top:1px solid #eee;}
.bbe{border-bottom:1px solid #eee;}
/* background-color name rule: bg – (key word/Hex color) |-> All colors are safe color */
.bgwh{background-color:#fff;}
.bgfb{background-color:#fbfbfb;}
.bgf5{background-color:#f5f5f5;}
.bgf0{background-color:#f0f0f0;}
.bgeb{background-color:#ebebeb;}
.bge0{background-color:#e0e0e0;}
/* safe color */
.g0{color:#000;}
.g3{color:#333;}
.g6{color:#666;}
.g9{color:#999;}
.gc{color:#ccc;}
.wh{color:white;}
/* font-size */
.f0{font-size:0;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f24{font-size:24px;}
.f28{font-size:28px;}
/* font-family */
.fa{font-family:Arial;}
.ft{font-family:Tahoma;}
.fv{font-family:Verdana;}
.fs{font-family:Simsun;}
.fl{font-family:’Lucida Console’;}
.fw{font-family:’Microsoft Yahei’;}
/* font-style */
.n{font-weight:normal; font-style:normal; white-space: normal;}
.b{font-weight:bold;}
.i{font-style:italic;}
/* text-align */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;}
/* text-decoration */
.tdl{text-decoration:underline;}
.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;}
/* letter-spacing */
.lt-1{letter-spacing:-1px;}
.lt0{letter-spacing:0;}
.lt1{letter-spacing:1px;}
/* white-space */
.nowrap{white-space:nowrap;}
/* word-wrap */
.bk{word-wrap:break-word;}
/* vertical-align */
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}
.vb{vertical-align:bottom;}
.vt{vertical-align:top;}
.v-1{vertical-align:-1px;}
.v-2{vertical-align:-2px;}
.v-3{vertical-align:-3px;}
.v-4{vertical-align:-4px;}
.v-5{vertical-align:-5px;}
/* float */
.l{float:left;}
.r{float:right;}
/* clear */
.cl{clear:both;}
/* position */
.rel{position:relative;}
.abs{position:absolute;}
/*z-index*/
.zx1{z-index:1;}
.zx2{z-index:2;}
/* cursor */
.poi{cursor:pointer;}
.def{cursor:default;}
/* overflow */
.ovh{overflow:hidden;}
.ova{overflow:auto;}
/* visibility */
.vh{visibility:hidden;}
.vv{visibility:visible;}
/* opacity */
.opa0{opacity:0; filer:alpha(opacity=0);}
/* zoom */
.z{*zoom:1;}

第一她这有的代码里面,包括了俺们在网页开发中多数常用的css属性,如display,height,margin,padding,border,color,font-size等。在属性类的命名上,基本上都是运用属性跟属性值的缩写。其余可声明的是:

1)width除了有固定值的属性类定义外,还蕴藏了百分比的属性类定义,毕竟那几个在实质上工作中也时有用到;

2)margin,border,padding由于蕴含上下左右连锁的特性,所以她还提供了针对性上下左右片面的属性类,方便单独行使。

其余他的代码都有浏览器包容性方面的设想,所以若是在祥和的办事中用的话,最好是参照着她的来。

那种艺术在自己使用从前,我相比担心的是它的可维护性。因为那个属性类很多都包含属性值,比如.f12{font-size:
12px},所以在html元素的class属性值就肯定会蕴藏f12如此的css属性类名,假如要修改的呼应的属性值该如何做吧?那么就必要修改多个地方才行:首先是属性值定义的地方,第二是属性类名定义的地方,最终就是在html中运用的地方。当时想到那个难点的时候,我觉得那种方法不可行,因为在实际工作中,尼玛UI岗位的同事改设计的事态太多了,那样的话,页面上用到那种属性命名类的地点都要时不时改来改去。

然而后来自家发现,即便无须那种命有名的模特式,我要么改变不了UI调整设计图的情事,而且假使规划图一改,甚至自己的html结果以及自我这些运用语义化命名的css类都要改,那么些麻烦程度实在比用属性命名类的法子更决定,所以自己最终就从头在品种中尝试那个点子。结果发现,其实更加好用,越发是做些文本类的排版,垂直布局,分栏布局,以及百分比布局等尤其简单疾速,前边提到的不得了维护的难点也很小。我有三个点子来解决来尤其标题:

1)假使原先用f12,后来布署把font-size改成14px,那么自己只用再追加一个f14即可,再把原本html中须要把f12交替成f14的地点,换成f14即可。假如f12尚未其余地点用到了,我会考虑把f12再删掉。

2)即使原先用f54,由于那种属性类并不具有通用性,所以自己或者考虑直接把f54替换成我必要的属性类,比如f52。

在本文本有的的末尾,我还会付出自己关于那种使用办法的指出以及对有限援助难题的处理补充。现在先回到再看看张鑫旭的那么些代码,我从个体的角度,结合自己在项目中的实际处境,来说下需求我们革新下的地点。

1)有些选择固定值的属性类有剩余的,也有缺少的;比如没有.h28代表height:
28px的,.w100到.w700恐怕都是用不到的

2)跟颜色相关的恐怕大多数都不肯定符合项目须要,更加是那种做出来完全没有此外正式的宏图图,肉眼看上去相同的水彩,实际上却是不雷同的颜料;相同的本子,在分歧的页面,有可能也采用了差其余水彩;甚至是那种色系相比较丰盛的统筹。这一个属性类包涵border,background,color。当然纯黄色和纯白色或者可以统一起来的,毕竟那四个颜色基本上各类网站都会用到。

3)还有些属性类也是多余的,比如font-family,因为自身在品种中有用less,font-family是在其余地点定义的,所以那里就不要求了。当然你如若觉得那一个依旧有用得着的话,可以设想留下。

4)仍能设想增添些其他的css属性类,比如border-radius以及flex等。border-radius现在用的已经很广阔了,flex在活动端也有可以用的到的地方。那么些就得按照自己的花色实在情状,逐渐扩充了。

综上所述上述那个内容,我对于那种面向属性命名的点子提出如下:

1)首先肯定是可以张鑫旭的那套代码为根基;

2)对于height,line-height,font-size那两个特性,划分属性类的时候,尽量以小幅为2的等差分布来定义,如:
.h0 , .h18 , .h20 , .h22 , .h24 , .h26 , .h28 , .h30 , .h32 , .h34 ,
.h36 , .h38 , .h40;
.lh18 , .lh20 , .lh22 , .lh24 , .lh26 , .lh28 , .lh30 , .lh32 , .lh34 ,
.lh36 , .lh38 , .lh40 ;
.f12 , .f14 , .f16 , .f18 , .f20 , .f22 , .f24 , .f26 , .f28 , .f30 ;
一来是为了保险这一个小范围的的尺码都能遮盖到;二是为着有限协助种种尺寸都是偶数,方便布局。

3)对于width,100以内的固定值,可以考虑以10为宽度定义一个等差分布种类:
.w0 , .w10 , .w20 , .w30 , .w40 , .w50 , .w60 , .w70 , .w80 , .w90 ,
.w100
此外的固定值的属性类可以等到骨子里利用的时候再追加;
对于百分比的width,可以把10%到100%的值都定义出来,然后针对1/3 , 1/4 ,
1/5, 1/6
也单独定义出来,因为那几个都属于常用的局地布局比例,所以可以设想提前定义。

4)margin跟padding的属性类有的可能是多余的,也有可能有缺少的,可是无法提前定义太多,可以考虑在事实上用的长河中再追加;

5)border,background-color以及color可以设想留下。由于那多少个跟颜色有关,所以可以把设计图中最常用的两种颜色也抽出来分别定义追加进来,假诺设计师比较有经验的话,做出来的事物就会比较正式,尤其是在通用的水彩这一块,不会搞出许多的颜料出来。在zxx.lib.css中,已定义的border,background-color还有color都是安全色,固然是设计师的水彩,其实也能定义成属性类,比如#7c7c7c,就可以定义成.c7c,bg7c,bd7c。

6)可以依据项目的骨子里情形扩大border-radius以及flex等属性类。定义格局完全跟任何性质一样,如flex的:

CSS

.df { display: flex; } .dif { display: inline-flex; } .fdr {
flex-direction: row; } .fdrr { flex-direction: row-reverse; } .fdc {
flex-direction: column; } .fdcr { flex-direction: column-reverse; } .fwn
{ flex-wrap: nowrap; } .fww { flex-wrap: wrap; } .fwr { flex-wrap:
wrap-reverse; } .jcfs { justify-content: flex-start; } .jcfe {
justify-content: flex-end; } .jcc { justify-content: center; } .jcsb {
justify-content: space-between; } .jcsa { justify-content: space-around;
} .aifs { align-items: flex-start; } .aife { align-items: flex-end; }
.aic { align-items: center; } .aib { align-items: baseline; } .ais {
align-items: stretch; } .acfs { align-content: flex-start; } .acfe {
align-content: flex-end; } .acc { align-content: center; } .acsb {
align-content: space-between; } .acsa { align-content: space-around; }
.acs { align-content: stretch; } .fxa { flex: auto; } .fxn { flex: none;
} .fx1 { flex: 1; } .fx2 { flex: 2; } .fx3 { flex: 3; } .fx4 { flex: 4;
} .fx5 { flex: 5; } .fx6 { flex: 6; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
.df {
  display: flex;
}
.dif {
  display: inline-flex;
}
.fdr {
  flex-direction: row;
}
.fdrr {
  flex-direction: row-reverse;
}
.fdc {
  flex-direction: column;
}
.fdcr {
  flex-direction: column-reverse;
}
.fwn {
  flex-wrap: nowrap;
}
.fww {
  flex-wrap: wrap;
}
.fwr {
  flex-wrap: wrap-reverse;
}
.jcfs {
  justify-content:  flex-start;
}
.jcfe {
  justify-content:  flex-end;
}
.jcc {
  justify-content:  center;
}
.jcsb {
  justify-content:  space-between;
}
.jcsa {
  justify-content:  space-around;
}
.aifs {
  align-items: flex-start;
}
.aife {
  align-items: flex-end;
}
.aic {
  align-items: center;
}
.aib {
  align-items: baseline;
}
.ais {
  align-items: stretch;
}
.acfs {
  align-content: flex-start;
}
.acfe {
  align-content: flex-end;
}
.acc {
  align-content: center;
}
.acsb {
  align-content: space-between;
}
.acsa {
  align-content: space-around;
}
.acs {
  align-content: stretch;
}
.fxa {
  flex: auto;
}
.fxn {
  flex: none;
}
.fx1 {
  flex: 1;
}
.fx2 {
  flex: 2;
}
.fx3 {
  flex: 3;
}
.fx4 {
  flex: 4;
}
.fx5 {
  flex: 5;
}
.fx6 {
  flex: 6;
}

以上那部分flex的属性类需结合auto-prefix那种工具来使用,因为有包容性难题,须要联合添加前缀。

7)关于那一个面向属性的css类社团:
先是,按照前边的那一个提出,在张鑫旭的代码的底蕴上,调整成团结的体系所需未来,就相应把那个代码单独存放起来,作为一个像bootstrap那样的独门的库来使用;
其次,在实际工作历程中,要是要加进新的css属性类,唯有在那么些属性类有公用的市值,才能添加到第一步的国有性质类库里面去,否则的话,就不得不在当下页面的main
css里面去写。

8)最后,就是在坚韧不拔没有再一次的代码前提下,依据实际情状去充实相关的css属性类。有公用性的就加到单独的库里,没公用性的话就扩张到页面的main
css里。

这个提出,也只是自己个人的使用经验总计,有相比较多的村办想法,借使以为不对仍然有难题的话,欢迎私信或者评论交换。本文最重大的目的是分享那种面向属性的命名格局,我信任肯定会有情侣可以看到那几个措施的价值的。


说到底在张鑫旭的代码中,还有部分代码,定义了不少简约常用的css类,比如浮动,浮动清除等等:

CSS

/* 块探花素水平居中 */ .auto{margin-left:auto; margin-right:auto;} /*
清除浮动*/ .fix{*zoom:1;} .fix:after{display:table; content:”;
clear:both;} /* 基于display:table-cell的自适应布局 */
.cell{display:table-cell; *display:inline-block; width:2000px;
*width:auto;} /* 双栏自适应cell部分一连英文字符换行 */
.cell2{overflow:hidden; _display:inline-block;} /* 单行文字溢出虚点显示*/ .ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
/* css3连着动画效果 */ .trans{ -webkit-transition:all .15s;
transition:all .15s; } /* 大小不定因素垂直居中 */
.dib_vm{display:inline-block; width:0; height:100%;
vertical-align:middle;} /* 加载中背景图片 –
假诺你使用该CSS小库,务必修改此图片地址 */
.loading{background:url(about:blank) no-repeat center;} /*
无框文本框文本域 */ .bd_none{border:0; outline:none;} /* 相对定位隐藏
*/ .abs_out{position:absolute; left:-999em; top:-999em;}
.abs_clip{position:absolute; clip:rect(0 0 0 0);} /* 按钮禁用 */
.disabled{outline:0 none; cursor:default!important; opacity:.4;
filer:alpha(opacity=40); -ms-pointer-events:none; pointer-events:none;}
/*inline-block与float等宽列表*/ .inline_box{font-size:1em;
letter-spacing:-.25em; font-family:Arial;} .inline_two, .inline_three,
.inline_four, .inline_five, .inline_six,
.inline_any{display:inline-block; *display:inline; letter-spacing:0;
vertical-align:top; *zoom:1;} .float_two, .float_three, .float_four,
.float_five, .float_six{float:left;} .inline_two,
.float_two{width:50%; *width:49.9%;} .inline_three,
.float_three{width:33.33333%; *width:33.3%;} .inline_four,
.float_four{width:25%; *width:24.9%;} .inline_five,
.float_five{width:20%; *width:19.9%;} .inline_six,
.float_six{width:16.66666%; *width:16.6%;}
.inline_fix{display:inline-block; width:100%; height:0;
overflow:hidden;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 块状元素水平居中 */
.auto{margin-left:auto; margin-right:auto;}
/* 清除浮动*/
.fix{*zoom:1;}
.fix:after{display:table; content:”; clear:both;}
/* 基于display:table-cell的自适应布局 */
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}
/* 双栏自适应cell部分连续英文字符换行 */
.cell2{overflow:hidden; _display:inline-block;}
/* 单行文字溢出虚点显 示*/
.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
/* css3过渡动画效果 */
.trans{
    -webkit-transition:all .15s;    
            transition:all .15s;
}
/* 大小不定元素垂直居中 */
.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}
/* 加载中背景图片 – 如果您使用该CSS小库,务必修改此图片地址 */
.loading{background:url(about:blank) no-repeat center;}
/* 无框文本框文本域 */
.bd_none{border:0; outline:none;}
/* 绝对定位隐藏 */
.abs_out{position:absolute; left:-999em; top:-999em;}
.abs_clip{position:absolute; clip:rect(0 0 0 0);}
/* 按钮禁用 */
.disabled{outline:0 none; cursor:default!important; opacity:.4; filer:alpha(opacity=40); -ms-pointer-events:none; pointer-events:none;}
/*inline-block与float等宽列表*/
.inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;}
.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;}
.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}
.inline_two, .float_two{width:50%; *width:49.9%;}
.inline_three, .float_three{width:33.33333%; *width:33.3%;}
.inline_four, .float_four{width:25%; *width:24.9%;}
.inline_five, .float_five{width:20%; *width:19.9%;}
.inline_six, .float_six{width:16.66666%; *width:16.6%;}
.inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

那几个代码也能够按照实际情状稍微调整,超过一半在实际工作中都有应用到的场景,那里仅作引用介绍,因为运用起来也很简单的。

/*!

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>迅雷看看</title>
<link rel=”stylesheet” href=”css/base.css”>
<link rel=”stylesheet” href=”css/index.css”>
<script src=”js/swfobject.js”></script>
</head>
<body>

选拔实践

为了印证这一个命有名的模特式的法力,我做了一个demo,以今日头条博客列表页来表明怎样行使那种命名格局。先来看博客列表页的结构:

亚洲必赢官网 3

亚洲必赢官网 4

可以看看这些列表页其实是用到了好多语义化的命名的css类的,假使要用面向属性的命名格局来定义,就会变成上面这几个样子:

亚洲必赢官网 5

实际效果如下:

亚洲必赢官网 6

连带源码可访问以下链接查看:

在上述这一个执行进度中,并不曾具备的样式都施用那种命名情势,主要的原由是然则的性质命名对无法对伪类或者伪元素举行很好的样式控制,而碰巧微博列表页中的每个链接的体制都不等同,所以不可以统一。那也正是面向属性的命名模式的一种限制处境。

* @名称:base.css

<div class=”w970 header”>
<div class=”logo fl”>
<embed src=”images/logo.swf”>
</div>
<div class=”search fl”>
<form action=””>
<input type=”text” name=”page1″ class=”page1″
value=”大梁十三钗”>
<input type=”submit” class=”page2″ value=”搜索”>
</form>
<p>
<a href=””>热播榜</a>
<a href=””>乡爱5结局</a>
<a href=””>我的老爹</a>
<a href=””>姨妈多鹤</a>
<a href=””>欧阳德</a>
<a href=””>龙门飞甲</a>
<a href=””>大冲锋</a>
</p>
</div>
<div class=”help fr”>
<a href=””>登录</a>
|
<a href=””>注册</a>
|
<a href=””>迅雷会员</a>
|
<a href=”” class=”subscribe”>订阅</a>

注意事项

虽说本文的目标是在爱抚那种面向属性的命名方式,可是你从文中的情节也得以看出,这种办法是有针对性的,前边一开始介绍的时候就说过:

动用面向属性的css命名,把那几个大家实际想不闻明字的,而且尚未须求起名字的,并且可以只用单一的css属性或者组合的单一css属性来讲述的片段,通通都用面向属性的css类来控制样式

利用这些办法的最大前提就是从未须求起名字,并且能够用整合的单一属性来叙述的内容,就可以那种格局来加快页面布局的做事。像前面应用实践介绍过的那种情景一样,当您需求般配伪类,伪元素或者背景图片的时候,就不太适合用这种措施。

在面向属性的命名形式不可能拔取的时候,有别的二种css的命名或者说协会措施可以动用:

1)语义化的命名,在整个页面,语义化的css命名依然不行获缺的一部分,越发是那些划分页面模块的,比如.header 
.footer
.logo等等,抽象公共样式或者国有组件的,如.dropdown,.btn,.tab等等。这几个是css模块化,代码重用的相比大的团伙单位,假如把它们也拆分了,会使得所有站点的css结构卓殊的扑朔迷离,那样的话还不如直接用style呢;

2)选择层级来定名,而且要多用直接子元素拔取器,尽管在张鑫旭的博客中不提议css有层级,但是有些时候假如不想命名,又不能用面向属性的命名方式来化解的宏图,可以考虑用层级来缓解,在bootstrap的源码中过多的css组件,比如nav,dropdown,tab等等,都是经过层级来决定的,一来是起到命名空间的功能,二来是缩减对层数较深的子孙元素爆发影响。然则层数也不可能太深,最好不用跨越3层,否则html结构变迁之后,就会潜移默化css代码的构造。

* @作用:1、重设浏览器默许样式

<a href=””>会员专区</a>
|
<a href=””>移动产品</a>
|
<a href=””>游戏</a>
|
<a href=””>帮助</a>
</div>

本文总结

正文紧倘使流传面向属性的css命名方法这种思想,由于它在本人骨子里工作中救助我压缩了不少不必要的css命名,所以自己特意写了那篇文章把它分享出去。这些里面也蕴涵了好多融洽在工作中发生的想法,不必然符合您自己的实际上须求,若是感兴趣的话,可以去研讨下张鑫旭的那2篇小说,相信您自己也可以统计出一部分属于自己的事物。感谢阅读:)

1 赞 3 收藏
评论

亚洲必赢官网 7

*      2、设置通用原子类

</div>

*/

<div class=”nav w968″>
<ul>
<li class=”cur”><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>
<li><a href=””>电视台</a></li>
</ul>
<ul class=”sub-nav fl”>
<li><a href=””>欧美大片</a></li>
<li><a href=””>经典大片</a></li>

/* 避免用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */

<li><a href=””>华语大片</a>

html {

亚洲必赢官网 8

background:white;

</li>
</ul>
<ul class=”user-nav fl”>
<li>我看过的<s></s></li>
<li>下载迅雷<s></s></li>
</ul>

color:black;

</div>

}

<div class=”main w970″>
<div class=”banner fl”>
<div><a href=””><img src=”” alt=””></a>
<p>“赵家班”首部悲情大戏《樱桃》开播 沈春阳挑衅傻娘角色
宋小宝(英文名:sòng xiǎo bǎo)颠覆化身“悲情男”(更新至08集)</p>
</div>
<ul>
<li><img src=”” alt=””></li>
<li><img src=”” alt=””></li>
<li><img src=”” alt=””></li>
<li><img src=”” alt=””></li>
<li><img src=”” alt=””></li>

/* 内外边距平日让各类浏览器样式的变现地点差异 */

<li>

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{

亚洲必赢官网 9

margin:0;

</li>

padding:0;

<li>

}

亚洲必赢官网 10

/* 要留意表单元素并不接二连三父级 font 的难题 */

</li>
<li>

body,button,input,select,textarea {

亚洲必赢官网 11

font:12px ‘\5b8b\4f53’,arial,sans-serif;

</li>
<li>

}

亚洲必赢官网 12

input,select,textarea {

</li>
<li>

font-size:100%;

亚洲必赢官网 13

}

</li>
<li>

/* 去掉 table cell 的边距并让其边重合 */

亚洲必赢官网 14

table {

</li>
<li>

border-collapse:collapse;

亚洲必赢官网 15

border-spacing:0;

</li>
<li style=”margin-right:0″>

}

亚洲必赢官网 16

/* ie bug:th 不继承 text-align */

</li>

th {

</ul>
</div>

text-align:inherit;

<div class=”banner-right fr “>
<ul class=”banner-right-nav”>
<li>全部</li>
<li class=”cur”>电影<s></s></li>
<li>电视剧<s></s></li>
<li>综艺</li>
<li>动漫</li>
<li>记录</li>
</ul>
<ol>
<li class=”top3″><strong>7.5<a href=”#”
class=”pic-link”>深宫谍影</a></strong><span>01</span><a
href=”#”>深宫谍影</a>更新至26集</li>
<li class=”top3″><strong>7.8<a href=”#”
class=”pic-link”>乡村爱情5</a></strong><span>02</span><a
href=”#”>乡村爱情5</a>44集全</li>
<li class=”top3″><strong>7.3<a href=”#”
class=”pic-link”>如意</a></strong><span>03</span><a
href=”#”>如意</a>更新至39集</li>
<li><strong>8.5<a href=”#”
class=”pic-link”>香江爱情故事</a></strong><span>04</span><a
href=”#”>上海爱情故事</a>39集全</li>
<li><strong>9.5<a href=”#”
class=”pic-link”>怪侠欧阳德</a></strong><span>05</span><a
href=”#”>怪侠欧阳德</a>69集全</li>
<li><strong>8.5<a href=”#”
class=”pic-link”>东京爱情故事</a></strong><span>06</span><a
href=”#”>巴黎爱情故事</a>39集全</li>
<li><strong>9.5<a href=”#”
class=”pic-link”>怪侠欧阳德</a></strong><span>07</span><a
href=”#”>怪侠欧阳德</a>69集全</li>
<li><strong>8.5<a href=”#”
class=”pic-link”>上海爱情故事</a></strong><span>08</span><a
href=”#”>巴黎爱情故事</a>39集全</li>
<li><strong>9.5<a href=”#”
class=”pic-link”>怪侠欧阳德</a></strong><span>09</span><a
href=”#”>怪侠欧阳德</a>69集全</li>
<li><strong>8.5<a href=”#”
class=”pic-link”>东京(Tokyo)爱情故事</a></strong><span>10</span><a
href=”#”>上海爱情故事</a>39集全</li>
</ol>
<ul class=”banner-right-bottom”>
<li><a
href=””>3.11日大地震周年祭:废墟如故触目</a></li>
<li><a
href=””>[揭秘]曝美一集体称可乐含致癌物!</a></li>
</ul>

}

</div>

/* 去除默许边框 */

</div>

fieldset,img {

  <!-- 分区一 start -->
<div class="section1 w968">
    <div class="hot">
        <h2>热门大片</h2>
        <div class="item">
            <a href="" class="img-link">![](images/section1/xianjingzhiqiao.jpg)画面唯美魔幻仙</a>
            <p><a href="">仙境之桥</a>(720P)<a href="" class="pic-link" title="仙境之桥">仙境之桥</a></p>
        </div>
        <div class="item">
            <a href="" class="img-link">![](images/section1/taosejinghun.jpg)诱惑欲望激烈碰</a>
            <p><a href="">桃色惊魂</a>(720P)<a href="" class="pic-link" title="桃色惊魂">桃色惊魂</a></p>
        </div>
        <dl>
            <dt><a href="">鬼域</a>(480P)</dt>
            <dd>获金像奖最佳视觉效果</dd>
            <dt><a href="">龙门飞甲</a>(数字商城)</dt>
            <dd>徐克3D武侠巨制</dd>
        </dl>
    </div>
    <div class="man">
        <h2>男性影院</h2>
        <div class="item">
            <a href="" class="img-link">![](images/section1/tianbengdilie.jpg)好莱坞灾难动作</a>
            <p><a href="">天崩地裂</a>(720P)<a href="" class="pic-link" title="天崩地裂">天崩地裂</a></p>
        </div>
        <div class="item">
            <a href="" class="img-link">![](images/section1/chinuotegong.jpg)性感特工床上杀</a>
            <p><a href="">赤裸特工</a>(720P)<a href="" class="pic-link" title="赤裸特工">赤裸特工</a></p>
        </div>
        <dl>
            <dt><a href="">一夜未了情</a>(720P)</dt>
            <dd>上床容易相爱难</dd>
            <dt><a href="">超级女特工</a>(720P)</dt>
            <dd>伟大的绝艳女战士</dd>
        </dl>
    </div>
    <div class="syn">
        <h2>同步卫视</h2>
        <div class="item">
            <a href="" class="img-link">![](images/section1/ruyi.jpg)未删减版大结</a>
            <p><a href="">如意(42集全)</a>(720P)<a href="" class="pic-link" title="如意(42集全)">如意(42集全)</a></p>
        </div>
        <div class="item">
            <a href="" class="img-link">![](images/section1/qianshanmuxue.jpg)莫禽兽无虐不欢</a>
            <p><a href="">千山暮雪</a>(720P)<a href="" class="pic-link" title="千山暮雪">千山暮雪</a></p>
        </div>
        <dl>
            <dt><a href="">泊车殿下</a>(至03集)</dt>
            <dd>台湾俊男美女热血暴力</dd>
            <dt><a href="">租个女友回家过年</a>(全)</dt>
            <dd>过年回家单身族挨不住</dd>
        </dl>
    </div>
    <div class="tvb">
        <h2>TVB剧场</h2>
        <div class="item">
            <a href="" class="img-link">![](images/section1/qianwangzhiwang.jpg)赌神四哥返上海</a>
            <p><a href="">千王之王重出江湖</a><a href="" class="pic-link" title="千王之王重出江湖">千王之王重出江湖</a></p>
        </div>
        <div class="item">
            <a href="" class="img-link">![](images/section1/laogongwansui.jpg)谢天华沟女湿身</a>
            <p><a href="">老公万岁</a>(20集全)<a href="" class="pic-link" title="老公万岁">老公万岁</a></p>
        </div>
        <dl>
            <dt><a href="">刑警</a>(30集全)</dt>
            <dd>港式口味高智商死亡罪案</dd>
            <dt><a href="">妙手仁心3</a>(40集全)</dt>
            <dd>林保怡携手黎姿解读医学</dd>
        </dl>
    </div>
    <div class="overseas">
        <h2>海外剧场</h2>
        <div class="item">
            <a href="" class="img-link">![](images/section1/nvershihuaer.jpg)俊男美女三角恋</a>
            <p><a href="">女儿是花儿</a>(至70集)<a href="" class="pic-link" title="女儿是花儿">女儿是花儿</a></p>
        </div>
        <div class="item">
            <a href="" class="img-link">![](images/section1/taiyangdexinniang.jpg)诱惑欲望激烈碰</a>
            <p><a href="">太阳的新娘</a>(至86集)<a href="" class="pic-link" title="太阳的新娘">太阳的新娘</a></p>
        </div>
        <dl>
            <dt><a href="">极道鲜师</a>(33集全)</dt>
            <dd>真人版麻辣鲜师热血励志</dd>
            <dt><a href="">要帅气的生活</a>(至45集)</dt>
            <dd>剩女“脱光”记</dd>
        </dl>
    </div>
    <div class="ent">
        <h2>人气综艺</h2>
        <div class="item">
            <a href="" class="img-link">![](images/section1/feichengwurao.jpg)汉服美男穿越求</a>
            <p><a href="">非诚勿扰</a>(02-19期)<a href="" class="pic-link" title="非诚勿扰">非诚勿扰</a></p>
        </div>
        <div class="item">
            <a href="" class="img-link">![](images/section1/kuailedabenying.jpg)何炅遭美女投怀</a>
            <p><a href="">快乐大本营</a>(02-18期)<a href="" class="pic-link" title="快乐大本营">快乐大本营</a></p>
        </div>
        <dl>
            <dt><a href="">本山快乐营</a>(02-22期)</dt>
            <dd>宋小宝精彩片段集锦</dd>
            <dt><a href="">英国达人秀</a>(18集全)</dt>
            <dd>脱衣舞娘天籁嗓音</dd>
        </dl>
    </div>
</div>
<!-- 分区一 end -->

  <!-- 猜你喜欢看start -->
<div class="guess w968">
    <h2>猜您喜欢看</h2>
    <div class="guess-left fl">
        <div class="guess-change">
            <p class="fl">根据您的观看记录,为您推荐的,您还可以点击换一组</p>
            <ol class="fl">
                <li class="cur"></li>
                <li></li>
                <li></li>
            </ol>
            <ul class="fl">
                <li class="left-btn"></li>
                <li class="right-btn"></li>
            </ul>
        </div>
        <ul class="guess-content">
            <li>
                <a href="">![](images/guess/1.jpg)</a>
                <p><a href="">强奸之恋</a></p>
                <p>三角恋引起的强奸</p>
            </li>
            <li>
                <a href="">![](images/guess/2.jpg)</a>
                <p><a href="">宫锁珠帘</a></p>
                <p>杜淳袁珊珊虐心恋</p>
            </li>
            <li>
                <a href="">![](images/guess/3.jpg)</a>
                <p><a href="">双枪李向阳之再战松</a></p>
                <p>张嘉译演绎抗战硬汉</p>
            </li>
            <li>
                <a href="">![](images/guess/4.jpg)</a>
                <p><a href="">悬崖</a></p>
                <p>张嘉译诠释受虐特工</p>
            </li>
            <li style="margin:0">
                <a href="">![](images/guess/5.jpg)</a>
                <p><a href="">赤裸特工</a></p>
                <p>神秘性感女特</p>
            </li>
        </ul>
    </div>
    <div class="guess-right fr">
        <div class="guess-label">
            <h3>您可能感兴趣的标签</h3>
            <p>
                <a href="">动作</a> <a href="">喜剧</a> <a href="">恐怖</a> <a href="">爱情</a> <a href="">周星驰</a> <a href="">甄子丹</a>
            </p>
        </div>
        <div class="clear-guess">
            <h3>清空您的观看记录</h3>
            <ul>
                <li><a href="">本山快乐营 2012-02-23宋小宝搞笑</a></li>
                <li><a href="">特效化妆师大对决第二季</a></li>
                <li><a href="">与蛇共舞 2011-07-19与蛇共舞</a></li>
            </ul>
        </div>
    </div>
    <del>关闭</del>
</div>
<!-- 猜你喜欢看end -->

 <!-- 今日快报部分start -->
<div class="section2 w968">
    <div class="section2-left fl">
        <div class="section2-nav">
            <ul>
                <li class="cur">今日快报</li>
                <li>娱乐头条</li>
                <li>搞笑视频</li>
                <li>看看原创</li>
            </ul>
            <a href="">北京人均GDP接近富裕国家引质疑 >>></a>
        </div>
        <ul class="img-ul">
            <li>
                <a href="" class="img-link">![](images/section2/1.jpg)造成至少3人死亡</a>
                <p><a href="">加拿大一列火车出轨</a></p>
            </li>
            <li>
                <a href="" class="img-link">![](images/section2/2.jpg)造成至少3人死亡</a>
                <p><a href="">加拿大一列火车出轨</a></p>
            </li>
            <li>
                <a href="" class="img-link">![](images/section2/3.jpg)造成至少3人死亡</a>
                <p><a href="">加拿大一列火车出轨</a></p>
            </li>
            <li>
                <a href="" class="img-link">![](images/section2/4.jpg)造成至少3人死亡</a>
                <p><a href="">加拿大一列火车出轨</a></p>
            </li>
            <li>
                <a href="" class="img-link">![](images/section2/5.jpg)造成至少3人死亡</a>
                <p><a href="">加拿大一列火车出轨</a></p>
            </li>
        </ul>
        <ul class="txt-ul">
            <li><a href="">东京一户全家饿死</a></li>
            <li><a href="">西伯利亚7.0级地震</a></li>
            <li><a href="">东京一户全家饿死</a></li>
            <li><a href="">西伯利亚7.0级地震</a></li>
            <li><a href="">东京一户全家饿死</a></li>
            <li><a href="">西伯利亚7.0级地震</a></li>
            <li><a href="">东京一户全家饿死</a></li>
            <li><a href="">西伯利亚7.0级地震</a></li>
            <li><a href="">东京一户全家饿死</a></li>
            <li><a href="">西伯利亚7.0级地震</a></li>
        </ul>
    </div>
    <div class="section2-right fr">
        <h3>本届影帝让·杜雅尔受访</h3>
        <div id="section2-video"></div>
        <script>
            var s1 = new SWFObject("player.swf","myflv","246","172","9","#FFFFFF");
            s1.addParam("allowfullscreen","true");
            s1.addParam("allowscriptaccess","always");
            s1.addParam("flashvars","file=sz.flv");
            s1.write("section2-video");
        </script>
        <p><a href="">汽柴油价今起每吨涨600元</a> <a href="">详细>></a></p>
    </div>
</div>
<!-- 今日快报部分end -->

 <!-- 今日部分 start -->
<div class="today w968">
    <div class="today-section">
        <h2>今日电视剧</h2>
        <p class="today-title"><a href="">少年四大名捕</a> (TVB四小生破案追凶) | <a href="">回家的诱惑</a> (绝望主妇还击妖娆小三) | <a href="">掩护</a> (陆毅刘涛密码传情) <a href="">更多</a></p>
        <div class="cb"></div>
        <ul>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv1.jpg)更新至05集</a>
                <p><a href="">泊车殿下</a><a href="" class="pic-link" title="泊车殿下">泊车殿下</a></p>
                <p>台湾黑帮爱情悲剧</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv2.jpg)更新至10集</a>
                <p><a href="">华丽的挑战</a><a href="" class="pic-link" title="华丽的挑战">华丽的挑战</a></p>
                <p>中韩联手明星制造</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv3.jpg)26集全</a>
                <p><a href="">双枪李向阳</a><a href="" class="pic-link" title="双枪李向阳">双枪李向阳</a></p>
                <p>张嘉译智勇破敌</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv4.jpg)42集全</a>
                <p><a href="">如意</a><a href="" class="pic-link" title="如意">如意</a></p>
                <p>杨幂刘恺威定情作</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv5.jpg)34集全</a>
                <p><a href="">海狼行动</a><a href="" class="pic-link" title="海狼行动">海狼行动</a></p>
                <p>杀手百变冷酷无情</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv6.jpg)69集全</a>
                <p><a href="">怪侠欧阳德</a><a href="" class="pic-link" title="怪侠欧阳德">怪侠欧阳德</a></p>
                <p>杀手百变冷酷无情</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv7.jpg)39集全</a>
                <p><a href="">北京爱情故事</a><a href="" class="pic-link" title="北京爱情故事">北京爱情故事</a></p>
                <p>解读都市爱情真谛</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/tv8.jpg)3月4日开放内测</a>
                <p><a href="">功夫英雄</a><a href="" class="pic-link" title="功夫英雄">功夫英雄</a></p>
                <p>下载赢取Iphone4s</p>
            </li>
        </ul>
    </div>
    <div class="cb"></div>
    <div class="today-section half fl">
        <h2>今日电影</h2>
        <p class="today-title"><a href="">《艺术家》获最佳影片</a> (第84届奥斯卡) <a href="">更多</a></p>
        <div class="cb"></div>
        <ul>
            <li class="item">
                <a href="" class="img-link">![](images/today/movie1.jpg)水怪/冒险</a>
                <p><a href="">深湖巨兽</a>(720P)<a href="" class="pic-link" title="深湖巨兽">深湖巨兽</a></p>
                <p>尼斯湖水怪再现</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/movie2.jpg)穿越/冒险</a>
                <p><a href="">时空穿越者</a>(720P)<a href="" class="pic-link" title="时空穿越者">时空穿越者</a></p>
                <p>奇幻穿越冒险</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/movie3.jpg)喜剧/爱情</a>
                <p><a href="">花好月圆</a>(720P)<a href="" class="pic-link" title="花好月圆">花好月圆</a></p>
                <p>杨千嬅变最臭公主</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/movie4.jpg)喜剧/魔法</a>
                <p><a href="">开心魔法</a>(720P)<a href="" class="pic-link" title="开心魔法">开心魔法</a></p>
                <p>古天乐帅气魔法</p>
            </li>
        </ul>
    </div>
    <div class="today-section half fl">
        <h2>今日卡通</h2>
        <p class="today-title"><a href="">《艺术家》获最佳影片</a> (第84届奥斯卡) <a href="">更多</a></p>
        <div class="cb"></div>
        <ul>
            <li class="item">
                <a href="" class="img-link">![](images/today/cartoon1.jpg)更新至09集</a>
                <p><a href="">创圣之大天使</a>(720P)<a href="" class="pic-link" title="创圣之大天使">创圣之大天使</a></p>
                <p>阿姨又来洗铁路</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/cartoon2.jpg)更新至494集</a>
                <p><a href="">哆啦A梦</a>(720P)<a href="" class="pic-link" title="哆啦A梦">哆啦A梦</a></p>
                <p>不灭的经典机器猫</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/cartoon3.jpg)更新至716集</a>
                <p><a href="">蜡笔小新</a>(720P)<a href="" class="pic-link" title="蜡笔小新">蜡笔小新</a></p>
                <p>史上最头疼小孩</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/cartoon4.jpg)157集全</a>
                <p><a href="">倒霉熊</a>(720P)<a href="" class="pic-link" title="倒霉熊">倒霉熊</a></p>
                <p>幽默熊再次搞笑</p>
            </li>
        </ul>
    </div>
    <div class="cb"></div>
    <div class="today-section half fl">
        <h2>今日综艺</h2>
        <p class="today-title"><a href="">《艺术家》获最佳影片</a> (第84届奥斯卡) <a href="">更多</a></p>
        <div class="cb"></div>
        <ul>
            <li class="item">
                <a href="" class="img-link">![](images/today/zy1.jpg)2012-02-23期</a>
                <p><a href="">美国摔角WWE</a><a href="" class="pic-link" title="美国摔角WWE">美国摔角WWE</a></p>
                <p>巨石强森火爆精选</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/zy2.jpg)2012-02-26期</a>
                <p><a href="">非诚勿扰</a><a href="" class="pic-link" title="非诚勿扰">非诚勿扰</a></p>
                <p>气质女遇真情告白</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/zy3.jpg)2012-02-25期</a>
                <p><a href="">特效化妆对决</a><a href="" class="pic-link" title="特效化妆对决">特效化妆对决</a></p>
                <p>超恐怖变异外星人</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/zy4.jpg)2012-02-25期</a>
                <p><a href="">快乐大本营</a><a href="" class="pic-link" title="快乐大本营">快乐大本营</a></p>
                <p>张杰秀求婚道具</p>
            </li>
        </ul>
    </div>
    <div class="today-section half fl">
        <h2>今日纪录片</h2>
        <p class="today-title"><a href="">《艺术家》获最佳影片</a> (第84届奥斯卡) <a href="">更多</a></p>
        <div class="cb"></div>
        <ul>
            <li class="item">
                <a href="" class="img-link">![](images/today/record1.jpg)少帅张学良</a>
                <p><a href="">解密西安事变</a><a href="" class="pic-link" title="解密西安事变">解密西安事变</a></p>
                <p>蒋介石被捉全过程</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/record2.jpg)美航母再示威</a>
                <p><a href="">战云波斯湾</a><a href="" class="pic-link" title="战云波斯湾">战云波斯湾</a></p>
                <p>全面解读美伊局势</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/record3.jpg)活熊取胆</a>
                <p><a href="">被囚禁的熊</a><a href="" class="pic-link" title="被囚禁的熊">被囚禁的熊</a></p>
                <p>拯救黑熊48小时</p>
            </li>
            <li class="item">
                <a href="" class="img-link">![](images/today/record4.jpg)饮食游乐场</a>
                <p><a href="">好食库</a><a href="" class="pic-link" title="好食库">好食库</a></p>
                <p>健康大管家</p>
            </li>
        </ul>
    </div>
    <div class="cb"></div>
</div>
<!-- 今日部分 end -->

 <!-- 电影 start -->
<div class="movie w968">
    <h2>电影</h2>
    <div class="movie-left fl">
        <dl>
            <dt>
                <a href="#">![](images/movie/recommend.jpg)</a>
                <p><a href="">疯魔美女</a> (720P)</p>
            </dt>
            <dd>导演:<a href="">Piraphan Laoyont</a></dd>
            <dd>主演:<a href="">Chidjan Rujiphun</a>  <a href="">Ocha</a></dd>
            <dd>类型:<a href="">罪案</a> <a href="">恐怖</a>  年份:<a href="">2007</a></dd>
            <dd>医生与七个正妹护士,贩卖死人尸体给黑市获取暴利,报应临头。<a href="">详细</a></dd>
        </dl>
        <h3>用户满意度</h3>
        <div class="satisfy">
            <ul>
                <li class="cur">动作指数</li>
                <li>喜剧指数</li>
                <li>爱情指数</li>
                <li>科幻指数</li>
                <li class="last">恐怖指数</li>
            </ul>
            <ol>
                <li>01.<a href="#">赎命24小时(美国)</a></li>
                <li>02.<a href="#">女拳霸(泰国)</a></li>
                <li>03.<a href="#">双重身份(英国)</a></li>
                <li>04.<a href="#">越空魔龙(美国)</a></li>
                <li>05.<a href="#">天军(韩国)</a></li>
            </ol>
        </div>
        <h3>即将上映</h3>
        <ul class="going-on">
            <li><a href="">3.3《那些年,我们一起追的女孩》</a></li>
            <li><a href="">3.4《魔法奇幻秀》好莱坞瑰丽梦镜</a></li>
            <li><a href="">3.6《深海之战》韩国3D恐怖异兽</a></li>
        </ul>
    </div>
    <div class="movie-center fl">
        <div class="movie-center-title">
            <ul>
                <li class="cur">热门大片</li>
                <li>动作</li>
                <li>欧美</li>
                <li>爱情</li>
                <li>喜剧</li>
                <li>猎艳</li>
            </ul>
            <a href="">更多</a>
        </div>
        <ul class="movie-center-content">
            <li>
                <a href="" class="img-link">![](images/movie/1.jpg)</a>
                <p><a href="">大魔术师</a><a href="" class="pic-link" title="大魔术师">大魔术师</a></p>
                <p>闫妮沐浴露美腿</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/2.jpg)</a>
                <p><a href="">开心魔法</a><a href="" class="pic-link" title="大魔术师">开心魔法</a></p>
                <p>吴京古天乐斗法</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/3.jpg)</a>
                <p><a href="">喜羊羊灰太狼4</a><a href="" class="pic-link" title="喜羊羊灰太狼4">喜羊羊灰太狼4</a></p>
                <p>欧弟、周笔畅献声</p>
            </li>
            <li class="last">
                <a href="" class="img-link">![](images/movie/4.jpg)</a>
                <p><a href="">危狱惊情</a><a href="" class="pic-link" title="危狱惊情">危狱惊情</a></p>
                <p>罪犯假释使美人计</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/5.jpg)</a>
                <p><a href="">血之猎手</a><a href="" class="pic-link" title="血之猎手">血之猎手</a></p>
                <p>吸血鬼动作大片</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/6.jpg)</a>
                <p><a href="">大闹天宫3D</a><a href="" class="pic-link" title="大闹天宫3D">大闹天宫3D</a></p>
                <p>大头版哪吒很雷人</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/7.jpg)</a>
                <p><a href="">出水芙蓉</a><a href="" class="pic-link" title="出水芙蓉">出水芙蓉</a></p>
                <p>阿娇泳池湿身诱惑</p>
            </li>
            <li class="last">
                <a href="" class="img-link">![](images/movie/8.jpg)</a>
                <p><a href="">罪恶之城</a><a href="" class="pic-link" title="罪恶之城">罪恶之城</a></p>
                <p>闫妮沐浴露美腿</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/9.jpg)</a>
                <p><a href="">转山</a><a href="" class="pic-link" title="转山">转山</a></p>
                <p>单车骑行丽江西藏</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/10.jpg)</a>
                <p><a href="">伊莎贝拉</a><a href="" class="pic-link" title="伊莎贝拉">伊莎贝拉</a></p>
                <p>彭浩翔黑色幽默片</p>
            </li>
            <li>
                <a href="" class="img-link">![](images/movie/11.jpg)</a>
                <p><a href="">半支烟</a><a href="" class="pic-link" title="半支烟">半支烟</a></p>
                <p>舒淇演香艳舞厅女</p>
            </li>
            <li class="last">
                <a href="" class="img-link">![](images/movie/12.jpg)</a>
                <p><a href="">城市猎人</a><a href="" class="pic-link" title="城市猎人">城市猎人</a></p>
                <p>成龙王祖贤动作片</p>
            </li>
        </ul>
    </div>
    <div class="movie-right fr">
        <div class="movie-category">
            <h3>电影分类</h3>
            <dl>
                <dt>类型</dt>
                <dd><a href="">动作</a></dd>
                <dd><a href="">喜剧</a></dd>
                <dd><a href="">爱情</a></dd>
                <dd><a href="">科幻</a></dd>
                <dd><a href="">灾难</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">动作</a></dd>
                <dd><a href="">欧美大片</a></dd>
                <dd><a href="">全部</a></dd>
            </dl>
            <div class="cb"></div>
            <dl>
                <dt>明星</dt>
                <dd><a href="">周星驰</a></dd>
                <dd><a href="">周星驰</a></dd>
                <dd><a href="">周星驰</a></dd>
                <dd><a href="">成龙</a></dd>
                <dd><a href="">周星驰</a></dd>
                <dd><a href="">周星驰</a></dd>
                <dd><a href="">葛优</a></dd>
                <dd><a href="">周星驰</a></dd>
                <dd><a href="">姜文</a></dd>
            </dl>
            <dl>
                <dt>地区</dt>
                <dd><a href="">内地</a></dd>
                <dd><a href="">香港</a></dd>
                <dd><a href="">台湾</a></dd>
                <dd><a href="">日本</a></dd>
                <dd><a href="">美国</a></dd>
            </dl>
            <dl>
                <dt>年份</dt>
                <dd><a href="">2016</a></dd>
                <dd><a href="">2015</a></dd>
                <dd><a href="">2014</a></dd>
                <dd><a href="">2013</a></dd>
            </dl>
            <p><a href="">评分最高>></a><a href="">最近更新>></a></p>
        </div>
        <div class="rank">
            <div class="rank-title">
                <h3>电影排行榜</h3>
                <ul>
                    <li class="cur">昨天</li>
                    <li>本周</li>
                    <li>本月</li>
                </ul>
            </div>
            <ol>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>01<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>02<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>03<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>04<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>05<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>06<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>07<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>08<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>09<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
                <li><strong>6.5<a href="" class="pic-link">疯魔美女</a></strong>10<a href="">疯魔美女</a>女护士遭虐杀/720P</li>
            </ol>
        </div>
        <div class="movie-ad">
            <a href="">![](images/ad/movie_ad.jpg)</a>
        </div>
    </div>
</div>
<!-- 电影 end -->

border:none;

<div class=”co-work w968″>
<h2>合营专区</h2>
<div class=”co-work-left fl”>
<ul class=”img-ul”>
<li>

}

<a href=””>

/* ie6 7 8(q) bug 彰显为行内表现 */

亚洲必赢官网 17

iframe {

</a>
<p><a href=””>把乐带回家</a></p>
</li>
<li>

display:block;

<a href=””>

}

亚洲必赢官网 18

/* 去掉列表前的标识,li 会继承 */

</a>
<p><a href=””>把乐带回家</a></p>
</li>
<li>
<a href=””>

ol,ul {

亚洲必赢官网 19

list-style:none;

</a>
<p><a href=””>把乐带回家</a></p>

}

</li>
<li>

/* 对齐是排版最要害的要素,别让什么都居中 */

<a href=””>

caption,th {

亚洲必赢官网 20

text-align:left;

</a>
<p><a href=””>把乐带回家</a></p>
</li>
</ul>
<div class=”cb”></div>
<ul class=”txt-ul”>
<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>
<li><a href=””>东方卫视</a></li>
<li class=”last”><a href=””>新加坡卫视</a></li>
</ul>
<div class=”cb”></div>
<ul class=”txt-ul”>
<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>
<li><a href=””>布里斯班卫视</a></li>
<li class=”last”><a href=””>西藏卫视</a></li>
</ul>
</div>
<div class=”co-work-right fr”>
<h3>媒体关切</h3>
<ul>
<li><a href=””>《LOVE》入围柏林(Berlin)影展
迅雷看看独家版权</a></li>
<li><a href=””>《LOVE》入围柏林(Berlin)影展
迅雷看看独家版权</a></li>
<li><a href=””>《LOVE》入围柏林(Berlin)影展
迅雷看看独家版权</a></li>
<li><a href=””>摄像网站好剧爆棚
迅雷看看细节大胜</a></li>
<li><a href=””>视频网站好剧爆棚
迅雷看看细节大捷</a></li>
<li><a href=””>视频网站好剧爆棚
迅雷看看细节大败</a></li>
</ul>
</div>
</div>

/* 来自yahoo,让标题都自定义,适应八个系统应用 */

<!-- 页脚部分start -->
<div class="footer w968">
    <fieldset>
        <form action="">
            <input type="text" name="q" class="q" value="碟中谍4">
            <input type="submit" class="search-btn" value="搜索"></form>
        <ul>
            <li><a href="">今日更新976档节目</a></li>
            <li><a href="">蚁族奋斗结局</a></li>
            <li><a href="">新西游结局</a></li>
        </ul>
    </fieldset>
    <dl>
        <dt>首页</dt>
        <dd><a href="">电影</a></dd>
        <dd><a href="">电视剧</a></dd>
        <dd><a href="">综艺</a></dd>
        <dd><a href="">动漫</a></dd>
        <dd><a href="">资讯</a></dd>
        <dd><a href="">纪录片</a></dd>
        <dd><a href="">娱乐</a></dd>
        <dd><a href="">游戏</a></dd>
        <dd><a href="">旅游</a></dd>
        <dd><a href="">汽车</a></dd>
        <dd><a href="">游戏</a></dd>
        <dd><a href="">电视台</a></dd>
        <dd><a href="">会员</a></dd>
    </dl>
    <dl class="category">
        <dt>分类</dt>
        <dd><a href="">动作</a></dd>
        <dd><a href="">内地</a></dd>
        <dd><a href="">爱情</a></dd>
        <dd><a href="">台湾</a></dd>
        <dd><a href="">灾难</a></dd>
        <dd><a href="">恐怖</a></dd>
        <dd><a href="">悬疑</a></dd>
        <dd><a href="">魔幻</a></dd>
        <dd><a href="">战争</a></dd>
        <dd><a href="">罪案</a></dd>
        <dd><a href="">香港</a></dd>
        <dd><a href="">动画</a></dd>
        <dd><a href="">伦理</a></dd>
        <dd><a href="">记录</a></dd>
        <dd><a href="">剧情</a></dd>
    </dl>
    <dl class="app">
        <dt>APP</dt>
        <dd>迅雷看看 for <a href="">iPhone</a> |</dd>
        <dd><a href="">iPad</a> |</dd>
        <dd><a href="">Android</a></dd>
        <dd><a href="">迅雷7</a></dd>
        <dd><a href="">迅雷看看播放器</a></dd>
        <dd><a href="">手机助手</a></dd>
    </dl>
    <dl class="support">
        <dt>支持</dt>
        <dd><a href="">客服中心</a></dd>
        <dd><a href="">帮助中心</a></dd>
    </dl>
    <dl class="about-us">
        <dt>分类</dt>
        <dd><a href="">关于迅雷</a></dd>
        <dd><a href="">产品中心</a></dd>
        <dd><a href="">业务体系</a></dd>
        <dd><a href="">企业文化</a></dd>
        <dd><a href="">加入迅雷</a></dd>
        <dd><a href="">商务合作</a></dd>
        <dd><a href="">投资者关系</a></dd>
    </dl>

    <div class="cb"></div>
</div>
<!-- 页脚部分end -->

h1,h2,h3,h4,h5,h6 {

</body>
</html>

font-size:100%;

css部分

font-weight:500;

@charset “utf-8”;

}

/公共部分/
body{
font-family:”\5B8B\4F53″;
font-size:12px;
color:#aaaaaa;
}
a{
color:#3d3d3d;
font-size:14px;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.w970{
width:970px;
margin:0 auto;
}
.w968{
width:968px;
margin:0 auto;
border:1px solid #dddddd;
}

/* 统一上标和下标 */

/头顶部分 start/
.header{
height:108px;
}
.logo{
width:290px;
height:108px;
}
.logo embed{
width:290px;
height:108px;
}
.search{
width:400px;
height:88px;
padding-top:20px;
}
.search form{
width:394px;
height:27px;
border:3px solid #eeeeee;
}
.page1{
width:320px;
height:25px;
亚洲必赢官网 ,line-height:25px;
border:1px solid #babebf;
border-right:0 none;
outline:none;
color:#999999;
padding-left:5px;
float:left;
}
.page2{
width:68px;
height:27px;
background:url(..headerpage.png) 0px -36px;
outline:none;
border:0 none;
color:white;
font-size:14px;
font-weight:bold;
float:left;
}
.search p{
margin-top:9px;
}
.search p a{
color:#999999;
font-size:12px;
margin:0 3px;
}
.help{
width:280px;
height:68px;
text-align: right;
padding-top:40px;
color:#e6e6e6;
line-height:20px;
}
.help a{
font-size:12px;
color:#999999;
}
.subscribe{
background:url(..y.png) no-repeat 0 1px;
padding-left:15px;
}
/头顶部分 end/

sub,sup {

/导航部分 start/
.nav{
height:35px;
line-height:35px;
}
.nav li{
float:left;
display:inline;
}
.main-nav li{
padding:0 10px;
}
.main-nav a:hover{
color:#0081cc;
}
.main-nav .cur a{
color:#0081cc;
font-weight:bold;
}

font-size:75%;

.sub-nav{
margin-left:10px;
background:url(..subnav_bg.png) no-repeat 0 7px;
}
.sub-nav li{
padding:0 11px;
position:relative;
}
.sub-nav a{
font-size:12px;
}
.sub-nav img{
position:absolute;
top:0px;
left:44px;
}

line-height:0;

.user-nav{
margin-left:57px;
color:#666666;
}
.user-nav li{
position:relative;
margin-right:20px;
}
.user-nav s{
width:5px;
height:3px;
background:url(‘..headerpage.png’) 0 -64px;
position:absolute;
right:-9px;
top:16px;
overflow:hidden;/防止ie6下盒子小于13px的包容性难题/
}
/导航部分 end/

position:relative;

/宗旨广告部分 start/
.main{
height:365px;
margin-top:10px;
background-color: #000000;
padding:8px 0 7px 0;
}
.banner{
width:740px;
height:365px;
}
.banner div{
width:740px;
height:310px;
margin-bottom:8px;
position:relative;
}
.banner div img{
width:740px;
height:310px;
}
.banner div p{
width:740px;
height:33px;
line-height:33px;
background-color: #000;
position:absolute;
left:0;
bottom:0;
font-size:14px;
color:#fff;
text-indent:10px;
opacity:0.5;
filter:alpha(opacity=50); /IE6 IE7
IE8下的写法,是透过滤镜落成的。取值是离开100的数量级
/
}
.banner ul{

vertical-align:baseline;

}
.banner li{
width:56px;
height:45px;
float:left;
display:inline;
padding:1px;
background:url(..rank.png) -228px -52px;
margin-right:4px;
cursor:pointer;
}
.banner li.cur{
padding-top:5px;
margin-top:-4px;
background-position:-228px 0;
}
.banner ul img{
width:56px;
height:45px;
}

}

.banner-right{
border:1px solid #393939;
width:217px;
height:353px;
background:url(..rank.png);
padding:10px 5px 0;
}
.banner-right-nav{
width:210px;
height:21px;
border-left:1px solid #545454;
border-top:1px solid #545454;
margin:0 auto;
}
.banner-right-nav li{
height:20px;
line-height:20px;
padding:0 4px;
border-right:1px solid #545454;
border-bottom:1px solid #545454;
float:left;
position:relative;
color:#666666;
}
.banner-right-nav li s{
display:none;
}
.banner-right-nav li.cur{
background-color:#6f6f6f;
border-bottom:1px solid #6f6f6f;
color:#fff;
}
.banner-right-nav li.cur s{
display:block;
width:5px;
height:3px;
background:url(..rank.png) -248px -132px;
position:absolute;
left:50%;
margin-left:-3px;
bottom:-4px;
}
.banner-right ol{
margin-top:5px;
color:#666666;
}
.banner-right ol li{
height:27px;
line-height:27px;
}
.banner-right ol span{
display:inline-block;
width:19px;
height:14px;
line-height:14px;
border:1px solid #4D4D4D;
text-align: center;
}
.banner-right .top3 span{
background:#29b6e9;
color:white;
font-weight:bold;
}
.banner-right ol a{
color:#bfbfbf;
font-size:12px;
margin-left:4px;
margin-right:5px;
}
.banner-right ol strong{
float:right;
}
.banner-right .pic-link{
display:inline-block;
width:8px;
height:11px;
line-height:11px;
background:url(..rank.png) -237px -99px;
text-indent:-99em;
overflow:hidden;
margin-right:0;
margin-left:4px;
}
.banner-right-bottom{
margin-top:7px;
}
.banner-right-bottom li{
background:url(..rank.png) no-repeat -287px -108px;
padding-left:9px;
height:20px;
line-height:20px;
}
.banner-right-bottom li a{
color:#df7e0d;
font-size:12px;
}
/重点广告部分 end/

sup {

/分区一start/
.section1{
height:438px;
margin-top:10px;
border-left:1px solid #dddddd;
border-bottom:1px solid #dddddd;
}
.section1 .hot{
height:435px;
width:141px;
padding:0 10px;
border-top:3px solid #e188c2;
border-right:1px solid #dddddd;
float:left;
}
.section1 .hot h2{
color:#e188cd;
}
.section1 .man{
height:435px;
width:141px;
padding:0 10px;
border-top:3px solid #879ac5;
border-right:1px solid #dddddd;
float:left;
}
.section1 .man h2{
color:#597398;
}
.section1 .syn{
height:435px;
width:140px;
padding:0 10px;
border-top:3px solid #a6a6a6;
border-right:1px solid #dddddd;
float:left;
}
.section1 .syn h2{
color:#7777a1;
}
.section1 .tvb{
height:435px;
width:140px;
padding:0 10px;
border-top:3px solid #7ec0da;
border-right:1px solid #dddddd;
float:left;
}
.section1 .tvb h2{
color:#8d99c5;
}
.section1 .overseas{
height:435px;
width:140px;
padding:0 10px;
border-top:3px solid #e18786;
border-right:1px solid #dddddd;
float:left;
}
.section1 .overseas h2{
color:#d83438;
}
.section1 .ent{
height:435px;
width:141px;
padding:0 10px;
border-top:3px solid #e4cd6f;
float:left;
}
.section1 .ent h2{
color:#c69067;
}
.section1 h2{
height:47px;
line-height:47px;
font-size:14px;
font-weight:bold;
text-align: center;
}
.item{

top:-0.5em;

}
.item .img-link{
width:140px;
height:100px;
display:block;
position:relative;
}
.item .img-link img{
border:1px solid #eeeeee;
padding:1px;
}
.img-link span{
font-size:12px;
color:#c1c2bd;
width:100px;
height:20px;
line-height:20px;
text-align: right;
background:url(..update.png);
position:absolute;
right:2px;
bottom:2px;
}
.item p{
width:140px;
padding-top:4px;
padding-bottom:12px;
position:relative;
}
.pic-link{
width:8px;
height:10px;
background:url(..rank.png) -237px -100px;
text-indent: -99em;
overflow:hidden;
position:absolute;
right:0;
top:8px;
}
.section1 dl{
border-top:1px dashed #dddddd;
padding-top:22px;
}
.section1 dt{
height:24px;
}
.section1 dd{
height:20px;
}
/分区一end/

}

/猜你喜爱看start/
.guess{
height:168px;
margin-top:10px;
position:relative;
}
.guess h2{
font-size:16px;
font-weight:bold;
font-family:’Microsoft Yahei’;
color:#000;
position:absolute;
left:10px;
top:10px;
}
.guess del{
width:42px;
height:19px;
line-height:19px;
padding-left:6px;
background: url(..rank.png) -228px -306px;
text-decoration: none;
color:#3d3d3d;
cursor:pointer;
position:absolute;
right:0;
top:0;
}
.guess-left{
width:710px;
height:168px;
}
.guess-right{
margin-right:10px;
width:220px;
height:168px;
}

sub {

.guess-change{
padding-top:15px;
float:right;
display:inline;
}
.guess-change p{
color:#666666;
}
.guess-change li{
cursor:pointer;
float:left;
}
.guess-change ol{
margin-top:4px;
margin-left:6px;
}
.guess-change ol li{
width:6px;
height:6px;
background:url(‘..rank.png’) -228px -290px;
margin-right:6px;
overflow:hidden;
float:left;
display:inline;
}
.guess-change ol li.cur{
background-position:-228px -299px;
}
.guess-change ul{

bottom:-0.25em;

}
.guess-change ul li{
width:24px;
height:15px;
background:url(..rank.png) -235px -290px;
float:left;
display:inline;
}
.guess-change ul li.right-btn{
background-position:-258px -290px;
}
.guess-content{
margin-top:40px;
margin-left:10px;
}
.guess-content li{
width:115px;
margin-right:31px;
float:left;
display:inline;
}
.guess-content img{
margin-bottom:8px;
}
.guess-content p{
text-align: center;
height:21px;
line-height:21px;
color:#666666;
}
.guess-content p a{
font-size:12px;
}
.guess-label{
padding-top:15px;
}
.guess-right h3{
color:#666666;
font-weight:bold;
}
.guess-label p{
margin-top:5px;
}
.guess-label p a{
font-size:12px;
}
.clear-guess{
margin-top:11px;
padding-top:14px;
border-top:1px dashed #dddddd;
border-bottom:1px dashed #dddddd;
}
.clear-guess ul{
padding-top:5px;
padding-bottom:8px;
}
.clear-guess li{
line-height:20px;
}
.clear-guess li a{
font-size:12px;
}
/猜你喜欢看end/

}

/后日快报部分start/
.section2{
margin-top:10px;
height:238px;
}
.section2-left{
width:716px;
height:238px;
}
.section2-right{
width:246px;
height:235px;
padding:3px 3px 0 0;
}

/* 让链接在 hover 状态下显得下划线 */

.section2-nav{
height:36px;
line-height:36px;
border-bottom:1px solid #dddddd;
border-right:1px solid #dddddd;
position:relative;
}
.section2-nav li{
width:102px;
border-right:1px solid #ddd;
float:left;
text-align: center;
color:#5d5d5d;
font-size:16px;
font-family:”Microsoft Yahei”;
}
.section2-nav li.cur{
font-weight:bold;
border-bottom: 1px solid #fff;
}
.section2-nav a{
font-size:12px;
position:absolute;
right:4px;
}

a:hover {

.img-ul{
padding-top:10px;
height: 119px;
}
.img-ul li{
width:126px;
height:94px;
float:left;
display:inline; /* 可修复IE6中双倍边距bug */
margin-left:17px;
}
.img-ul li img{
width:122px;
height:90px;
padding:1px;
border:1px solid #dddddd;
}
.img-ul .img-link{
width:126px;
height:94px;
display:block;
position:relative;
}
.img-ul .img-link span{
color:white;
font-size:12px;
position:absolute;
right:2px;
bottom:2px;
width:100px;
height:20px;
line-height:20px;
background: url(..update.png);
text-align: right;
}
.img-ul li p{
width:126px;
height:23px;
line-height: 23px;
background-color: #f3f3f3;
margin-top: 2px;
text-indent: 4px;
}
.img-ul li p a{
font-size:12px;
}
.txt-ul{
margin-top: 14px;
}
.txt-ul li{
width:110px;
height:22px;
line-height: 22px;
background: url(..rank.png) no-repeat -300px -244px;
padding-left:16px;
margin-left:17px;
float:left;
display:inline;
}
.txt-ul li a{
font-size:12px;
}
.section2-right h3{
height: 30px;
line-height: 30px;
text-indent: 4px;
background-color: #e6e6e6;
color: #040404;
font-size: 14px;
font-weight: bold;
}

text-decoration:underline;

section2-video{

height: 172px;
width:246px;

}
.section2-right p{
height:30px;
line-height: 30px;
background-color: #f3f3f3;
text-align: center;
}
.section2-right p a{
font-size:12px;
}
/明天快报部分end/

/今日部分start/
.today{
margin-top:10px;
}
.today-section{
position:relative;
width:952px;
margin-bottom: 13px;
overflow:hidden;
}
.today h2{
color: #3b3b3b;
font-size: 18px;
font-weight: bold;
font-family: “Microsoft Yahei”;
position:absolute;
left:15px;
top:12px;
}
.today-title{
float: right;
display:inline;
padding-top:18px;
padding-bottom:13px;
}
.today-title a{
font-size: 12px;
}

.today .item{
margin-left:15px;
float: left;
display:inline;
}
.today .item .img-link img{
width:100px;
height:140px;
}
.today .item .img-link{
width:104px;
height:144px;
}
.today .item .img-link:hover img{
border-color:#02a1d9;
}
.today .item p{
width:104px;
padding-bottom:4px;
}
.today-section.half{
width:476px;
}
/今天部分end/

/电影 start/
.movie{
margin-top: 10px;
height:637px;
position:relative;
}
.movie h2{
position:absolute;
left:10px;
top: 10px;
color: #3b3b3b;
font-size: 18px;
font-weight: bold;
font-family: “Microsoft Yahei”;
}
.movie-left{
height:597px;
width:200px;
padding:40px 25px 0 15px;
}
.movie-center{
height:637px;
width:476px;
}
.movie-right{
height:637px;
width:230px;
padding-right: 12px;
text-align: justify;
}
.movie-left dl img{
width:195px;
height:183px;
border:1px solid #dddddd;
padding:1px;
}
.movie-left dl p{
text-align: center;
margin-top: 4px;
margin-bottom: 5px;
}
.movie-left dl dd{
line-height: 18px;
}
.movie-left dl dd a{
font-size: 12px;
}
.movie-left h3{
color:#666666;
font-size: 14px;
font-weight: bold;
margin-top: 16px;
margin-bottom: 12px;
}
.movie-left .satisfy{
border:1px solid #dddddd;
height:130px;
}
.movie-left .satisfy ul{
float:left;
}
.movie-left .satisfy ul li{
width:60px;
height: 25px;
line-height: 25px;
text-align: center;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
color: #666666;
}
.movie-left .satisfy ul li.last{
height: 26px;
line-height: 26px;
border-bottom:0 none;
}
.movie-left .satisfy ul li.cur{
width:67px;
height:26px;
border: 0 none;
background: url(..rank.png) -228px -263px;
color: #fff;
cursor:pointer;
}
.movie-left .satisfy ol{
margin-left:4px;
float:left;
}
.movie-left .satisfy ol li{
height:26px;
line-height: 26px;
color:#666666;
}
.movie-left .satisfy ol .top3{
color:#05a4dc;
}
.movie-left .satisfy ol a{
font-size:12px;
}
.movie-left .going-on a{
height: 20px;
line-height: 20px;
font-size: 12px;
}
.movie-center-title{
height: 28px;
padding-top: 10px;
border-bottom: 1px solid #dddddd;
position:relative;
}
.movie-center-title li{
height: 27px;
line-height: 27px;
padding:0 10px;
margin-right: 2px;
color: #666666;
font-size: 14px;
border: 1px solid #dddddd;
border-bottom: 0 none;
float: left;
display: inline;
cursor:pointer;
}
.movie-center-title li.cur{
height: 28px;
background-color: #fff;
}
.movie-center-title a{
font-size: 12px;
position:absolute;
right:0;
top:16px;
}
.movie-center-content{
padding-top: 4px;
}
.movie-center-content li{
width:104px;
padding-top: 4px;
margin-right: 20px;
float:left;
display:inline;
}
.movie-center-content li img{
width:100px;
height: 140px;
border:1px solid #dddddd;
padding: 1px;
margin-bottom:4px;
}
.movie-center-content li a:hover img{
border-color:#02a1d9;
}
.movie-center-content li.last{
margin:0;
}
.movie-center-content li p{
height:22px;
position:relative;
}
.movie-center-content .pic-link{
top:4px;
}

.movie-right h3{
padding-top: 14px;
padding-bottom:6px;
color: #666666;
font-size: 14px;
font-weight: bold;
}
.movie-right dl{
overflow:hidden;
}
.movie-right dt,.movie-right dd{
line-height: 22px;
margin-right: 14px;
float: left;
display:inline;
}
.movie-right dt{
font-size: 12px;
font-weight: bold;
color: #666666;
}
.movie-right dd a{
font-size: 12px;
}
.movie-category p{
line-height: 22px;
}
.movie-category p a{
font-size: 12px;
margin-right: 14px;
}

.rank-title{
position:relative;
}
.rank-title ul{
position:absolute;
right:0;
top:12px;
}
.rank-title li{
width: 37px;
height: 18px;
line-height: 18px;
text-align: center;
border: 1px solid #dbdbdb;
margin-left:-1px;
float: left;
display: inline;
cursor:pointer;
}
.rank-title li.cur{
background-color: #06a1da;
color:white;
}

.rank ol li{
width: 230px;
line-height: 27px;
}
.rank ol li span{
display:inline-block;
width:19px;
height:14px;
line-height: 14px;
text-align: center;
border: 1px solid #eeeeee;
}
.rank ol li span.top3{
background-color: #1eafe5;
color:white;
font-weight: bold;
}
.rank ol li a{
font-size: 12px;
margin-left:3px;
margin-right:5px;
}
.rank ol li strong{
padding-right:14px;
color:#ff3c00;
float:right;
position:relative;
}
.rank ol li strong a{
display:inline-block;
width:8px;
height:10px;
overflow:hidden;
background: url(..rank.png) -237px -100px;
text-indent: -99em;
margin-right: 0;
}
.movie-ad{
margin-top: 16px;
}
/电影 end/

/经合专区start/
.co-work{
margin-top:15px;
height: 210px;
position:relative;
}
.co-work h2{
color:#414141;
font-size: 16px;
font-weight: bold;
font-family: “Microsoft Yahei”;
position:absolute;
left:15px;
top:14px;
}
.co-work-left{
width:716px;
height: 210px;
}
.co-work-left .img-ul{
padding-top:45px;
padding-left:0;
height:auto;
}
.co-work-left .img-ul li{
margin:0;
margin-left:15px;
width:151px;
/height:74px;/
float: left;
display: inline;
}
.co-work-left .img-ul img{
width:147px;
height:70px;
}
.co-work-left .img-ul a:hover img{
border-color:#02a1d9;
}
.co-work-left .img-ul a:hover{
color:#0081c2;
}
.co-work-left .img-ul{
margin-bottom:15px;
text-align: center;
overflow:hidden;
}
.co-work-left .img-ul li p{
width:151px;
background-color: transparent;
}
.co-work-left .txt-ul{
margin-top:0;
margin-bottom:7px;
margin-left:5px;
overflow:hidden;
}
.co-work-left .txt-ul li{
width: auto;
height: auto;
line-height: 14px;
background: none;
padding-left: 12px;
padding-right: 11px;
margin-left: 0;
}
.co-work-left .txt-ul li.last{
border:0 none;
padding-right:0;
}
.co-work-left .txt-ul a:hover{
color:#0081c2;
}

.co-work-right{
width:229px;
height: 210px;
padding-right: 12px;
}
.co-work-right h3{
color:#414141;
font-size: 14px;
font-weight: bold;
padding-top:20px;
padding-bottom: 12px;
}
.co-work-right li{
line-height:24px;
}
.co-work-right a{
font-size: 12px;
}
.co-work-right a:hover{
color:#0081c2;
}
/同盟专区end/

/页脚部分start/
.footer{
height: 150px;
margin-top:15px;
padding-top:25px;
}
.footer fieldset{
margin-left:260px;
margin-bottom:16px;
}
.footer ul li{
line-height:27px;
float:left;
display: inline;
}
.footer ul li a{
font-size: 12px;
color:#a9a9a9;
margin:0 8px;
}
.footer dl{
height: 82px;
width:192px;
padding-left:20px;
border-right: 1px solid #dddddd;
float: left;
display:inline;
}
.footer dt{
line-height: 23px;
color:#666666;
font-weight: bold;
}
.footer dd{
line-height: 22px;
margin-right:10px;
float: left;
display:inline;
white-space:nowrap; /明令禁止文字换行/
}
.footer dd a{
font-size: 12px;
}
.footer .category{
width:180px;
}
.footer .app{
width:235px;
}
.footer .support{
width:60px;
}
.footer .about-us{
width:197px;
border:0 none;
}
/页脚部分end/

}

/* 默认不出示下划线,保持页面简洁 */

ins,a {

text-decoration:none;

}

/* 去除 ie6 & ie7 主题点状线 */

a:focus,*:focus {

outline:none;

}

/* 清除浮动 */

.clearfix:before,.clearfix:after {

content:””;

display:table;

}

.clearfix:after {

clear:both;

overflow:hidden;

}

.clearfix {

zoom:1; /* for ie6 & ie7 */

}

.clear {

clear:both;

display:block;

font-size:0;

height:0;

line-height:0;

overflow:hidden;

}

/* 设置展现和隐身,日常用来与 js 协作 */

.hide {

display:none;

}

.block {

display:block;

}

/* 设置浮动,收缩浮动带来的 bug */

.fl,.fr {

display:inline;

}

.fl {

float:left;

}

.fr {

float:right;

}

/*文字排版、颜色*/

.f12{font-size:12px}

.f13{font-size:13px}

.f14{font-size:14px}

.f16{font-size:16px}

.f20{font-size:20px}

.fb{font-weight:bold}

.fn{font-weight:normal}

.t2{text-indent:2em}

.red,a.red{color:#cc0031}

.darkblue,a.darkblue{color:#039}

.gray,a.gray{color:#878787}

.lh150{line-height:150%}

.lh180{line-height:180%}

.lh200{line-height:200%}

.unl{text-decoration:underline;}

.no_unl{text-decoration:none;}

/*定位*/

.tl{text-align:left}

.tc{text-align:center}

.tr{text-align:right}

.fl{float:left;display:inline}

.fr{float:right;display:inline}

.cb{clear:both}

.cl{clear:left}

.cr{clear:right}

.vm{vertical-align:middle}

.pr{position:relative}

.pa{position:absolute}

.abs-right{position:absolute;right:0}

.zoom{zoom:1}

.hidden{visibility:hidden}

.none{display:none}

/*长度高度*/

.w10{width:10px}

.w20{width:20px}

.w50{width:50px}

.w90{width:90px}

.w100{width:100px}

.w200{width:200px}

.w250{width:250px}

.w500{width:500px}

.w800{width:800px}

.w{width:100%}

.h50{height:50px}

.h80{height:80px}

.h100{height:100px}

.h200{height:200px}

.h{height:100%}

/*边距*/

.m10{margin:10px}

.m15{margin:15px}

.m30{margin:30px}

.mt5{margin-top:5px}

.mt10{margin-top:10px}

.mt15{margin-top:15px}

.mt50{margin-top:50px}

.mt100{margin-top:100px}

.mb5{margin-bottom:5px}

.mb10{margin-bottom:10px}

.mb15{margin-bottom:15px}

.mb100{margin-bottom:100px}

.ml5{margin-left:5px}

.ml10{margin-left:10px}

.ml15{margin-left:15px}

.ml20{margin-left:20px}

.ml30{margin-left:30px}

.ml50{margin-left:50px}

.ml100{margin-left:100px}

.mr5{margin-right:5px}

.mr10{margin-right:10px}

.mr15{margin-right:15px}

.mr50{margin-right:50px}

.mr100{margin-right:100px}

.p10{padding:10px;}

.p15{padding:15px;}

.p30{padding:30px;}

.pt5{padding-top:5px}

.pt10{padding-top:10px}

.pt15{padding-top:15px}

.pt20{padding-top:20px}

.pt30{padding-top:30px}

.pt50{padding-top:50px}

.pb5{padding-bottom:5px}

.pb100{padding-bottom:100px}

.pl5{padding-left:5px}

.pl10{padding-left:10px}

.pl50{padding-left:50px}

.pl100{padding-left:100px}

.pr5{padding-right:5px}

.pr10{padding-right:10px}

.pr15{padding-right:15px}

.pr100{padding-right:100px}

网站地图xml地图