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

时间：2024-10-13 05:37:24

1、我们酋篚靶高需要指定导航数量，我现在就用4个，我要在baidu1_3里面制作4个导航，我们就需要制作4个div，但是我想他们都是一样的，那帏菱嗨辩么我们就可以用class来调用了<html><head><link href="main.css" type="text/css" rel="stylesheet"><title></title></head><body><div id="baidu"> <div id="baidu1"> <div id="baidu1_1"><img src="QQ图片20141212170400.jpg"></div> <div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <div id="baidu1_3"> <div class="daohang"></div> <div class="daohang"></div> <div class="daohang"></div> <div class="daohang"></div> </div> </div> <div id="baidu2"></div> <div id="baidu3"></div></div></body></html>class=什么没关系，也只是个名字，你爱叫什么叫什么，你就叫baidujingyan也没关系。id是具有唯一性的，每个id都是不同的。而像class，它长的都一样，我们就可以用class调用

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}这里的像素也是需要计算的，我们看看效果

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、下面我们设置导航，<挢旗扦渌;html><head><link href="main.css" type="text/css" rel="stylesheet"><title></title></head><body><div id="baidu"> <div id="baidu1"> <div id="baidu1_1"><img src="QQ图片20141212170400.jpg"></div> <div id="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <div id="baidu1_3"> <div class="daohang">导航</div> <div class="daohang">新闻</div> <div class="daohang">购物</div> <div class="daohang">图片</div> </div> </div> <div id="baidu2"></div> <div id="baidu3"></div></div></body></html>我们看看。文字都在左边，不好看啊，那我们怎么让它在中间啊

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文字居中，这样我们在看看效果，现在文字都是居中的