css+ul+li制作导航

最新推荐文章于 2021-09-17 20:05:27 发布

iteye_18591

最新推荐文章于 2021-09-17 20:05:27 发布

阅读量286

点赞数

文章标签： xhtml

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--

.my_nav{
height:30px; width:700px; background-image:url(nav_bg.jpg); background-repeat:repeat-x; margin:0px 0px; } .my_nav ul{ list-style:none; margin:0px 0px; } .my_nav ul li{ float:left; margin:0px 0px; padding:5px 7px; background-image:url(nav_li.jpg); background-repeat:no-repeat; font-size:16px; text-align:center; background-position: right center; } .my_nav ul a{ color:#FFFFFF; text-decoration:none; } .my_nav ul a:hover{ color:#FFCC00 } --> </style> </head>

<body>
<div class="my_nav">
<ul> <li class="on" ><a href="/shows/index/en">Home</a></li> <li><a href="/shows/newsletter/en">Newsletter</a></li> <li><a href="/shows/talent/en">Talent</a></li> <li><a href="/shows/celeb/en">Celebrity</a></li> <li><a href="/shows/com/en">Company</a></li> <li><a href="/shows/event/en">Event</a></li> <li><a href="/shows/job/en">Job</a></li> <li><a href="/shows/contact/en">Contact</a></li> <li><a href="/shows/service/en">Service</a></li> </ul> </div> </body> </html> **********************************************************************************************

第一步、编写横向菜单的HTML代码架构

请将以下代码添加到HTML文档的导航栏区域中。

<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Co<wbr>de52.Net"&gt;Co<wbr>de52.Net&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.yahoo.com"&gt;Yahoo.Com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.google.com"

<strong>第二步、编写CSS代码
1、设置公共样式</strong>
请将以下CSS代码添加到HTML文档的&lt;head&gt;...&lt;/head&gt;标签范围中。</wbr></wbr>

<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif;
}
#menu, #menu li {
list-style:none;
padding:0;
margin:0;
}
</style>

大家都知道，<ul>中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来。
Tips：因为我们现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果您在 body 或其他地方已经重设了默认效果，以上代码可以去掉
2、让文字横排
大家都知道，<ul>标签下的项目<li>默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。

<style type="text/css">
#menu li {
float:left;
}
</style>

3、设置链接样式：

<style type="text/css">
#menu li a {
display:block;
padding:8px 50px;
background:#3A4953;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
</style>

我们用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果你的菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：

<style type="text/css">
#menu li a {
display:block;
width:150px;
height:30px;
line-height:30px;
text-align:center;
background:#3A4953;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
</style>

4、链接悬停效果：
通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，你可以在CSS悬停属性上定义背景图片。

<style type="text/css">
#menu li a:hover {
background:#146C9C;
color:#fff;
}
</style>

这里的代码一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。

<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Co<wbr>de52.Net"&gt;Co<wbr>de52.Net&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.yahoo.com"&gt;Yahoo.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.google.com" type="text/css"&gt;
#menu li a.last {
border-right:0;
}
&lt;/style&gt;</wbr></wbr>

好了，到这里一个简单的横向导航菜单就制作完成了，是不是很简单？ 下面给出完整代码：

<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif;
}
#menu, #menu li {
list-style:none;
padding:0;
margin:0;
}
#menu li {
float:left;
}
#menu li a {
display:block;

padding:8px 50px;
background:#3A4953;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a:hover {
background:#146C9C;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a.last {
border-right:0;
}
</style>

<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Co<wbr>de52.Net"&gt;Co<wbr>de52.Net&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.yahoo.com"&gt;Yahoo.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</wbr></wbr>

转自:

http://blog.sina.com.cn/s/blog_611ab6c50100g5fd.html

iteye_18591

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+ul+li制作导航

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&amp
复制链接

扫一扫