23 , CSS 构造列表与导航

1. 列表图片

2. 背景列表

3. 翻转列表

4. 水平导航

1. 内边距与外边距

Ul {

Margin: 0;

Padding: 0;

}

2. 使用图片作为列表图标

Ul {

Margin: 0;

Padding:0;

Width: 200px;

List-style-image:url(images/list.gif);

Line-height: 150%;

}

3. 以背景图片作为项目列表图标

Ul {

List-style-type:none;

}

Li {

Background: url(images/list.gif) no-repeat left center;

Padding: 0 0 0 25px;

}

4. 内联列表

Ul {

List-style-type:disc;

}

Li {

Display: inline;

}

这里的 display 属性是块级值的设置,定义是否要成为块 .

Inline 是是内联,block 是区块.

5. 背景图片和内联列表

Ul {

List-style-type: none;

}

Li {

Display:inline;

Background url(images/list.gif) no-repeat left center;

Margin: 0 0 0 10px;

Padding: 0 0 0 15px;

}

6.垂直导航栏

<div>

<ul>

<li><a href="#">Drubjs Menu</a></li>

<li><a href="#">Beer</a></li>

<li><a href="#">Spirits</a></li>

<li><a href="#">Cola</a></li>

<li><a href="#">Lemonade</a></li>

<li><a href="#">Tea</a></li>

<li><a href="#">Coffee</a></li>

</ul>

</div>

Ul {

List-style-type:none;

Margin:5px;

Padding:2px

Width: 160px;

Font-size: 12px;

}

Li {

Background: #ddd;

Margin: 0;

Padding: 2px 10px;

Border-left: 1px solid #fff;

Border-top: 1px solid #fff;

Border-right: 1px solid #666;

Border-bottom: 1px solid #aaa;

}

7.创建垂直翻转的列表

ul {

margin: 0;

padding: 0;

list-style-type: none;

}

Ul a{

Display: block;

Width: 200px;

Height: 40px; /*39px*/

Line-height: 40px; /*39px*/

Color:#000;

Text-decoration: none;

Background: #94b8E9 url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/

Text-indent: 50px;

}

a:hover {

background-position: right bottom;

}

8.创建水平导航条

ul {

Margin: 0;

Padding: 0 2em;

List-style: none;

line-height: 2.1em;

Width: 720px;

Background: #faa819 url(images/mainNavBg.gif) repeat-x;

}

ul li {

float: left;

}

ul a {

color:#fff;

padding: 0 10px;

background: url(images/divider.gif) repeat-y left top;

text-decoration: none;

}

1CSS构造列表内边距与外边距

<!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>CSS构造列表内边距与外边距</title>
<style type="text/css">
	body{
margin: 0;
padding: 0;
	}
	ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	</style>
</head>

<body>
<ul>
	<li>CSS构造列表5个浏览器兼容顶格</li>
	<li>CSS构造列表5个浏览器兼容顶格</li>
	<li>CSS构造列表5个浏览器兼容顶格</li>
	<li>CSS构造列表5个浏览器兼容顶格</li>
</ul>
</body>
</html>

　　2CSS构造列表使用图片作为列表图标

<!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>CSS构造列表使用图片作为列表图标</title>
<style type="text/css">
	body{
margin: 50px;

	}
	ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
		list-style-image: url(images/2.jpg)
		
	}
	</style>
</head>

<body>
<ul>
	<li>CSS构造列表使用图片作为列表图标</li>
	<li>CSS构造列表使用图片作为列表图标</li>
	<li>CSS构造列表使用图片作为列表图标</li>
	<li>CSS构造列表使用图片作为列表图标</li>
</ul>
</body>
</html>

　　3CSS构造以背景图片作为项目列表图标

<!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>CSS构造以背景图片作为项目列表图标</title>
<style type="text/css">
	body{
margin: 50px;

	}
	ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
		line-height: 150%;
		
		
	}
	ul li{
		background:url(images/2.jpg) no-repeat left center; /*center 可以改为60%*/
		padding-left: 20px;
	}
	</style>
</head>

<body>
<ul>
	<li>CSS构造以背景图片作为项目列表图标</li>
	<li>CSS构造以背景图片作为项目列表图标</li>
	<li>CSS构造以背景图片作为项目列表图标</li>
	<li>CSS构造以背景图片作为项目列表图标</li>
</ul>
</body>
</html>

　　4CSS构造内联列表

<!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>CSS构造内联列表</title>
<style type="text/css">
	body{
margin: 50px;

	}
	ul{
		margin: 0;
		padding: 0;
		background: orange;
		display:inline;
				}
	li{
		background: yellow;
		display: inline;
	}
	</style>
</head>

<body>
<ul>
	<li>CSS构造内联列表</li>
	<li>ul是区块，display:inline把区块改成内联</li>
	<li>li也是区块，display:inline把区块改成内联</li>
	<li>这里的 display 属性是块级值的设置,定义是否要成为块 .
Inline 是是内联,block 是区块.</li>
</ul>
外面的
</body>
</html>

　　5CSS背景图片和内联列表

<!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{
margin: 50px;

	}
	ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
				}
	li{
		background:url(images/2.jpg) no-repeat left center;
		padding-left: 15px;
		display: inline;
	}
	</style>
</head>

<body>
<ul>
	<li>背景图片和内联列表</li>
	<li>小圆点图片不会掉，也变成内联</li>
	<li>li也是区块，display:inline把区块改成内联</li>
	<li>这里的 display 属性是块级值的设置,定义是否要成为块 .
Inline 是是内联,block 是区块.</li>
</ul>
外面的
</body>
</html>

　　6垂直导航栏

<!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{
margin: 50px;

	}
	ul{
		List-style-type:none;
		Margin:5px;
		Padding:2px
		160px;
		Font-size: 12px;
				}
	li{
		Background: #ddd;
		Margin: 0;
		Padding: 2px 10px;
		Border-left: 1px solid #fff;
		Border-top: 1px solid #fff;
		Border-right: 1px solid #666;
		Border-bottom: 1px solid #aaa;
	}
	</style>
</head>

<body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>

　　7创建垂直翻转的列表

<!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{
margin: 50px;

	}
	ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
				}
	Ul a{
Display: block;
Width: 200px;
Height: 40px; /*39px*/
Line-height: 40px; /*39px*/
Color:#000;
Text-decoration: none;/*去掉下划线*/
Background: #94b8E9 url(images/pixy-rollover.png) no-repeat left center; /*left bottom*/
Text-indent: 50px;/*将段落的第一行缩进 50 像素：*/
}
	a:hover {
background-position: right bottom;
}
	</style>
</head>

<body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>

　　8创建水平导航条

<!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{
margin: 50px;

	}
ul {
List-style-type: none;
800px;
Margin:0;
Padding:0;
background: #faa819 url(images/6.gif) repeat-x;
float: left;
line-height: 26px;
font-size: 12px;
text-align:center;

}
ul li {
float: left;
background: url(images/5.png) no-repeat right center;
 100px;


}
ul li a {
color:red;
text-decoration: none;
}
	</style>
</head>

<body>
<div>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>

　　

柳志军：13418977808（手机微信），QQ:93684042
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liu-zhijun/p/10630187.html