制作web网页头部导航栏

最新推荐文章于 2024-04-14 12:10:13 发布

予我心安A3

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量2.8w

点赞数 102

分类专栏： web 文章标签：前端 webview wpf

本文链接：https://blog.csdn.net/yuwoxinana3/article/details/121712637

版权

web 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

</body>
</html>

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

<!--头部导航栏 -->
<div class="nav" >
    <ul class="ul_top">

        <li><a href="#">首页</a></li>
        <li><a href="#">影像空间</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">影展</a></li>
        <li><a href="#">器材</a></li>
        <li><a href="#">热点赛事</a></li>
    </ul>
</div>

插入后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--头部导航栏 -->
<div class="nav" >
    <ul class="ul_top">

        <li><a href="#">首页</a></li>
        <li><a href="#">影像空间</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">影展</a></li>
        <li><a href="#">器材</a></li>
        <li><a href="#">热点赛事</a></li>
    </ul>
</div>

</body>
</html>

运行效果图。

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

<link href="index.css" type="text/css" rel="stylesheet" />

插入位置别错了

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

body{
    width: 100%;
    height: 100%;
}

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

效果

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

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

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

对头部导航栏中的li进行属性设置

.nav li{
    float:left;/*浮动*/
    width:75px;/*设置一个<li>宽度75px*/
    text-align:center;/*文本居中*/
}

效果

再对<ul>标签进行设置

.ul_top{
    list-style: none;/*去除列表格式，消除小黑点*/
    position: absolute;
    top: 70px;/*距离顶部70px*/
    left: 60px;/*距离左侧70px*/
}

效果如图,位置还可以

接下来对<a>标签处理，下划线太丑了

.nav a{
    display:block;/*块状显示，一块块的整齐*/
    color:white;/*内容颜色白色*/
    text-decoration: none;/*去掉下划线*/
    width: 80px;/*每个宽度80px*/
    line-height: 30px;/*行高30px*/
}

效果图，是不是好多了

.nav a:hover{
    color:white;/*鼠标置于上方显示白色*/
    background:green;/*背景色为绿色*/
}

鼠标放上去

还可以美化一下，在之前的.nav{ }中加上一句

background-image: url("图片路径");

放上一张和头部导航栏一样的图片作背景，

还可以吧

予我心安A3

关注

102
点赞
踩
442

收藏

觉得还不错? 一键收藏
打赏
15
评论
制作web网页头部导航栏

（1）新建HTML文件。写入代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>（2）网页头部导航栏的一堆按钮实际是由<ul>和<li>标签制作..
复制链接

扫一扫