前端练习＜Html&CSS＞——课程开班计划（附完整代码及实现效果）

Blusher1

已于 2024-07-24 00:46:18 修改

阅读量1k

点赞数 41

分类专栏：前端练习文章标签：前端 html css

于 2024-07-24 00:07:02 首次发布

本文链接：https://blog.csdn.net/blusher1/article/details/140648815

版权

前端练习专栏收录该内容

4 篇文章 1 订阅

订阅专栏

该练习来源于李立超老师的前端课程，用于实现课程开班计划等信息的网页。有需要的小伙伴可以通过下面的链接学习，老师讲的非常不错~

李立超HTML与CSS前端入门佳作，百万播放，好评如潮！

下面是视频中的例图

对于网页进行解构：

HTML结构

1. <style>标签：包含CSS样式，用于定义网页的外观和布局。
2. <body>`标签：包含网页的主体内容。
3. <div class="outer">：最外层的容器，包含整个内容区域。
4. <div class="title">：标题区域，包含一个链接和一个标题。
5. <div class="content">：内容区域，包含多个课程列表。

CSS样式

1. .outer：定义了外层容器的宽度、外边距等样式。
2. .title：定义了标题区域的样式，包括边框、背景颜色、行高、内边距等。
3. .title a：定义了标题区域中链接的样式，包括浮动方向、颜色等。
4. .title h3：定义了标题区域中标题的样式，包括字体大小、行高等。
5. .content：定义了内容区域的样式，包括边框、内边距等。
6. .content a：定义了内容区域中链接的样式，包括颜色、文本装饰、字体大小等。
7. .content a:hover：定义了内容区域中链接在悬停时的样式，包括颜色、文本装饰等。
8. .content ul：定义了内容区域中无序列表的样式，包括列表样式、边框等。
9. .content .red：定义了内容区域中红色文本的样式，包括颜色、字体加粗等。
10. .content .right：定义了内容区域中右浮动元素的样式。
11. .content h3：定义了内容区域中标题的样式，包括外边距等。
12. **`.content li：定义了内容区域中列表项的样式，包括外边距等。
13. .content .no-border：定义了内容区域中无边框的样式。

HTML内容

1. 标题区域：包含一个链接“16年面授开办班计划”和一个标题“近期开班”。
2. 内容区域：包含三个课程列表，每个列表包含多个课程信息，包括开班时间和操作链接。

完整的代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			font: 12px/1 宋体;
		}

		.outer {
			width: 300px;
			/* 	height: 470px;
				background-color: ghostwhite; */
			margin: 50px auto;
		}

		.title {
			border-top: 2px solid;
			height: 36px;
			background-color: #f5f5f5;
			line-height: 36px;
			padding: 0 22px 0 16px;
		}

		.title a {
			float: right;
			color: red;
		}

		.title h3 {
			font: 16px/36px "微软雅黑";
		}

		.content {
			border: 1px solid #deddd9;
			padding: 0 28px 0 20px;
		}

		.content a {
			color: black;
			text-decoration: none;
			font-size: 12px;
		}

		.content a:hover {
			color: red;
			text-decoration: underline;
		}

		.content ul {
			list-style: none;
			border-bottom: 1px dashed #deddd9;

		}

		.content .red {
			color: red;
			font-weight: bold;
		}

		.content .right {
			float: right;
		}

		.content h3 {
			margin-top: 14px;
			margin-bottom: 16px;
		}

		.content li {
			margin-bottom: 15px;
		}

		.content .no-border {
			border: none;
		}
	</style>

<body>
	<div class="outer">
		<div class="title">
			<a href="#">16年面授开办班计划</a>
			<h3>近期开班</h3>
		</div>
		<div class="content">
			<h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
			<ul>
				<li>
					<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					<a class="right" href="#"><span class="red">预约报名</span></a>

				</li>
				<li>
					<a href="#">开班时间：<span class="red">2016-04-07</span></a>
					<a class="right" href="#"><span class="red">无座，名额爆满</span></a>

				</li>
				<li>
					<a href="#">开班时间：<span>2016-03-24</span></a>
					<a class="right" href="#"><span>开班盛况</span></a>

				</li>
				<li>
					<a href="#">开班时间：<span>2016-02-25</span></a>
					<a class="right" href="#"><span>开班盛况</span></a>

				</li>
				<li>
					<a href="#">开班时间：<span>2016-01-23</span></a>
					<a class="right" href="#"><span>开班盛况</span></a>
				</li>
			</ul>

			<h3><a href="#">Android+人工智能-全程就业班</a></h3>
			<ul>
				<li>
					<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					<a class="right" href="#"><span class="red">预约报名</span></a>
				</li>

				<li>
					<a href="#">开班时间：<span>2016-03-24</span></a>
					<a class="right" href="#"><span>开班盛况</span></a>

				</li>
				<li>
					<a href="#">开班时间：<span>2016-02-25</span></a>
					<a class="right" href="#"><span>开班盛况</span></a>
				</li>
				<li>
					<a href="#">开班时间：<span>2015-12-23</span></a>
					<a class="right" href="#"><span>开班盛况</span></a>
				</li>
			</ul>
			<h3><a href="#">前端+Html5-全程就业班</a></h3>
			<ul class="no-border">
				<li>
					<a href="#">开班时间：<span class="red">2015-03-27</span></a>
					<a class="right" href="#"><span class="red">预约报名</span></a>
				</li>
				<li>
					<a href="#">开班时间：<span>2015-03-04</span></a>
					<a class="right" href="#"><span>开班盛况</span></a>
				</li>
			</ul>
		</div>
	</div>
</body>

</html>

下面是我的代码实现效果：