CSS 3之菜单的横竖转换

最新推荐文章于 2024-07-23 14:07:14 发布

菇毒

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125566632

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

菜单的横竖转换

1. 菜单的横竖转换
2. 无序表格菜单

1. 菜单的横竖转换

在设计网页时，不但能创建垂直导航菜单，也能创建水平导航菜单；
例子1：垂直菜单效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜案横竖转换</title>
		<style type="text/css">
			body{
				background-color: #468847;
			}
			div{
				font-family: 楷体;			
			}
			div ul{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<div id="s">
			<ul>
				<li><a href="#">电影</a></li>
				<li><a href="#">电视剧</a></li>
				<li><a href="#">综艺</a></li>
				<li><a href="#">动漫</a></li>
			</ul>
		</div>
	</body>
</html>

20220517
水平效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜案横竖转换</title>
		<style type="text/css">
			body{
				background-color: #468847;
			}
			div{
				font-family: 楷体;			
			}
			div ul{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			div li{
				border-bottom: 1px solid #ed9f9f;
				float: left;
				width: 150px;
			}
			div li a{
				display: block;
				padding: 5px 5px 5px 0.6em;
				text-decoration: none;
				border-left: 12px solid #ebebeb;
				border-right: 1px solid #EBEBEB;
			}
		</style>
	</head>
	<body>
		<div id="s">
			<ul>
				<li><a href="#">电影</a></li>
				<li><a href="#">电视剧</a></li>
				<li><a href="#">综艺</a></li>
				<li><a href="#">动漫</a></li>
			</ul>
		</div>
	</body>
</html>

20220517 设置超链接<a>样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜案横竖转换</title>
		<style type="text/css">
			body{
				background-color: #468847;
			}
			div{
				font-family: 楷体;			
			}
			div ul{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			div li{
				border-bottom: 1px solid #ed9f9f;
				float: left;
				width: 150px;
			}
			div li a{
				display: block;
				padding: 5px 5px 5px 0.6em;
				text-decoration: none;
				border-left: 12px solid #ebebeb;
				border-right: 1px solid #EBEBEB;
			}
			div li a:link,div li a:visited{
				background-color: #F0F0EE;
				color: #429DDD;
			}
			div li a:hover{
				background-color: #7c7c7c;
				color: #FFFF6F;
			}
		</style>
	</head>
	<body>
		<div id="s">
			<ul>
				<li><a href="#">电影</a></li>
				<li><a href="#">电视剧</a></li>
				<li><a href="#">综艺</a></li>
				<li><a href="#">动漫</a></li>
			</ul>
		</div>
	</body>
</html>

20220517

2. 无序表格菜单

例子2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无许表格菜单</title>
		<style type="text/css">
			body{
				background-color: #F2DEDE;
			}
			div{
				width: 200px;
				font-family: 宋体;
			}
			div ul{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<div id="">
			<ul><li><a href="#">电影</a></li>
				<li><a href="#">电视剧</a></li>
				<li><a href="#">综艺</a></li>
				<li><a href="#">动漫</a></li>
			</ul>
		</div>
	</body>
</html>