CSS制作简单的横向菜单

1.先写一个列表，建立菜单的结构

<span style="font-size:14px;"><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></span>

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

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

3.使菜单列表横向，需要加入一个非常重要的属性“float:left”，这是菜单横向的关键所在

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

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

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

5.大多数浏览器对于链接样式的字体颜色为蓝色，我们可以设置为自己喜欢的颜色。之后我们可以设置菜单的整体样式，将菜单背景色设置为红色，字体颜色设置为白色，字体大小设为14px，字体类型根据自己的喜好

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

效果图如下：

可以看出字体没有居中，加入text-align:center使字体居中

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

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

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff;}
.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></span>

效果图如下：

有木有觉得菜单选中的样式很丑，所以我们需要在标签a的样式表中加入一个重要的属性display:block

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; 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></span>

最终效果如下：

7.最终的代码

<span style="font-size:14px;"><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:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微软雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; 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></span>

CSS制作简单的横向菜单

猜你喜欢