仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1069|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 给大家带来CSS编写履历谈:经常使用的10个CSS类名

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:54:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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>

标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现
再见西城 该用户已被删除
沙发
发表于 2015-1-17 23:48:44 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
兰色精灵 该用户已被删除
板凳
发表于 2015-1-26 16:36:40 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
乐观 该用户已被删除
地板
发表于 2015-2-4 20:54:15 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
分手快乐 该用户已被删除
5#
发表于 2015-2-10 10:20:40 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
爱飞 该用户已被删除
6#
发表于 2015-3-1 10:33:53 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
蒙在股里 该用户已被删除
7#
发表于 2015-3-10 17:33:19 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
简单生活 该用户已被删除
8#
发表于 2015-3-17 09:38:16 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
第二个灵魂 该用户已被删除
9#
发表于 2015-3-24 06:33:11 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 07:29

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表