Html&&CSS之开班信息练习
实现效果
思路
1、通过div生成一个大的框架，内再包含title和content两个div。
2、内容中的开班信息详情通过无序列表ul生成，嵌套超链接，超链接中的红色字体通过span设置样式。
3、通过设置内边距实现文字与边框的间隔效果。
4、通过li外边距实现文字与文字间的间隔效果。
5、不同课间的间隔线通过ul的下边框实现。
6、需要注意的是：“预约报名”向右浮动后在IE6中会显示异常，因为IE6中浮动会受到内联元素的影响，导致浮动元素不能超过内联元素，可以调换两个元素的位置，或者同时设置前面的内联元素浮动。
7、因为文字在行内时居中显示的，所以title的中的文字居中效果可以通过设置line-height等于height来实现。
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>开班信息</title>
<style type="text/css">
/* 清除默认格式 */
*{
margin: 0;
padding: 0;
}
/* 统一页面字体 */
body{
font: 12px/1 宋体;
}
/* 设置边框 */
.border{
/* 背景色 */
background-color: aliceblue;
/* 宽度 */
width: 300px;
/* 高度 */
/* height: 473px; */
/* 设置居中 */
margin: 10px auto;
}
/* 设置标题 */
.title{
/* 设置上边框 */
border-top:2px solid #019e8b;
/* 设置高度 */
height:36px;
/* 设置背景色 */
background: #f5f5f5;
/* 设置行高 使文字居中 */
line-height: 36px;
/* 设置左右内边距 */
padding: 0px 22px 0px 16px;
}
.title h3{
float: left;
font: 16px/36px 微软雅黑;
}
/* 设置title中a元素 */
.title a{
/* 设置向右浮动 */
float: right;
/* 设置字体颜色为红色 */
color: red;
/* 设置内边距 */
/* padding: 10px; */
}
/* 设置内容 */
.content{
border: 1px solid #deddd9;
/* 设置内边距 */
padding: 0px 28px 0px 20px;
}
/* 设置红色字段 */
.content .red{
/* 设置字体颜色 */
color:red;
/* 设置字体 */
font-weight: bold;
}
/* 设置content 中 a 元素 */
.content a{
/* 设置样式 去除下划线 */
text-decoration: none;
/* 设置文字颜色 */
color: black;
}
/* 通过a元素伪类设置鼠标移入效果 */
.content a:hover{
/* 文字颜色 */
color: red;
/* 设置下划线 */
text-decoration: underline;
}
/* 设置ul */
.content ul{
/* 设置样式 */
list-style: none;
/* 设置下边框 */
border-bottom: 1px dashed #deddd9;
}
.content .right{
/* 向右浮动 */
float: right;
}
/* 设置content中H3标题边框 */
.content h3{
margin-top: 14px;
margin-bottom: 16px;
}
.content li{
/* 设置外边距 */
margin-bottom: 14px;
}
.content .no-border{
/* 设置最后一个ul无边框 */
border: none;
}
</style>
</head>
<body>
<!-- 外框 -->
<div class="border">
<!-- 标题 -->
<div class="title">
<h3>近期开班</h3>
<a href="#">23年开班面授计划</a>
</div>
<!-- 内容 -->
<div class="content">
<h3>JavaEE+云计算-全程就业班</h3>
<ul>
<li>
<a href="#" class="right"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a href="#" class="right"><span class="red">无座，名额爆满</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a href="#" class="right">开班盛况</a>
<a href="#">开班时间：2016-04-27</a>
</li>
<li>
<a href="#" class="right">开班盛况</a>
<a href="#">开班时间：2016-04-27</a>
</li>
<li>
<a href="#" class="right">开班盛况</a>
<a href="#">开班时间：2016-04-27</a>
</li>
</ul>
<h3>Android+人工智能-全程就业班</h3>
<ul>
<li>
<a href="#" class="right"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a href="#" class="right">开班盛况</a>
<a href="#">开班时间：2016-04-27</a>
</li>
<li>
<a href="#" class="right">开班盛况</a>
<a href="#">开班时间：2016-04-27</a>
</li>
<li>
<a href="#" class="right">开班盛况</span></a>
<a href="#">开班时间：2016-04-27</a>
</li>
</ul>
<h3>前端+Html5-全程就业班</h3>
<ul class="no-border">
<li>
<a href="#" class="right"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a href="#" class="right">开班盛况</a>
<a href="#">开班时间：2016-04-27</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Html&&CSS之开班信息练习
http://localhost:8091//archives/htmlcss-zhi-kai-ban-xin-xi-lian-xi