1) 二级标题:“计算机专业热门课程”: 2) 添加水平线,设置效果:颜色orange、粗细 2、长度400px、左对齐; 3) 添加课程:包含四个课程,内容自己设计,每门课程包含在超链接中: 4) 超链接可以跳转; 说明:上传源代码及页面运行结果截图
时间: 2024-09-17 20:09:21 浏览: 87
itt:iTerm2选项卡的颜色和标题实用程序
在HTML中创建一个二级标题并添加水平线,以及包含四个链接的示例代码如下:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
/* 设置样式 */
.horizontal-line {
border-top: 4px solid orange;
width: 400px;
display: block;
margin-left: auto; /* 左对齐 */
}
.course-link {
color: black;
text-decoration: none;
padding: 5px 10px;
display: inline-block;
transition: background-color 0.3s ease;
}
.course-link:hover {
background-color: lightgray;
}
</style>
</head>
<body>
<!-- 二级标题 -->
<h2>计算机专业热门课程</h2>
<!-- 水平线 -->
<div class="horizontal-line"></div>
<!-- 四个课程链接 -->
<ul>
<li><a href="#course1" class="course-link">课程1 - 高级编程语言</a></li>
<li><a href="#course2" class="course-link">课程2 - 数据结构与算法</a></li>
<li><a href="#course3" class="course-link">课程3 - 计算机网络原理</a></li>
<li><a href="#course4" class="course-link">课程4 - 人工智能入门</a></li>
</ul>
<!-- 这里只是占位符,实际跳转会需要服务器端处理 -->
<section id="course1">...课程1详细内容...</section>
<section id="course2">...课程2详细内容...</section>
<section id="course3">...课程3详细内容...</section>
<section id="course4">...课程4详细内容...</section>
</body>
</html>
```
注意:上述代码中的`#course1`到`#course4`是锚点链接,用于导航,并不会直接显示课程内容。如果要在服务器端处理实际的课程内容展示,你需要将这部分替换为实际的URL或通过AJAX等技术获取数据。
阅读全文