制作web网页头部导航栏

2023-10-29 23:18| 来源: 网络整理| 查看: 265

（1）新建HTML文件。写入代码。

Title

（2）网页头部导航栏的一堆按钮实际是由和标签制作的，在body中写入代码。

首页影像空间资讯影展器材热点赛事

插入后的代码

Title 首页影像空间资讯影展器材热点赛事

运行效果图。

（3）现在都是竖着摆的，所以很明显需要修改属性，新建index.css文件。并在标签中加入如下代码调用css样式表.

插入位置别错了

在index.css文件中，写入代码，用以使网页主体铺满html页面。

body{ width: 100%; height: 100%; } *{ /*清除所有标签的初始内外边距*/ padding:0; margin:0; }

效果

给头部导航栏加个色，一样在index.css文件中写入

.nav{ background-color: deepskyblue; /*颜色*/ height:140px;/*高度140像素*/ width: 100%;/*宽度为的100%，也就是相同宽度*/ line-height:80px;/*行高，看文字位置你就明白了*/ position: absolute;/*绝对定位*/ top: 0px;/*距离顶部0像素*/ left: 0;/*距离左侧边界0px*/ }

效果如下，导航栏长度是拉满，左右不会空出来,行高80px你也看得懂了吧。