题目

1. 课程导航

需求说明

(1) . 使用标题标签实现课程导航标题，使用无序列表实现课程导航列表

(2) . 课程导航前的图标和每个课程导航右侧的三角图标使用背景图像的方式实现

实现效果

image.png

实现思路

(1) . 使用并集选择器设置body、ul、li、h1标签的内、外边距均为0px。

(2) . 使用border属性设置课程导航边框样式，使用border-top属性设置导航列表上边框的样式。

(3) . 用margin属性设置课程列表居中显示。

(4) . 使用background设置课程导航图标和导航列表图标。

代码

html代码

<title>课程导航</title>
<link href="课程导航.css" rel="stylesheet" type="text/css">
</head>

<body>
     <div class="col" >
         
            <h2>&nbsp;&nbsp; 课程导航</h2> 
         
            <ul>
                <li><a href="#" target="_self">ACCP 软件工程师</a></li>
                <li><a href="#" target="_self">BTEST 软件测试工程师</a></li>
                <li><a href="#" target="_self">BENET 网络工程师</a></li>
                <li><a href="#" target="_self">JBNS 网站工程师</a></li>
                <li><a href="#" target="_self">ACCP 启蒙星</a></li>
                <li><a href="#" target="_self">ANDROID 软件工程师</a></li>
                <li><a href="#" target="_self">JAVA 软件工程师</a></li>
                <li><a href="#" target="_self">.NET 软件工程师</a></li>
                <li><a href="#" target="_blank">网络营销</a></li>
            </ul>

    </div>
</body>

css代码

h2{
    background-image:url("images/title_icon.gif");
    background-repeat: no-repeat;
    background-position: left;
}
.col{
    background-color: #F5F9FC;
    border:#D2E3F3 3px solid;
    border-top-width: 0px;
}
ul li{
    list-style-type: none;
    margin: 0;
    background-image: url("images/submenu.gif");
    background-repeat: no-repeat;
    background-position: 200px 0px;
}
a{
    color:#000000;
    text-decoration: none;
}
a:hover{
    color: #E39423;
    text-decoration: underline;
}
body,ul,li{padding:0px; margin:0px;}
div{
    margin: 300px 500px 500px 800px;
    width: 300px;
}

效果图