CSS学习（三）——背景与列表_body{ background-image: url("qw.jpg"); background--优快云博客

本文介绍了如何使用CSS来设置背景属性和列表样式，包括背景颜色、背景图片、重复方式等，以及列表符号类型、位置和图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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

背景设置的简化写法：

background:颜色背景图 repeat attachment position

列表

属性名称	设定值	说明
list-style-type	none	无符号
	disc	实心小圆点（默认值）
	circle	空心小圆点
	square	实心小方块
	decimal	1,2,3,4...
	lower-roman	i,ii,iii,iv...
	upper-roman	I,II,III,IV...
	lower-alpha	a,b,c,d...
	upper-alpha	A,B,C,D...
list-style-position	inside	清单项目往右移
	outside	清单项目正常显示（默认值）
list-style-image	URL	list-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>