您的位置：首页 > Web前端 > CSS

CSS制作简单的纵向菜单

2015-12-07 16:35 621 查看
1.先写一个列表，建立菜单的结构

<span style="font-size:14px;"><span style="font-size:14px;"><div class="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul>
</div></span></span>


2.隐藏标签li的默认样式

<span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu ul {list-style-type:none;}
</style></span></span>


3.调整外部DIV和菜单标签li的高度和宽度，并且取消链接的下划线，使菜单ul和外部DIV的边界属性值为0

<span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100px;}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {width:100px; height:35px;}
.menu ul li a {text-decoration:none;}
</style></span></span>


4.接下来美化菜单的样式，将菜单的背景设为蓝色，字体颜色设为白色，字体大小为14px，字体类型根据自己的喜好

<span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100px; background:#0099FF; height:210px; font-size:14px; font-family: "微软雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff;}
</style></span></span>


效果图如下：



5.最后，我们所要设置的就是鼠标移入菜单（:hover）、鼠标点击菜单（:active）、鼠标选中菜单（:focus）的样式，这就需要用到CSS的伪类

<span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100px; background:#0099FF; height:210px; font-size:14px; font-family: "微软雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff; display:block;}
.menu ul li a:hover {background:#fff; color:#000;}
.menu ul li a:active {background:#fff; color:#000;}
.menu ul li a:focus {background:#fff; color:#000;}
</style></span></span>


最终效果图如下：



7.最终的代码：

<span style="font-size:14px;"><span style="font-size:14px;"><!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=gb2312" />
<title>无标题文档</title>
<style>
.menu {width:100px; background:#0099FF; height:210px; font-size:14px; font-family: "微软雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff; display:block;}
.menu ul li a:hover {background:#fff; color:#000;}
.menu ul li a:active {background:#fff; color:#000;}
.menu ul li a:focus {background:#fff; color:#000;}
</style>
</head>

<body>
<div class="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul>
</div>
</body>
</html>
</span></span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航