15 ， CSS 背景与列表

最新推荐文章于 2024-04-04 12:00:09 发布

柳志军

最新推荐文章于 2024-04-04 12:00:09 发布

阅读量157

点赞数

分类专栏： DIV+CSS

本文链接：https://blog.csdn.net/lzjgame/article/details/88915836

版权

DIV+CSS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.CSS 中背景的使用

2.CSS 中列表的使用

15.1 CSS 中背景的使用

属性名称属性值说明

background-attachment scroll 设置背景图像会随视窗滚动

条的移动而移动。

fixed 设置背景图像不会随视窗滚动条

的移动而移动。

background-color 十六进制 background-color:#ff0000;

英文名称 background-color:red;

三原色 background-color:rgb(255,0,0)

transparent background-color:transparent;透明

background-image URL background-image:url(“bg.jpg”)

背景图片

none 不设置背景图片

background-position top left 设置背景图案出现在上左方。

top center 设置背景图案出现在上方中间。

top right 设置背景图案出现在上右方。

center left 设置背景图案出现在中间左方。

center center 设置背景图案出现在IE中间。

center right 设置背景图案出现中间右方。

bottom left 设置背景图案出现在下左方。

bottom 设置背景图案出现在正下方。

bottom right 设置背景图案出现在下右方。

background-repeat repeat 将背景图案填满整个背景。

repeat-x 将背景图案在水平方向添满。

repeat-y 将背景图案在垂直方向添满。

no-repeat 图案只出现一次。

背景图案简化方案：

background:颜色背景图片 repeat attachment position

15.2 CSS中列表的使用

属性名称属性值说明

list-style-type none 无符号

disc 实体的小圆点。

circle 空心的小圆点。

square 实心的小方块。

decimal 1,2,3…

lower-roman i,ii,iii…

upper-roman I,II,III…

lower-alpha a,b,c,d,e…

upper-alpha A,B,C,D,E…

list-style-position inside 清单项目较往右移。

outside 清单项目正常显示。

list-style-image URL list-style-image:url(lmk.gif)

none 不会显示任何图象

清单的简化设置：

list-style:circle inside url(“bullet.gif”)

CSS 11中背景的使用背景图像会随视窗滚动

设置背景图像不会随视窗滚动条的移动而移动。

scroll 设置背景图像不会随视窗滚动条的移动而移动。

scroll 设置背景图像会随视窗滚动条的移动而移动。 fixed 设置背景图像不会随视窗滚动条的移动而移动。

scroll 设置背景图像会随视窗滚动条的移动而移动。 fixed scroll 设置背景图像会随视窗滚动条的移动而移动。 fixed 设置背景图像不会随视窗滚动条的移动而移动。的移动而移动。

scroll 设置背景图像会随视窗滚动条的移动而移动。 fixed 设置背景图像不会随视窗滚动条的移动而移动。

CSS 12中背景颜色的设置背景颜色的设置

背景颜色的设置:十六进制

背景颜色的设置:英文名称

背景颜色的设置:三原色

背景颜色的设置:transparent,透明

CSS 13将背景图案只出现一次 no-repeat 图案只出现一次

background-repeat repeat 将背景图案填满整个背景。
					repeat-x 将背景图案在水平方向添满。
					repeat-y 将背景图案在垂直方向添满。
					no-repeat 图案只出现一次。

　　CSS 14背景图案出现在上方中间设置背景图案出现在上方中间

background-position top left 设置背景图案出现在上左方。
					top center 设置背景图案出现在上方中间。
					top right 设置背景图案出现在上右方。
					center left 设置背景图案出现在中间左方。
					center center 设置背景图案出现在IE中间。
					center right 设置背景图案出现中间右方。
					bottom left 设置背景图案出现在下左方。
					bottom 设置背景图案出现在正下方。
					bottom right 设置背景图案出现在下右方。
			背景图案简化方案：
            background:颜色 背景图片 repeat attachment position

　　CSS 15CSS中列表的使用 CSS中列表的使用

CSS中列表的使用
CSS中列表的使用
CSS中列表的使用

属性名称   属性值   说明
list-style-type none 无符号
				disc 实体的小圆点。
				circle 空心的小圆点。
				square 实心的小方块。
				decimal 1,2,3...
				lower-roman i,ii,iii...
				upper-roman I,II,III...
				lower-alpha a,b,c,d,e...
				upper-alpha A,B,C,D,E...
list-style-position inside 清单项目较往右移。
					outside 清单项目正常显示。
list-style-image   URL   list-style-image:url(lmk.gif) 用的比较少，一般用背景图片
				         none 不会显示任何图象
清单的简化设置：
list-style:circle inside url("bullet.gif")