您当前的位置是:首页-CSS+DIV教程

10个最常用的CSS className

【发表于】:2011/2/11 12:34:00  已被访问:289次
引用片段:
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>
 4.class=”first”, class=”last
直到99.9% 的浏览器支持:first-child:last-child这两个伪类之前,class=”first”, class=”last”用的地方还是很多的。
5.class=”image”
平常选择图片元素一般用类似(#container img)这样的标签选择器,但是我这里的class=”image”是用在包含图片的容器元素,假如你正在做一个新闻列表,需要在新闻标题下面加一行带图片和说明文字,并且向右浮动,可以这样做:
<img class=”image” src="/images/img_me.jpg" alt="my funny face" />
 This is me trying to look cool!
 
 The rest of the content here
 ...

6. class=”inner”
inner也是经常使用的class,而且大部分上是用来制造视觉上的额外效果,用来给嵌套在容器里的子容器定义样式(比如制作双背景图片效果):
7.class=”link”'
link跟image类似,我用来嵌套一个A标签,最经常用来制作”Read More”链接:
<a href="#">Read more...</a>
8.class=”one”, class=”two”, class=”three”…(个人认为最好不用这样的命名方式,因为如果是团队的话,并不知道你这们定义是指那方面的内容,以下为个人意见)
<ul>
 <li class="home"><a href="#">Home</a></li>
 <li class="about"><a href="#">About</a>
 
 ...</li>
</ul>

9.class=”even”, class=”odd” (个人认为直接用jQuery更方便)
用来实现隔行换样式,一般用在表格和列表:
 <ul>
 <li class="even">Content</li>
 <li class="odd">Content</li>
 <li class="even">Content</li>
 <li class="odd">Content</li>
</ul>

10.class=”section”
一般用在为指定内容中特定部分添加特定的样式:
<div class="section">content here...</div>
 
上下篇: IE与Firefox的CSS兼容大全 页面垂直水平问题

最新推荐信息