CSS制作横向菜单

最新推荐文章于 2023-11-09 16:24:44 发布

tuke_tuke

最新推荐文章于 2023-11-09 16:24:44 发布

阅读量984

点赞数

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

本文链接：https://blog.csdn.net/tuke_tuke/article/details/49300993

版权

HTML/CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第一步：建立一个无序列表，并去掉样式{list-style:none;}

代码是：

.test ul{list-style:none;}
<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>

css的样式是：“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。

.menu ul{list-style:none;}

第二步：关键的浮动

这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面。

CSS定义为：

.menu  li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

效果是：

第三步：将链接以块级元素显示，并设置a链接的颜色

菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增加display:block，使链接以块级元素显示。

同时我们微调了如下细节：
用text-align:center将菜单文字居中；
用height:30px增加背景的高度；
用margin-left:3px使每个菜单之间空3px距离；
用line-height:30px;定义行高，使链接文字纵向居中；

<span style="font-size:24px;">.menu li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.menu a{display:block；text-align:center;height:30px;}
.menu a:link{color:#666;text-decoration:none;}
.menu a:visited{color:#666;text-decoration:underline;}
.menu a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:#FF0000} </span>

效果是：

最终代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
  <style type="text/css">
      .menu ul{list-style:none;}
 .menu   li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
 .menu   a{display:block;text-align:center;height:30px;}
 .menu   a:link{color:#666;text-decoration:none;}
 .menu   a:visited{color:#666;text-decoration:underline;}
 .menu   a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:#FF0000} 
 </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>

tuke_tuke

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS制作横向菜单

第一步：建立一个无序列表，并去掉样式{list-style:none;}代码是：.test ul{list-style:none;} 首页家教信息兼职工作跳蚤市场招聘信息讲座信息 css的样式是：“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。.menu ul{list-style:none;}
复制链接

扫一扫