简单页面练习

最新推荐文章于 2023-02-04 17:02:46 发布

流浪的小宇

最新推荐文章于 2023-02-04 17:02:46 发布

阅读量364

点赞数 1

分类专栏： css基础

本文链接：https://blog.csdn.net/b150461/article/details/102642000

版权

css基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本博客涉及图片及实例出自尚硅谷李立超讲师的前端讲学。仅供学习参考。Ubuntu玩的不是太好，好多都不懂，没有找到相同的字体，慢慢改进
目标图片：
在这里插入图片描述 实际效果图片：
html代码及注释:

<!doctype html>
<html>
	<head>
		<title>开班计划</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="kaiban.css">
	</head>
	<body>
		<div class="box">
			<div class="header">
				<a href="#" id="sp-color">16年面授开班计划</a>
				<h3 class="title">近期开班</h3>
			</div><!--header-->
			<div class="main">
				<ul>
					<li class="size-bold">JavaEE+云计算-全程就业班</li> <li>开班时间:
						<a href="#" id="sp-color" class="size-bold">2016-04-27</a> 
						<a href="#" id="sp-color" class="size-bold side-right">预约报名</a>
					</li>
					<li>开班时间:
						<a href="#" id="sp-color" class="size-bold">2016-04-07</a> 
						<a href="#" id="sp-color" class="size-bold side-right">无座，名额爆满</a>
					</li>
					<li>开班时间:
						<a href="#">2016-03-15</a> 
						<a href="#" class="side-right">开班盛况</a>
					</li>
					<li>开班时间:
						<a href="#">2016-02-25</a> 
						<a href="#" class="side-right">开班盛况</a>
					</li>
					<li>开班时间:
						<a href="#">2015-12-26</a> 
						<a href="#" class="side-right">开班盛况</a>
					<li class="size-bold">Android+人工智能-全程就业班</li> 
					<li class="side-bottom"></li>
					<li>开班时间:
						<a href="#"  id="sp-color"class="size-bold">2016-04-10</a> 
						<a href="#" id="sp-color"class="size-bold side-right">预约报名</a>
					</li>
					<li>开班时间:
						<a href="#">2016-03-17</a> 
						<a href="#" class="side-right">开班盛况</a>
					</li>
					<li>开班时间:
						<a href="#">2016-02-20</a> 
						<a href="#" class="side-right">开班盛况</a>
					</li>
					<li>开班时间:
						<a href="#">2016-12-23</a> 
						<a href="#" class="side-right">开班盛况</a>
					</li>
					<li class="side-bottom"></li>
					<li class="size-bold lst-text">前端+HTML5-全程就业班</li>
					<li>开班时间:
						<a href="#"  id="sp-color"class="size-bold">2016-05-10</a> 
						<a href="#" id="sp-color"class="size-bold side-right">预约报名</a>
					</li>
					<li>开班时间:
						<a href="#">2016-03-16</a> 
						<a href="#" class="side-right">开班盛况</a>
					</li>
				</ul>
			</div><!--main-->
		</div><!--box-->
	</body>
</html>

css代码及注释：

*{
	margin:0px;
	padding:0px;
}
body{
	font-size:12px;
}
#sp-color{/*special-color*/
	color:red;
}
.box{/*整个外框*/
	border-top:2px solid #079c7e;
	width:303px;
	margin:50px auto;/*外边距上下50px 左右默认*/
}
.header{/*上边div的内容，不设定宽度，使用padding元素时盒子不会往外撑。宽度自适应*/
	height:38px;/*行高减去字体大小是字体间距*/
	background:#f1f1f1;
	line-height:38px;/*单排设置行高与高度相同时，文字将居中*/
	padding:0 22px 0 15px;/*上 右 下 左*/
	
}
div[class="header"] a:first-child{  /*两个选择器 继承关系 1 属性选择器 2 父子选择器*/
	text-decoration:underline;
}
.title{/*上边div的内容*/
	font-size:15px;
	font-family:"微软雅黑";
}
.header a{
	color:red;
	float:right;
	text-decoration:none;
}
.main{/*主体内容*/
	border:2px solid #deddd9;
}
.main ul{
	list-style:none;
	line-height:32px;
	padding-left:20px;
}
.size-bold{/*特殊字体效果加粗*/
	font-weight:bolder;
}
.side-right{/*右浮动效果*/
	float:right;
	padding-right:30px;
}
.side-bottom{/*表格内实现虚线效果*/ 
	border:1px dashed #deddd9;
	width:260px;
	margin-right:20px;
}
a:link{
	text-decoration:none;
	color:black;
}
.lst-text{ /*last-text"*/
	color:#83006f;
}
a:hover{
	text-decoration:underline;
	color:red;
}

