注册 | 登录 | 网址 欢迎访问八百站长

【原创】网页CSS样式设置的一些规则

2016/10/11 14:46:01 作者:站长日记 来源:http://www.800zz.com 浏览:1965次

一、常用的几种居中对齐

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+兼容经验小结 下一篇: 没有了