23 , CSS 构造列表与导航

时间：2023-03-09 14:47:38
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

		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;

	}

	</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;

width: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;

width: 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>

　　

相关文章