信游平台登陆

注册 | 登录 | 网址 接待拜候八百站长

【首创】网页CSS款式设置的一些法则

2016/10/11 14:46:01 作者:站长日志 来历:http://tattoovisit.com 浏览:3002次

一、经常利用的几种居中对齐

1、方框居中(摆布主动,方框居中

【方框】左、右边境:主动(margin-left: auto; margin-right: auto;)

注:凡是合写为(margin: 0 auto;),此中auto为左、右边境,而0(px)为上、下边境,可按照须要设置


2、笔墨水平常中

【区块】文本对齐:居中(text-align: center;)

注:也可设置文本左对齐(text-align: left;)或文本右对齐(text-align: right;)


3、单行笔墨垂直居中(两高相称,垂直居中

【方框】高度:40px(height: 40px;)

【范例】行高:40px(line-height: 40px;)

注:必须是单行笔墨!多行笔墨只设行高,不设高度


二、标题、段落款式的设置(共4类8项)

(1)初始化,去掉高低的空行

【方框】边境:0、添补:0(margin: 0; padding: 0;)

(2)单行笔墨垂直居中(不是单行时,只设行高不设高度

【方框】高度:40px(height: 40px;)

【范例】行高:40px(line-height: 40px;)

(3)笔墨的根基设置(按照须要,可省略)

【范例】巨细:16px(font-size: 16px;)

    粗细:普通(font-weight: normal;)

    色彩:#999(color: #999;)

(4)笔墨的对齐体例(默许为左对齐,还可设置为居中或右对齐)

【区块】文本对齐:居中(text-align: center;)


三、列表款式的设置(分两部分)

1、列表ul的设置(初始化,共3项)

【方框】边境:0、添补:0(margin: 0; padding: 0;)

【列表】范例:无(list-style-type: none;)


2、列表项li的设置(笔墨类)

(1)单行笔墨垂直居中

【方框】高度:40px(height: 40px;)

【范例】行高:40px(line-height: 40px;)

(2)文本根基设置(按照须要,可省略,图片列表不须要)

【范例】巨细:16px(font-size: 16px;)

    粗细:普通(font-weight: normal;)

    色彩:#999(color: #999;)

(3)排成一行(可选项)

【方框】宽度:100px(width: 100px;)

    浮动:左对齐(float: left;)


四、超等链接款式的设置

超等链接有四种状况:普通状况(未拜候)、已拜候状况(已拜候)、鼠标指向链接时(悬停时)、鼠标点击链接时(点击时),这四种状况凡是分为两组:静态(未拜候、已拜候)、静态(悬停时、点击时),咱们在设置超等链接的款式时,凡是也须要设置两次。

1、笔墨超链接的普通状况(a)(或a:link,a:visited)

【范例】巨细:16px(font-size: 16px;)

    粗细:普通(font-weight: normal;)

    色彩:#999(color: #999;)

    润色:无(text-decoration: none;)(去掉下划线)


2、笔墨超链接的悬停状况(a:hover)(或a:hover,a:active)(只要设置和下面差别的)

【范例】色彩:#00F(color: #00F;)


3、图片超链接的款式(a img)

【边框】宽度:0(border-width: 0;)(去掉图片边框)


4、导航类超链接(#nav a)

(1)显现为块 + 浮动左对齐

【区块】显现:块(display: block;)

【方框】浮动:左对齐(float: left;)

注:浮动左对齐仅限横向导航,纵向导航不须要浮动

也有设置为内联块的

【区块】显现:内联块(display: inline-block;)

(2)笔墨根基设置:

【范例】巨细:16px(font-size: 16px;)

    粗细:粗体(font-weight: bold;)

    色彩:#999(color: #999;)

    润色:无(text-decoration: none;)(去掉下划线)

(3)经由过程宽度和对齐天生块状结果

【方框】宽度:100px(width: 100px;)

【区块】文本对齐:居中(text-align: center;)

(4)单行笔墨垂直居中

【方框】高度:36px(height: 36px)

【范例】行高:36px(line-height: 36px)

(3)(4)项也可利用添补天生块状结果

【方框】添补:高低10px、摆布20px(padding: 10px 20px;)

(5)块状圆角结果

增加属性:border-radius: 5px;


(6)增加鼠标悬停结果(#nav a:hover)

【背景】背景色彩:#00F

【范例】色彩:#FFF


五、巨细不异,平均摆列

1、外框

【方框】宽度:1000px、高度:570px(width: 1000px; height: 570px;)

    左、右边境:主动(margin-left: auto; margin-right: auto;)


2、内框(左上边境,平均摆列

【方框】宽度:320px、高度:270px(width: 320px; height: 270px;)

    边境:上、左各10px(margin-top: 10px; margin-left: 10px;)

    浮动:左对齐(float: left;)


注:外框宽度=内框宽度*列数+左侧境值*(列数+1)

  外框高度=内框高度*行数+上边境值*(行数+1)

如:1000px = 320px*3 + 10*(3+1)

  570px  = 270px*2 + 10*(2+1)



上一篇: IE8+兼容经历小结 下一篇: 不了