html导航栏相关知识

最新推荐文章于 2024-05-19 09:58:49 发布

不会咋办

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量1.9k

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_43201652/article/details/126147571

版权

1、设置导航栏外边距
margin-left: 50px;//导航栏距左边50px；

2、设置导航栏边界
border: 1px solid rgb(170,203,238);

3、设置导航栏分割线
border-bottom:1px solid rgb(170,203,238) ;//设置盒子最下方的分割线；

4、设置导航列表背景图片
background-image: url(./图片素材/submenu.gif);//设置导航栏背景图片
background-position:100% 0% ;//是背景图片右对齐

5、去除列表的圆点
list-style: none;

6、去除列表前面的一段距离
*{
padding: 0;
margin: 0;
}

7、使图片和文字对齐
vertical-align:middle;//让图片和文字中间相对

成果展示

<!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>北大青鸟课程导航</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: fit-content;
            margin-left: 50px;
            border: 1px solid rgb(170,203,238);
        }
        .box2{
            width: 100%;
            height: 20px;
            border-bottom:1px solid rgb(170,203,238) ;
            background-image: url(./图片素材/submenu.gif);
            background-position:100% 0% ;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: rgb(0,0,0);
        }
        h3{
            font-size: 14px;
            color: rgb(37,59,110);
            background-color: rgb(245,249,252);
        }
        img{
            vertical-align:middle;
        }
        a:hover{
            color: red;
        }
        
    </style>
</head>
<body>
    <div class="box">
        

        <div >
            <ul>
                <li class="box2">
                    <h3><img src="./图片素材/title_icon.gif" alt="">课程导航</h3>
                </li>
                <li class="box2">
                    <a href="#">ACCP 软件工程师</a>
                </li>
                <li class="box2">
                    <a href="#">BTEST 软件测试工程师</a>
                </li>
                <li class="box2">
                    <a href="#">BENET 网络工程师</a>
                </li>
                <li class="box2">
                    <a href="#">JBNS 网站工程师</a>
                </li>
                <li class="box2">
                    <a href="#">ACCP 启蒙星</a>
                </li>
                <li class="box2">
                    <a href="#">ANDROID 软件工程师</a>
                </li>
                <li class="box2">
                    <a href="#">JAVA 软件工程师</a>
                </li>
                <li class="box2">
                    <a href="#">.NET 软件工程师</a>
                </li>
                <li class="box2">
                    <a href="#">网络营销</a>
                </li>
                
            </ul>
        </div>

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