用CSS设计横向标签式导航菜单

最新推荐文章于 2021-04-12 12:36:18 发布

codeshark

最新推荐文章于 2021-04-12 12:36:18 发布

阅读量1.9k

点赞数

分类专栏： Div+CSS 文章标签： css xhtml 体育 float 娱乐 html

本文链接：https://blog.csdn.net/codeshark/article/details/2644181

版权

Div+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

XHTML中元素间的CSS属性继承：继承指的是每个元素可以有多个样式设计，在通常情况下，它遵循的是最外层的样式设计原则，如果遇到对其自身的样式设计，它将在继承最外层样式设计的基础之上，优先考虑自身的样式设计。

<!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>用CSS设计横向标签式导航</title>

<style type="text/css">

#nav{height:26px;border-bottom:2px solid #2788da;}

#nav li{float:left;font-size:14px;font-weight:bold;}

#nav li a{color:#000000;text-decoration:none;padding-top:6px;display:block;width:97px;height:22px;text-align:center;background-color:#9999CC;margin-left:2px;}

#nav li a#current{background-color:#2788da;color:ffffff;}

/*通过cuttent标签指定当前默认频道*/

#nav li a:hover{background-color:#bbbbbb;color:#ffffff;}

/*display:block它使得a连接对象的显示方式由一段文本改变成一个块状对象*/

/*为了美观可以将background-color颜色值改成background-image用圆角图片替换之*/

</style>

</head>

<body>

<ul id="nav">

<li><a href="#" id="current">首页</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>

<li><a href="#">娱乐</a></li>

</ul>

</body>

</html>