菜单的横竖转换
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>
水平效果
<!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>
设置超链接
<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>
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>