* css背景(background)*

css背景和列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			/*background-color: transparent;*/
			/*background-color: red;*/
			/*background-color: #ff0000;*/
			background-color: rgb(255,0,0);
			/*padding: 10px;*/
			/*margin: 10px;*/
           
           /*border设置必须要添加样式dashed等..如果不设置颜色，则边框颜色会默认和文本的颜色一致*/
			border: 20px dashed; 
		}
	</style>
</head>
<body>
	<div>background-color</div>
</body>
</html>

css背景和列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: #ff0000;
			
			background-image: url(img/bg-little.png);
			/*padding: 20px;*/
			/*margin: 20px;*/  /*不包含外边距*/
			/*border: 20px dashed; */
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

【注意】：如果同时设置了 background-color、background-image，则背景图片会覆盖背景颜色；

??可是背景图片重复展示会影响美观，如果设置呢？ --- background-repeat

css背景和列表 //默认是 repeat，还可能值为 inherit

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-image: url(img/bg-little.png);
			background-repeat: no-repeat;
			/*background-repeat:repeat;*/
			/*background-repeat:repeat-x;*/
			/*background-repeat:repeat-y;*/
			border: 1px solid #ff0000;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

css背景和列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 1500px;
			background-image: url(img/bg-little.png);
			background-repeat: no-repeat;
			border: 1px solid #ff0000;
			/*background-attachment: fixed;*/
			background-attachment: scroll;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

css背景和列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100%;
			height: 1500px;
			border: 1px solid #ff0000;
			background: #000000 url(img/bg-little.png) no-repeat top right fixed;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

【注意】：fixed值是相对于整个网页而言（width必须为100%），要是width为200px时，不会生效；

* css列表 *

css背景和列表

// 无序列表默认是 disc（实心圆），有序列表默认是 decimal（数字）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul li {
			/*list-style-type: circle;*/
			/*list-style-type: square;*/
			/*有序列表*/
			/*list-style-type: decimal;*/
			/*list-style-type: upper-roman;*/
			list-style-type: upper-alpha;
		}
	</style>
</head>
<body>
	<ul>
		<li>家用电器</li>
		<li>电脑</li>
		<li>手机</li>
	</ul>
</body>
</html>

css背景和列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul li {
			list-style-image: url(img/remind.png);
		}
	</style>
</head>
<body>
	<ul>
		<li>家用电器</li>
		<li>电脑</li>
		<li>手机</li>
	</ul>
</body>
</html>

css背景和列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul li {
			list-style-image: url(img/remind.png);
			list-style-position: inside;
		}
	</style>
</head>
<body>
	<ul>
		<li>家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器</li>
		<li>电脑</li>
		<li>手机</li>
	</ul>
</body>
</html>

css背景和列表 // inside

css背景和列表 // outside

css背景和列表

//只要设置了图片，则就会覆盖了type的样式（不管type顺序放在哪边）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul li {
			list-style: url(img/remind.png) inside square  ;
		}
	</style>
</head>
<body>
	<ul>
		<li>家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器</li>
		<li>电脑</li>
		<li>手机</li>
	</ul>
</body>
</html>

详细可参考《背景与列表》

css背景和列表

目录

*** css背景(background)***

*** css列表 ***

相关推荐

* css背景(background)*

* css列表 *