快速业务通道

CSS编写经验谈:常用的10个CSS类名

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02

很多做前端开发的在为页面元素定class的时候经常会拿不定主意,导致随意使用class,一个好的class要能够描述出某个特定元素的表现,在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格,下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。

1.class=”fixed”

fixed这个class几乎出现在没个样式文件中,用在为包含浮动子元素的容器元素清除浮动,样式如下

 .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">
 <li><img src="images/img_01.jpg" alt="First Thumb" /></li>
 <li><img src="images/img_02.jpg" alt="Second Thumb" />
 
 ...</li>
</ul>

2.class=”alt”

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;
 }

 3.class=”selected”

这个最经常用的,用来处理mouseover或选中元素的效果。

  <li class="selected"><a href="/about">About Us</a></li>

选项卡制作的时:

<dl>
<dt class="selected">Tag Cloud</dt>
...
...
...
</dl>

 4.class=”first”, class=”last”

 直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前,class=”first”, class=”last”用的地方还是很多的。

5.class=”image”

平常选择图片元素一般用类似(#container img)这样的标签选择器,但是我这里的cla

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号