CSS制作简单的纵向菜单

最新推荐文章于 2024-04-22 16:58:34 发布

JollyLee1127

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量3k

点赞数 4

分类专栏： HTML/CSS 文章标签： css 纵向菜单

本文链接：https://blog.csdn.net/Jolly_1127/article/details/50207477

版权

HTML/CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>