Web程序开发-一个非常好的详细的css制作导航条的简便方法[智睿软件

以文本方式查看主题

-  智睿软件_技术交流论坛  (http://zhirui.net/bbs/index.asp)
--  Web程序开发  (http://zhirui.net/bbs/list.asp?boardid=22)
----  一个非常好的详细的css制作导航条的简便方法  (http://zhirui.net/bbs/dispbbs.asp?boardid=22&id=34)

-- 作者：zhirui
-- 发布时间：2009-10-26 20:37:05
-- 一个非常好的详细的css制作导航条的简便方法
曾经想利用css方法创建导航条，但是，实在是没有接触过，不知道该怎么弄。在网上下载了一些代码，可是，有些代码真的不敢随便下载，里
边还加载Java代码，搞的页面不干净！今天，藻露堂小妹就这个问题，详细以全面的步骤给大家分享我所做的这么一个导航条！其实，你看完
这些步骤，亲自尝试一遍之后，你就会发现，很简单的哦！
步骤如下：
一、先建立自己的站点，站点文件夹，同时，创建两个文件，一个是“导航.html”一个是“导航.css”。
二、在“导航.html”中输入你需要的导航目录，如：“医院首页医院简介名医协会专家团队在线咨询预约挂号联系我们”等内容，注意
：每四个字之间做好留一个空格。
三、将“导航.html”和“导航.css”相互链接
【单击“窗口”——“css样式表”，打开css样式表面板之后，单击右下角“附加样式表”按钮，就和平时我们用得“超级链接”按钮一样】
四、在出现的界面上选择浏览，选择“导航.css”，链接完成。这时，我们会在“导航.html”的“head”标签之间发现，多了一段代码
“<link href="导航.css" rel="stylesheet" type="text/css" />”
五、打开“导航.html”，在css面板上点击“新建css规则”选择“类”，名称定义为“.dh”点击“确定”，在接着弹出的界面上也直接点击
“确定”，也就是说先建立一个空的“css类”
六、在“css面板”上，选中“.dh”并添加“.dh”属性如下：
“padding：5px；width：100”其它的还需要设置背景色，字体颜色，字体大小，这里就不多说了!
七、将以上步骤做完后，选中设计视图中的“医院首页”，然后，在属性面板的样式中选择“dh”
八、对“医院简介”等其它项重复以上动作！
九、设置伪类“:hover”方法是：打开“导航.css”，将原有代码复制一遍，回车几次之后，粘贴上。同时，将“.dh {”改为“.dh:hover {
”，将“dh:hover”中的背景颜色换一下。
十、打开“导航.html”给“医院首页”等项目创建超级链接，一个一个链接！
十一、重复第七部动作。
十二、单击“保存”然后你打开“导航.html”看看是不是已经有效果了!
呵呵！由于时间关系，说得还不是很详细，比如，如何让导航条“竖向”或者“横向”排列，如何去掉下划线等等！
有需要的朋友，请加我QQ：402839130，我会进一步和大家探讨！代码示例演示地址：http://www.zaolutang.com
补充：源代码：
我做的两个页面，一个是dh.html，一个是dh.css，下面我将代码直接复制给大家！绝对可以用的！
dh.html中代码如下：
<html>
<head>
<title>daohangtiao</title>
<link href="dh.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<a href="www.zaolutang.com" class="dht">网站首页</a><a href="" class="dht">公司简
介</a><a href="" class="dht">产品展示</a><a href="" class="dht">在线购买
</a><a href="" class="dht">联系我们</a>
</body>
</html>
dh.css中代码如下：
.dht {
font-family: "宋体";
font-size: 12px;
color: #FF0099;
background-color: #00CCFF;
display: inline;
font-weight: bold;
padding: 5px;
width: 80px;
margin: 1px;
text-align: center;
text-decoration: none;
}

.dht:hover {
font-family: "宋体";
font-size: 12px;
color: #0000FF;
background-color: #FFFFFF;
display: inline;
font-weight: bold;
padding: 5px;
width: 80px;
margin: 1px;
text-align: center;
text-decoration: none;
}