编写学校课程导航

最新推荐文章于 2023-06-29 15:32:53 发布

忘不了情

最新推荐文章于 2023-06-29 15:32:53 发布

阅读量547

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/y1059477028/article/details/127373955

版权

<!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>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .wrap {
            width: 222px;
            height: 321px;
            background-color: #F5F9FC;
            border: 1px solid #AACBEE;
            margin: 100px auto;
        }

        img {
            vertical-align: middle;
        }

        h3 {
            color: #1F376D;
            font-weight: 700;
            font-size: 14px;
            margin-left: 7px;
            width: 211px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #AACBEE;
        }

        li {
            width: 211px;
            height: 30px;
            color: black;
            font-size: 18px;
            line-height: 32px;
            margin-left: 6px;
            border-bottom: 1px solid #AACBEE;
        }

        li#last {border-bottom:none;

        }

        li>a {
            display: inline-block;
            width: 189px;
            margin-left: 6px;
        }

        a {
            color: black;
        }


        li>.jiantou {
            display: inline-block;
            width: 0px;
            height: 0px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #AACBEE;
        }


        .line {
            width: 211px;
            height: 1px;
            background-color: #AACBEE;
            margin-left: 6px;
        }

        a:hover {
            color: red;
        }
    </style>
</head>

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

结构分析：