<!doctype html>
<html>
	<head>
		<title>开班计划第三遍</title>
		<meta chatset="utf-8">
<style type="text/css">
*{
	margin:0px;
		padding:0px;
}
body{
	font:12px/1 '宋体 微软雅黑';
}
#box{/*大盒子*/
	width:300px;
		border-top:2px solid #00A58A;
			margin:60px auto;
}
.title{/*标题*/
	background-image: url('class-plan.png');
		background-repeat:repeat-x;
			height:35px;
}
.title span{
	font:16px/35px '宋体 微软雅黑';
		margin-left:15px;
}
.title a{
	font:12px/35px '宋体 微软雅黑';
		float:right;
			color:red;
				margin-right:24px;

}
.content{
	background:#fff;
		padding:12px 25px 0 20px;
			border:1px solid #DDDCD8;
}
.content h3 a{/*课程名称*/
	font-size:14px;
		text-decoration:none;
			color:black;
}
.content .red-time{ /*红色加粗字体*/
	color:red;
		font-weight:bold;
}
.content a.right-info{/*右浮动信息*/
	float:right;
}
.content ul{/*取消默认样式*/
	list-style:none;
}
.content li{
	font:12px'宋体';
		margin-top:15px;
}
li a:link{/*伪类选择器默认样式*/
	text-decoration:none;
		color:black;
}
li a:hover{
	text-decoration:underline;
		color:red;
}
.content .line{/*实线虚线效果*/
	border:1px dashed #DDDCD8;
		width:255px;
			margin-bottom:10px;
}
.content .last-name{
	color:#8F006C;
}

</style>
	</head>
<body>
	<div id="box">
		<div class="title">
		<a href="#">16年面授开班计划</a>
		<span>近期开班</span>
		</div><!--title-->

		<div class="content">
			<h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
			<ul>
				<li><a href="#" class="red-time">开班时间：<span class="red-time">2016-04-27<span></a>
					<a href="#" class="right-info red-time">预约报名</a>
				</li>
				<li><a href="#" class="red-time">开班时间：<span class="red-time">2016-04-07<span></a>
					<a href="#"class="right-info red-time">无座，名额爆满</a>
				</li>
				<li><a href="#">开班时间：<span>2016-03-15<span></a>
					<a href="#" class="right-info">开班盛况</a>
				</li>
				<li><a href="#">开班时间：<span>2016-02-25<span></a>
					<a href="#" class="right-info">开班盛况</a>
				</li>
				<li><a href="#">开班时间：<span>2015-12-26<span></a>
					<a href="#" class="right-info">开班盛况</a>
				</li>
				<li class="line"></li>
			</ul>

			<h3><a href="#">Android+人工智能-全程就业班</a></h3>
			<ul>
				<li><a href="#" class="red-time">开班时间：<span class="red-time">2016-04-10<span></a>
					<a href="#" class="right-info red-time">预约报名</a>
				</li>
				<li><a href="#">开班时间：<span>2016-03-17<span></a>
					<a href="#" class="right-info">开班盛况</a>
				</li>
				<li><a href="#">开班时间：<span>2016-02-20<span></a>
					<a href="#" class="right-info">开班盛况</a>
				</li>
				<li><a href="#">开班时间：<span>2015-12-23<span></a>
					<a href="#" class="right-info">开班盛况</a>
				</li>
				<li class="line"></li>
			</ul>

			<h3><a href="#"class="last-name">前端+HTML5-全程就业班</a></h3>
			<ul>
				<li><a href="#" class="red-time">开班时间：<span class="red-time">2016-05-10<span></a>
					<a href="#" class="right-info red-time">预约报名</a>
				</li>
				<li><a href="#">开班时间：<span>2016-03-16<span></a>
					<a href="#" class="right-info">开班盛况</a>
				</li>
			</ul>


		</div><!--content-->
	</div><!--box-->
</body>
</html>