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

最新推荐文章于 2025-02-08 18:26:46 发布

原创最新推荐文章于 2025-02-08 18:26:46 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

CSS 专栏收录该内容

9 篇文章

订阅专栏

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

背景

属性名称	设定值	说明
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>