day4 CSS导航栏的制作

一荤一素.

于 2024-04-08 20:26:16 发布

阅读量118

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/zzh3315689707/article/details/137520945

版权

本文介绍了CSS导航栏在网站设计中的重要性，详细解析了其组成（选项列表、搜索框、子选项列表和LOGO），并提供了CSDN首页部分导航栏的HTML及CSS代码示例，帮助读者了解如何创建和定制自己的CSS导航栏。

摘要由CSDN通过智能技术生成

CSS 导航栏

听到导航栏大家并不陌生，CSS导航栏是网站中一个基本组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。

导航栏的组成：

常见导航栏一般由：

1.选项列表 2.搜索框 3.子选项列表 4.LOGO 组成。

CSS可以用来创建各种样式的导航栏，以下是一个基本的CSS导航栏示例：

CSDN首页部分导航栏如下：

代码如下：

<title>CSDN</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            background-color: hsla(0, 0%, 98%, .8);
        }
        .dhl1{
            width:500px;
            height:48px;
            background-color:#fff;
            margin:0 auto;
            box-shadow:0px 2px 1px rgb(100, 96, 96);
        }
        .dhl1_img{
            width:80px;
            height:48px;
            margin-right:8px;
            float:left;
        }
        .ul1{
            list-style: none;
            font-size:14px;
            line-height:48px;
            float:left;
        }
        .li1{
            width:28px;
            height:48px;
            padding:0px 10px;
            float:left;
        }
        .li2{
            width:48px;
            height:48px;
            padding:0px 10px;
            float:left;
        }
        .li3{
            width:54.53px;
            height:48px;
            padding:0px 10px;
            float:left;
        }
        .li4{
            width:54.39px;
            height:48px;
            padding:0px 10px;
            float:left;
        }
        .li1:hover{
            background-color: hsla(0, 0%, 98%, .8);
        }
        .li2:hover{
            background-color: hsla(0, 0%, 98%, .8);
        }
        .li3:hover{
            background-color: hsla(0, 0%, 98%, .8);
        }
        .li4:hover{
            background-color: hsla(0, 0%, 98%, .8);
        }
    </style>
</head>
<body>
    <div class="dhl1">
        <div class="dhl1_img">
            <img src="./img/20201124032511.png" width="80px"height="44px"style="margin-top:2px;"/>
        </div>
        <ul class="ul1">
            <li class="li1">博客</li>
            <li class="li1">学习</li>
            <li class="li1">下载</li>
            <li class="li1">社区</li>
            <li class="li2">
                <img src="./img/20231212032739.png"width="20px"height="33.67px"style="float:left;top:6px;position: relative;"/>
                知道
            </li>
            <li class="li3">GitCode</li>
            <li class="li4">InsCode</li>
        </ul>
    </div>
</body>

以上是导航栏的制作大家快去试试吧！

一荤一素.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day4 CSS导航栏的制作

CSS 导航栏听到导航栏大家并不陌生，CSS导航栏是网站中一个基本组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。导航栏的组成：常见导航栏一般由：1.选项列表2.搜索框 3.子选项列表 4.LOGO 组成。
复制链接

扫一扫