CSS样式实例---开班信息

最新推荐文章于 2022-07-25 22:31:29 发布

Danny_hi

最新推荐文章于 2022-07-25 22:31:29 发布

阅读量261

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43024228/article/details/103948221

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS样式实例—开班信息

<!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: 473px; */
				/* background-color: #bfa; */
				margin: 50px auto;
			}
			.title{
				border-top: 2px #019e8b solid;
				height: 36px;
				background-color: #f5f5f5;
				/* 设置行高 */
				line-height: 36px;
				padding: 0px 22px 0px 16px;
			}
			.title a{
				float: right;
				color: red;
			}
			.title h3{
				font: 17px/36px "微软雅黑";
			}
			/* 设置内容 */
			.content{
				border: 1px solid #deddd9;
				padding: 0px 28px 0px 20px;
			}
			/* 设置内容中的超链接 */
			.content a{
				color: black;
				text-decoration: none;
				font-size: 12px;
			}
			.content h3{
				margin-top: 14px;
				margin-bottom: 16px;
			}
			.content .right{
				float: right;
			}
			/* 设置ul的样式 */
			.content ul{
				list-style: none;
				border-bottom: 1px dashed gray;
			}
			.content .red{
				color: red;
				font-weight: bold;
			}
			.content li{
				margin-bottom: 14px;
			}
			.content .no-border{
				border: none;
			}
		</style>
	</head>
	<body>
		<!-- 创建一个外层div，容纳整个内容 -->
		<div class="outer">
			<!-- 开班信息头部 -->
			<div class="title">
				<a href="#">16年面授开班计划</a>
				<h3>近期开班</h3>
			</div>
			<!-- 开班信息主要内容 -->
			<div class="content">
				<h3><a href="#">JaveEE+云计算-全程就业班</a></h3>
				<ul>
					<li>
						<a class="right" href="#"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					</li>
					<li>
						<a class="right" href="#"><span class="red">无座，名额报满</span></a>
						<a href="#">开班时间：<span class="red">2016-05-27</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-06-27</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-07-27</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-08-27</span></a>
					</li>
				</ul>
				<h3><a href="#">Android+人工智能-全程就业班</a></h3>
				<ul>
					<li>
						<a class="right" href="#"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-04-28</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-07-15</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-23</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-08-27</span></a>
					</li>
				</ul>
				<h3><a href="#">前端+HTML5-全程就业班</a></h3>
				<ul class="no-border">
					<li>
						<a class="right" href="#"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-09-21</span></a>
					</li>
					<li>
						<a class="right" href="#"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-12-09</span></a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

样式：
在这里插入图片描述

Danny_hi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS样式实例---开班信息

CSS样式实例—开班信息<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>开班信息</title> <style type="text/css"> /* 清除默认样式 */ *{ margin: 0; ...
复制链接

扫一扫

专栏目录