JavaWeb_CSS（20）_列表菜单制作

最新推荐文章于 2024-07-18 16:15:24 发布

魏宇轩

最新推荐文章于 2024-07-18 16:15:24 发布

阅读量1.3k

点赞数

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 列表菜单制作

本文链接：https://blog.csdn.net/qq_36260974/article/details/88522650

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

竖向菜单

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>		
	</head>	
		<style type="text/css">
			body
			{
				background-color: silver;
				font-family: 黑体;
				font-size: 15px;
			}			
			ul
			{
				list-style-type: disc;				
			}			
			ul li
			{				
				width: 200px;
				text-align: center;
				height: 20px;
				margin-bottom: 1px;
				background-color: orange;							
			}			
			li a
			{
				display:block;
				text-decoration: none;
				color: white;
			}
			li:HOVER 
			{
				background-color:gray;				
			}
			li a:HOVER /*鼠标放上去的颜色*/
			{
				color: silver;
			}
			a:VISITED /*鼠标点过后的颜色*/
			{
				color: red;
			}
		</style>	
	<body>
		<h1> 列表样式 </h1>
		<hr/>
		<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>
<html>
	<head>	
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>		
	</head>	
		<style type="text/css">
			body
			{
				background-color: #a1b136;
				font-family: 楷体;
				font-size: 15px;
			}			
			ul
			{
				list-style-type: none;				
			}			
			ul li
			{		
				padding-top:3px;	
				width: 100px;
				text-align: center;
				height: 20px;
				margin-right: 2px;
				background-color: orange;	
				float: left;	
				border-bottom: 5px solid gray;									
			}			
			li a
			{
				display:block;				
				text-decoration: none;
				color: white;
			}
			li:HOVER /*鼠标放上去的边框*/
			{
				background-color:gray;	
				border: 1px solid black;			
			}
			li a:HOVER /*鼠标放上去的颜色*/
			{
				color: green;
			}
			a:VISITED /*鼠标点过后的颜色*/
			{
				color: red;
			}
		</style>		
	<body>
		<h1> 列表样式 </h1>
		<hr/>
		<ul>
			<li><a href="#">三国</a></li>
			<li><a href="#">水浒</a></li>
			<li><a href="#">红楼梦</a></li>
			<li><a href="#">西游记</a></li>
		</ul>		
	</body>	
</html>