这篇博客介绍了如何使用HTML和CSS来创建一个课程导航栏。主要内容包括：利用标题标签和无序列表构建导航结构，通过设置内外边距、边框样式、背景图像以及列表样式实现导航栏的布局和图标展示。代码示例中详细展示了如何设置body、ul、li、h1的样式，并给出了对应的CSS代码。此外，还展示了导航栏的最终效果图。
题目
1. 课程导航
需求说明
(1) . 使用标题标签实现课程导航标题，使用无序列表实现课程导航列表
(2) . 课程导航前的图标和每个课程导航右侧的三角图标使用背景图像的方式实现
实现效果
image.png
实现思路
(1) . 使用并集选择器设置body、ul、li、h1标签的内、外边距均为0px。
(2) . 使用border属性设置课程导航边框样式，使用border-top属性设置导航列表上边框的样式。
(3) . 用margin属性设置课程列表居中显示。
(4) . 使用background设置课程导航图标和导航列表图标。
代码
html代码
课程导航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;
}
效果图
image.png
扫一扫
5818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
