手动做一个小的导航栏-Date0414

最新推荐文章于 2022-04-14 17:18:22 发布

AKATian7

最新推荐文章于 2022-04-14 17:18:22 发布

阅读量192

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_43988365/article/details/105530436

版权

设置一个如上的网页导航栏
在这里插入图片描述
首先，需要一个盒子将这些超链接装起来，所以先创建box，一般导航栏中的超链接都是一个一个的无序列表，再创建8个无序列表将超链接放入其中，

得到一个上图样子的网页，然后将项目的符号去掉，并设置左浮动，将元素从左向右排列
在这里插入图片描述
之后网页变成这个样子，发现背景图片没了，其实是没有解决高度塌陷问题，由于设置了浮动，元素脱离文档流，子元素将不会撑开父元素，只要将BFC打开问题就解决了设置overflow为hidden

解决了高度塌陷以后，设置无序列表的宽度和位置
在这里插入图片描述
大概的工作完成，接下来是设置超链接的属性了，去掉下划线，文字居中，以及超链接的宽度

然而并没有想的那样居中，因为超链接是内联元素，不能设置宽度高度，所以要将内联元素转化为块元素display:block
在这里插入图片描述
最后，设置超链接鼠标移入时的颜色为红色，整个导航栏制作成功，代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>导航栏</title>

        <style>

            /*清除默认样式*/
            * {
                padding: 0;
                margin: 0;
            }

            .nav {
                /*去掉项目符号*/
                list-style: none;

                background-image: url(ting.JPG);

                width: 1000px;
                /*居中*/
                margin: 30px auto;
                /*打开BFC解决高度塌陷*/
                overflow: hidden;

            }

            a {
                /*设置a为块元素*/
                display: block;
                /*设置超链接的宽度*/
                width: 250px;
                /*超链接文字居中*/
                text-align: center;
                /*设置内边距*/
                padding: 5px 0;
                /*去掉下划线*/
                text-decoration: none;
                /*设置字体颜色*/
                color: blueviolet;
                /*字体加粗*/
                font-weight: bold;
            }

            .nav li {
                /*让li标签向左浮动*/
                float: left;
            }

            a:hover {
                /*设置超链接鼠标移入时的颜色*/
                background-color: red;
            }


        </style>
    </head>
    <body>
        <ul class="nav">
            <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>
            <li><a href="#">再见</a></li>
            <li><a href="#">再见</a></li>
        </ul>
    </body>
</html>

AKATian7

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
手动做一个小的导航栏-Date0414

首先，需要一个盒子将这些超链接装起来，所以先创建box，一般导航栏中的超链接都是一个一个的无序列表，再创建8个无序列表将超链接放入其中，得到一个上图样子的网页，然后将项目的符号去掉，并设置左浮动，将元素从左向右排列设置无序列表的宽度和位置，居中显示...
复制链接

扫一扫