|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
网页制造poluoluo文章简介:良多做前端开辟的在为页面元素定class的时分常常会拿不定主张,招致随便利用class,一个好的class要可以形貌出某个特定元素的体现,在切合团队开辟流程、标准的情形下也要注重在事情中构成一套本人的作风,上面是我最常常利用的团体以为定名对照得当和有必定感化的10个c
良多做前端开辟的在为页面元素定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都是浮动的:
<ulclass="fixed">
<li><ahref="/about">AboutUs</a></li>
选项卡制造的时:
<dl>
<dtclass="selected">TagCloud</dt>
...
...
...
</dl>
4.class=”first”,class=”last”
直到99.9%的扫瞄器撑持:first-child和:last-child这两个伪类之前,class=”first”,class=”last”用的中央仍是良多的。
5.class=”image”
寻常选择图片元素一样平常用相似(#containerimg)如许的标签选择器,可是我这里的class=”image”是用在包括图片的容器元素,假设你正在做一个旧事列表,必要在旧事题目上面加一行带图片和申明笔墨,而且向右浮动,能够如许做:
<imgsrc="/images/img_me.jpg"alt="myfunnyface"/>
Thisismetryingtolookcool!
Therestofthecontenthere
...
6.class=”inner”
inner也是常常利用的class,并且年夜部分上是用来打造视觉上的分外效果,用来给嵌套在容器里的子容器界说款式(好比制造双背景图片效果)。
<divid="container">
<divclass="inner">
</div>
</div>
7.class=”link”
link跟image相似,我用来嵌套一个A标签,最常常用来制造”ReadMore”链接:
<pclass="link"><ahref="#">Readmore...</a></p>
8.class=”one”,class=”two”,class=”three”…
这些class用在必要区分每一个子元素的列表项,好比用挪动背景图片来制造导航菜单:
<ul>
<liclass="one"><ahref="#">Home</a></li>
<liclass="two"><ahref="#">About</a>
...</li>
</ul>
9.class=”even”,class=”odd”
用来完成隔行换款式,一样平常用在表格和列表:
<ul>
<liclass="even">Content</li>
<liclass="odd">Content</li>
<liclass="even">Content</li>
<liclass="odd">Content</li>
</ul>
表格里:
<table>
<trclass="even">
<td>Content</td>
<td>Content</td>
</tr>
<trclass="odd">
<td>Content</td>
<td>Content</td>
</tr>
<trclass="even">
<td>Content</td>
<td>Content</td>
</tr>
<trclass="odd">
<td>Content</td>
<td>Content</td>
</tr>
</table>
10.class=”section”
一样平常用在为指定内容中特定部分增加特定的款式:
<divclass="section">
contenthere...
</div>
标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现 |
|