静态网页制作：[4]制作头部导航

2025-11-16 15:18:39

1、我们需要指定导航数量，我现在就用4个，我要在baidu1_3里面制作4个导航，我们就需要制作4个div，但是我想他们都是一样的，那么我们就可以用class来调用了

<html>

<head>

</head>

<body>

<div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div>

</div>

</div>

</body>

</html>

class=什么没关系，也只是个名字，你爱叫什么叫什么，你就叫baidujingyan也没关系。id是具有唯一性的，每个id都是不同的。而像class，它长的都一样，我们就可以用class调用

静态网页制作：[4]制作头部导航

2、下面我们给它定义属性，

*{background:#FF3399}

#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}

#baidu1{background:#FF6666; height:100px; width:1000px;}

#baidu2{background:#FFCCFF; height:400px; width:1000px}

#baidu3{background:#66FFCC; height:200px; width:1000px}

#baidu1_1{background:#0033FF; height:80; width:80px; float:left}

#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left; font-size:36px; line-height:80px}

#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}

.daohang{background:#FF0000; height:20px; width:250px; float:left}

这里的像素也是需要计算的，我们看看效果

静态网页制作：[4]制作头部导航

3、这样我们只看到一条红色，看不到四块啊，那么怎么来弄呢，我们继续给他添加属性

*{background:#FF3399}

#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}

#baidu1{background:#FF6666; height:100px; width:1000px;}

#baidu2{background:#FFCCFF; height:400px; width:1000px}

#baidu3{background:#66FFCC; height:200px; width:1000px}

#baidu1_1{background:#0033FF; height:80; width:80px; float:left}

#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left; font-size:36px; line-height:80px}

#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}

.daohang{background:#FF0000; height:20px; width:249px; float:left; margin-left:1px}

我们用margin-left:1px来留出空隙，我们来看看效果，现在已经可以看出有4块了

静态网页制作：[4]制作头部导航

4、下面我们设置导航，

<html>

<head>

</head>

<body>

<div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div>

</div>

</div>

</body>

</html>

我们看看。文字都在左边，不好看啊，那我们怎么让它在中间啊

静态网页制作：[4]制作头部导航

5、我们给它继续定义属性，居中，字号，行高

*{background:#FF3399}

#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}

#baidu1{background:#FF6666; height:100px; width:1000px;}

#baidu2{background:#FFCCFF; height:400px; width:1000px}

#baidu3{background:#66FFCC; height:200px; width:1000px}

#baidu1_1{background:#0033FF; height:80; width:80px; float:left}

#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left; font-size:36px; line-height:80px}

#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}

.daohang{background:#FF0000; height:20px; width:249px; float:left; margin-left:1px; text-align:center; font-size:14px; line-height:20px}

text-align:center文字居中，这样我们在看看效果，现在文字都是居中的

静态网页制作：[4]制作头部导航

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。