css构造列表与导航

最新推荐文章于 2024-09-22 09:43:36 发布

「已注销」

最新推荐文章于 2024-09-22 09:43:36 发布

阅读量195

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yuanjin1988/article/details/42772341

版权

css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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">
<html>
	<head>
		<title>css构造列表与导航</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:50px;
			}
			
			ul
			{
				list-style-type:none;
				margin:0;
				padding:0;
				list-style-image:url(tb.gif);
				line-height:150%;
			}
			
			
			
		</style>
		
	</head>
	
	<body>
		<!-- 以图片作为列表图片 -->
		<ul>
			<li>胡心鹏</li>
			<li>杨金环</li>
			<li>杨明发</li>
			<li>王瑞剑</li>
		</ul>
		
	</body>
</html>

<!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">
<html>
	<head>
		<title>css构造列表与导航</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:50px;
			}
			
			ul
			{
				list-style-type:none;
				margin:0;
				padding:0;
				line-height:150%;
			}
			
			ul li
			{
				background:url(tb.gif) no-repeat left 55%;
				padding-left:14px;
			}
			
			
			
		</style>
		
	</head>
	
	<body>
		<!-- 以背景图片作为项目列表图标 -->
		<ul>
			<li>胡心鹏</li>
			<li>杨金环</li>
			<li>杨明发</li>
			<li>王瑞剑</li>
		</ul>
		
	</body>
</html>

<!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">
<html>
	<head>
		<title>css构造列表与导航</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:50px;
			}
			
			ul
			{
				background:orange;
			}
			li
			{
				/*保证圆点不会丢失*/
				float:left;
			}
		</style>
	</head>
	
	<body>
		<!-- 内联列表 -->
		<!-- ul是区块 -->
		<!-- li是区块 -->
		<ul>
			<li>胡心鹏</li>
			<li>杨金环</li>
			<li>杨明发</li>
			<li>王瑞剑</li>
		</ul>
	</body>
</html>

<!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">
<html>
	<head>
		<title>css构造列表与导航</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:50px;
			}
			
			ul
			{
				margin:0;
				padding:0;
				list-style-type:none;
				
			}
			li
			{
				background:url(tb.gif) no-repeat left center;
				padding-left:15px;
				display:inline;
			}
		</style>
	</head>
	
	<body>
		<!-- 背景图片与内联列表 -->
		
		<ul>
			<li>胡心鹏</li>
			<li>杨金环</li>
			<li>杨明发</li>
			<li>王瑞剑</li>
		</ul>
	</body>
</html>

<!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">
<html>
	<head>
		<title>css构造列表与导航</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:50px;
			}
			ul
			{
				list-style-type:none;
				padding:2px;
				margin:5px;
				font-size:12px;
				/*区块可以设置长度*/
				width:160px;
			}
			ul li
			{
				background:#ddd;
				margin:0px;
				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>
		<!-- 垂直导航栏 -->
		
		<ul>
			<li><a href = "#">胡心鹏</a></li>
			<li><a href = "#">杨金环</a></li>
			<li><a href = "#">杨明发</a></li>
			<li><a href = "#">王瑞剑</a></li>
		</ul>
	</body>
</html>

<!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">
<html>
	<head>
		<title>css构造列表与导航</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:50px;
			}
			ul
			{
				list-style-type:none;
				margin:0;
				font-size:12px;
				
			}
			ul li a
			{
				background:#94b8e9 url(pixy-rollover.gif) no-repeat left center;
				display:block;
				width:200px;
				height:40px;
				line-height:40px;
				color:#000;
				text-decoration:none;
				text-align:center;
				
			}
			ul li a:hover
			{
				background-position:right center;
			}
			
		</style>
	</head>
	
	<body>
		<!-- 创建垂直翻转的列表 -->
		
		<ul>
			<li><a href = "#">胡心鹏</a></li>
			<li><a href = "#">杨金环</a></li>
			<li><a href = "#">杨明发</a></li>
			<li><a href = "#">王瑞剑</a></li>
		</ul>
	</body>
</html>

<!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">
<html>
	<head>
		<title>css构造列表与导航</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				margin:50px;
			}
			ul
			{
				list-style-type:none;
				
				width:400px;
				margin:0;
				padding:0;
				
				background:#faa819 url(mainNavBg.gif) repeat-x;
				float:left
				line-height:26px;
				font-size = 12px;
			}
			ul li
			{
				/*display:inline;*/
				/*内联不能调高度*/
				float:left;
				background:url(divider.gif) no-repeat right center;
				width:60px;
				text-align:center;
			}
			ul li a
			{
				color:#fff;
				text-decoration:none;
			}
			
		</style>
	</head>
	
	<body>
		<!-- 创建水平翻转的列表 -->
		
		<ul>
			<li><a href = "#">胡心鹏</a></li>
			<li><a href = "#">杨金环</a></li>
			<li><a href = "#">杨明发</a></li>
			<li><a href = "#">王瑞剑</a></li>
		</ul>
	</body>
</html>