网站中导航栏的设计

最新推荐文章于 2024-04-18 12:07:41 发布

BugMaker2002

最新推荐文章于 2024-04-18 12:07:41 发布

阅读量1.7k

点赞数 1

分类专栏： html5 标签 CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_57317650/article/details/126231013

版权

html5 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

标签

6 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

在我们平时做项目设计网站的时候，常常需要做导航栏的设计，而基本的导航栏的设计都是遵循了一定的模板的，如图所示：因此本文就介绍一下导航栏设计的注意事项以及一些小的技巧。

首先上图这个导航栏应该算是较为复杂的一种，因为它的功能按钮都是放在了靠右的位置，因此我们肯定是想着写一个div标签将其放着，并且最好均为超链接，为了制作版心方便代码的调用，我们将写一个名为wrapper的标签，高度未给出，只给出了宽度和水平居中，这也是为了方便以后调用，将其抽象出来，同理我们又写了一个名为search的大盒子，设置高度为52px，宽度由浏览器自定义。且我们并未将a标签展现为行内块标签，否则其border长度将变为52px，在以后我们做导航栏一般都是用li标签包裹a标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Document</title>
    <style> 
        a{
            text-decoration: none;
            color: #333;
        }

        ul,
        ol{
          list-style: none;
        }

        *{
            margin: 0;
            padding: 0;
        }

        /* 这一步是为了制作版心方便代码的调用 */
        .wrapper{
            width: 1240px;
            margin: 0 auto;
            background-color: aqua;
        }

        /* 这一步是制作大的搜索栏 */
        .search{
            height: 52px;
            background-color: black;
        }

        /* 这一步对搜索栏中的版心进行居中处理 */
        .search .wrapper{
            height: 52px;
        }

        /* 先将父元素向右浮动 */
        ul{
            float:right;
        }

        /* 再将子元素向左浮动 */
        li{
            float: left;
            /* 设置行高，便于垂直居中 */
            line-height: 52px;
        }

        a{
            /* 注意，此处并未将a标签展现为行内块标签，否则其border长度将变为52px */
            padding: 0 16px;
            font-size: 14px;
            border-left: 1px solid #000;
        }
            /* 选中第一个li再对其子元素的左边距进行清楚 */
        li:first-child a{
            border-left: none;
        }
    </style>
</head>
<body>
    <div class="search">
        <div class="wrapper">
            <!-- 在以后我们做导航栏一般都是用li标签包裹a标签 -->
            <ul>
                <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>
        </div>
    </div>
</body>
</html>