Dreamweaver网页制作初级教程:导航按钮的定义

时间:2026-02-15 02:38:14

1、上节,我们讲述了div缝隙的定义,那么导航栏怎么来定义呢?今天小编就跟大家说一下。

Dreamweaver网页制作初级教程:导航按钮的定义

2、我们这次的定义,当然应该在

   <div id="header_b">

下方定义,因为是子集关系,定义代码为:

            <div class="menu">首页</div>

Dreamweaver网页制作初级教程:导航按钮的定义

3、当然,导航不可能一个,所以我们输入:

<div class="menu">首页</div>

                <div class="menu">电影</div>

                <div class="menu">图片</div>

                <div class="menu">影评</div>

Dreamweaver网页制作初级教程:导航按钮的定义

4、当然,我们这些应该继续在css中定义,因为他也是样式的一种,但是,定义方式发生了改变。不用#了,而应该用.

代码:

.menu{width:200px;height:20px;background-color:#63F;float:left}

Dreamweaver网页制作初级教程:导航按钮的定义

5、那么新的问题出现了,我们设置的导航页,既没有居中对齐,而且最后还空出来了底色,并不美观。

Dreamweaver网页制作初级教程:导航按钮的定义

6、那么,应该如何将它修改呢。

文字居中的代码为:

text-align:center

Dreamweaver网页制作初级教程:导航按钮的定义

7、然后,我们用代码:

margin-left:2px

可以让导航栏出现2像素的小缝隙,以便美观和观察。

Dreamweaver网页制作初级教程:导航按钮的定义

8、预览一下:

Dreamweaver网页制作初级教程:导航按钮的定义

© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com