侧边信息栏案例练习
网页侧边栏信息栏练习:
<!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;
margin: 50px auto 0px;
}
/******标题******/
.title {
height: 43px;
line-height: 43px;
padding: 0 1em;
background-color: #F3F3F3;
border-top: 3px solid #039E86
}
.title a {
float: right;
color: red;
}
.title h3 {
font: 16px/46px;
}
/******内容******/
.content {
border: 2px solid #E4E3E0;
padding: 0 2em 0 1em;
}
.content h3 {
margin: 1em 0 1.2em;
}
.content ul {
list-style: none;
border-bottom: 1px dashed #DEDDD9;
}
.content ul:last-of-type {
border: none;
}
.content ul li {
margin: 1em 0;
}
.content ul a {
color: #000;
text-decoration: none;
}
.content ul a:hover {
text-decoration: underline;
color: purple;
}
.content .red {
color: red;
font-weight: bold;
}
.content .right {
float: right;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<h3><a>JavaEE+大数据-全程就业班</a></h3>
<ul>
<li>开班时间:<a href="#"><span class="red">2018-08-08(北京)</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#"><span class="red">2018-09-06(深圳)</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#">2018-07-25(深圳)</a><a href="#" class="right">开班盛况</a></li>
<li>开班时间:<a href="#">2018-07-15(北京)</a><a href="#" class="right">开班盛况</a></li>
</ul>
<h3><a>大数据+机器学习-全程就业班</a></h3>
<ul>
<li>开班时间:<a href="#"><span class="red">2018-08-08(北京)</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#"><span class="red">2018-09-06(深圳)</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#">2018-07-25(深圳)</a><a href="#" class="right">开班盛况</a></li>
<li>开班时间:<a href="#">2018-07-05</a><a href="#" class="right">开班盛况</a></li>
</ul>
<h3><a>HTML5前端+全栈-全程就业班</a></h3>
<ul>
<li>开班时间:<a href="#"><span class="red">2018-08-10(北京)</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#"><span class="red">2018-09-20(北京)</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#">2018-07-15(深圳)</a><a href="#" class="right">开班盛况</a></li>
<li>开班时间:<a href="#">2018-07-10(北京)</a><a href="#" class="right">开班盛况</a></li>
</ul>
<h3><a>Python+人工智能-全程就业班</a></h3>
<ul>
<li>开班时间:<a href="#"><span class="red">2018-08-10</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#"><span class="red">2018-09-20</span></a><a href="#" class="red right">预约报名</a></li>
<li>开班时间:<a href="#">2018-07-10</a><a href="#" class="right">开班盛况</a></li>
<li>开班时间:<a href="#">2018-5-24</a><a href="#" class="right">开班盛况</a></li>
</ul>
</div>
</div>
</body>
</html>
你可以先按照样图自己动手编写 >>戳我查看样图<<
最终效果 >>请戳我<<
如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/50.html