迅雷页面,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世纪福克斯将为卖座动画片《冰河世纪》(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世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集...p> </div> <div> <h2>倒霉松鼠再出山h2> <p>20世纪福克斯将为卖座动画片《冰河世纪》(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

/*文字排版*/ .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>“赵家班”首部悲情大戏《樱桃》开播 沈春阳挑战傻娘角色 宋小宝颠覆化身“悲情男”(更新至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 '5b8b4f53',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">北京爱情故事</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》入围柏林影展 迅雷看看独家版权</a></li>
<li><a href="">《LOVE》入围柏林影展 迅雷看看独家版权</a></li>
<li><a href="">《LOVE》入围柏林影展 迅雷看看独家版权</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:"5B8B4F53";
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}

本文由星彩网app下载发布于前端技术,转载请注明出处:迅雷页面,CSS模块化编码让开发事半功倍

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。