很多做前端开发的在为页面元素定class的时候经常会拿不定主意,导致随意使用class,一个好的class要能够描述出某个特定元素的表现,在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格,下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。
1.class=fixedfixed这个class几乎出现在没个样式文件中,用在为包含浮动子元素的容器元素清除浮动,样式如下
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/) .fixed:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.fixed{
display:block;
}
/* */
.fixed{
min-height:1%;
}
* html .fixed{
height:1%;
}
这个样式就可以用在下面的情形,每个li都是浮动的:
ul class="fixed"
liimg src="images/img_01.jpg" alt="First Thumb" //li
liimg src="images/img_02.jpg" alt="Second Thumb" /
.../li
/ul
alt是alternative(交替)的简称,这个class用在有一组样式一样的元素,需要为其中的某几个设定特别的样式,比如一组向左浮动的图片中需要有一张是向右浮动,可以这样:
#content img{
float:left;
display:inline;
margin-right:10px;
border:1px solid #ccc;
padding:1em 0;
background:#fff;
}
#content img.alt{
float:right;
margin-right:0;
margin-left:10px;
}
这个最经常用的,用来处理mouseover或选中元素的效果。
li class="selected"a href="/about"About Us/a/li
选项卡制作的时:
dl
dt class="selected"Tag Cloud/dt
...
...
...
/dl
直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前,class=first, class=last用的地方还是很多的。
5.class=image
平常选择图片元素一般用类似(#container img)这样的标签选择器,但是我这里的class=image是用在包含图片的容器元素,假如你正在做一个新闻列表,需要在新闻标题下面加一行带图片和说明文字,并且向右浮动,可以这样做:
img src="/images/img_me.jpg" alt="my funny face" /
This is me trying to look cool!
The rest of the content here
...
inner也是经常使用的class,而且大部分上是用来制造视觉上的额外效果,用来给嵌套在容器里的子容器定义样式(比如制作双背景图片效果)。
div id="container"
div class="inner"
/div
/div
link跟image类似,我用来嵌套一个A标签,最经常用来制作Read More链接:
p class="link"a href="#"Read more.../a/p
8.class=one, class=two, class=three
这些class用在需要区别每个子元素的列表项,比如用移动背景图片来制作导航菜单:
ul
li class="one"a href="#"Home/a/li
li class="two"a href="#"About/a
.../li
/ul
用来实现隔行换样式,一般用在表格和列表:
ul
li class="even"Content/li
li class="odd"Content/li
li class="even"Content/li
li class="odd"Content/li
/ul
表格里:
table
tr class="even"
tdContent/td
tdContent/td
/tr
tr class="odd"
tdContent/td
tdContent/td
/tr
tr class="even"
tdContent/td
tdContent/td
/tr
tr class="odd"
tdContent/td
tdContent/td
/tr
/table
一般用在为指定内容中特定部分添加特定的样式:
div class="section"
content here...
/div