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

时间：2024-10-19 20:24:18

上节我们讲了头部的细分，今天我们讲下怎么制作导航

工具/原料

代码

电脑

方法/步骤

1、我们酋篚靶高需要指定导航数量，我现在就用4个，我要在baidu1_3里面制作4个导航，我们就需要制作4个div，但是我想他们都是一样的，那帏菱嗨辩么我们就可以用class来调用了<html><head><linkhref="main.css"type="text/css"rel="stylesheet"><title></title></head><body><divid="baidu"> <divid="baidu1"> <divid="baidu1_1"><imgsrc="QQ图片20141212170400.jpg"></div> <divid="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <divid="baidu1_3"> <divclass="daohang"></div> <divclass="daohang"></div> <divclass="daohang"></div> <divclass="daohang"></div> </div> </div> <divid="baidu2"></div> <divid="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><linkhref="main.cs霜杼厮贿s"type="text/css"rel="stylesheet"><title></title></head><body><divid="baidu"> <divid="baidu1"> <divid="baidu1_1"><imgsrc="QQ图片20141212170400.jpg"></div> <divid="baidu1_2">这里我本来是想放动画的,动画没有设计，所以就不放了</div> <divid="baidu1_3"> <divclass="daohang">导航</div> <divclass="daohang">新闻</div> <divclass="daohang">购物</div> <divclass="daohang">图片</div> </div> </div> <divid="baidu2"></div> <divid="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文字居中，这样我们在看看效果，现在文字都是居中的