CSS背景与列表

时间:2021-05-09 18:52:26
  • CSS中背景的使用
  • 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

例:background:blue url("xxx.jpg") no-repeat fixed center center

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")