简单网页导航栏的制作（后续添加新内容）

最新推荐文章于 2023-04-26 11:15:55 发布

zimingyo

最新推荐文章于 2023-04-26 11:15:55 发布

阅读量1.1k

点赞数

分类专栏： html+css 文章标签： html css css3

本文链接：https://blog.csdn.net/zimingyo/article/details/123107231

版权

html+css 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

使用li的方法制作导航栏

<!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">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
           
        }

        
        .bigbox{
            width: 1300px;
            height: auto;
            background-color:white;
            margin: 0 auto;
           
        }
        .bigbox .top{
            width: 1300px;
            height: 20px;
            background-color: aqua;
            text-align: center;
            line-height: 20px;
        }



        .bigbox .nav{
           width: 1300px;
           height: 40px;
           box-sizing: border-box;
           /* 防止父盒子被撑大 */
           background-color: black;

           overflow: hidden;
           /* 解决子元素对父元素的崩塌问题 */
          
        }

         ul{
            height: 38px;
            background-color: palevioletred;
            line-height: 40px;
            list-style: none;
            margin:1px 1px;
            /* box-sizing: border-box; */
            /* overflow: hidden; */
            
        }
        .nav li{
            line-height: 36px;
            background-color:burlywood;
            border-radius: 2px;
            margin: 0 1px;
            float: left;
        }
        .nav a{
            padding: 0 16px;
            text-decoration: none;
            text-align: center;
            font-size: 10px;
            color:black;
        }
        .nav li:hover{
            background-color: orange;
        }

    </style>
</head>
<body>
    <div class="bigbox">
        <div class="top">
           前站导航 
        </div>
        <div class="nav">
            <ul>
                
                <li><a href="https://www.bilibili.com/medialist/detail/ml1132340269?type=1" target="_blank">java复习</a></li>
                <li><a href="https://www.kuangstudy.com/course" target="_blank">专业知识复习</a></li>
                <li><a href="http://jwc3.yangtzeu.edu.cn/" target="_blank">长江大学文理学院个人信息登录</a></li>
                <li><a href="https://gitee.com/wzim" target="_blank">个人gitee</a></li>
                <li><a href="https://www.bilibili.com/" target="_blank" >bilibili</a></li>
                <li><a href="http://wlxy.fanya.chaoxing.com/portal" target="_blank">超星(学习通)</a></li>
                <li><a href="http://yun.chaoxing.com" target="_blank">超星云数据传输</a></li>
                <li><a href="https://www.csdn.net/" target="_blank">CSDN</a></li>
              

            </ul>
        </div>
    </div>
</body>
</html>

效果图
在这里插入图片描述

传统标签导航栏

<!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">
    <title>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        /* 后代: box里面的a */
        .box a {
            padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>

    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪</a>
        <a href="#">新浪导航新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

效果图
在这里插入图片描述

zimingyo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单网页导航栏的制作（后续添加新内容）

使用li的方法制作导航栏<!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"> &lt
复制链接

扫一扫