css背景和列表

最新推荐文章于 2024-09-16 22:10:57 发布

「已注销」

最新推荐文章于 2024-09-16 22:10:57 发布

阅读量310

点赞数

分类专栏：前端基础入门 css/css3 文章标签： css

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88723284

版权

前端基础入门同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css/css3

15 篇文章 0 订阅

订阅专栏

* css背景(background)*

<!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>

<!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

//默认是 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>

<!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>

<!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列表 *

// 无序列表默认是 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>

<!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>

<!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>

// inside

// outside

//只要设置了图片，则就会覆盖了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>

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