CSS学习（三）——背景与列表

来源：互联网发布：linux下 iso usb 编辑：程序博客网时间：2024/06/06 03:11

背景

属性名称设定值说明background-color十六进制 transparent透明（默认值）background-imageURLbackground-image:url("image.jpg") none不设置背景图片（默认值）background-attachmentscroll背景图会随视滚动条的移动而移动 fixed不会随滚动条移动（水印效果）background-repeatrepeat背景图自动填满整个背景（默认值） repeat-x背景图在水平方向填满背景 repeat-y背景图在垂直方向填满背景 no-repeat图案在背景只出现一次background-positiontop left背景图出现在视窗左上方 top center top right center left center center背景图出现在视窗中间 center right bottom left bottom center bottom right

背景设置的简化写法：

background:颜色背景图 repeat attachment position

列表

属性名称设定值说明list-style-typenone无符号 disc实心小圆点（默认值） circle空心小圆点square实心小方块 decimal1,2,3,4... lower-romani,ii,iii,iv... upper-romanI,II,III,IV... lower-alphaa,b,c,d... upper-alphaA,B,C,D...list-style-positioninside清单项目往右移 outside清单项目正常显示（默认值）list-style-imageURLlist-style-image:url("image.gif") none不显示任何图像（默认值）

清单的简化写法：

list-style:circle inside url("image.gif")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>背景与列表</title><style type="text/css">body{background-image:url("image.jpg");background-repeat:no-repeat;background-attachment:fixed;background-position:center center;}ul{list-style-type:circle;list-style-position:outside;}</style></head><body>  <ul>  <li>CSS背景与列表</li>  <li>CSS背景与列表</li>  <li>CSS背景与列表</li>  <li>CSS背景与列表</li>  <li>CSS背景与列表</li>  </ul></body></html>

0 0