代码如下,自需自看:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.title {
width: 252px;
margin: auto;
border: #acacac 1px solid;
border-radius: 10px;
background: linear-gradient(to bottom, #5bbcf5, #ffff, #FFFFFF, #FFFFFF);
}
.one {
border-radius: 5px 5px 0px 0px;
color: white;
}
li {
list-style: none;
margin-right: 22px;
padding: 8px 0px 5px 20px;
background: url("../img/dotBg.gif") no-repeat 0px 4px;
}
p {
background: url("../img/bg.gif") no-repeat 11px;
color: #FFFFFF;
font-weight: bold;
padding: 11px 48px;
border-bottom: 1px white solid;
}
li a{
text-decoration: none;
color: #797c78;
padding-bottom: 10px;
}
li:nth-last-child(1){
margin-bottom: 12px;
}
</style>
</head>
<body>
<div class="title">
<p>中心开班信息</p>
<div class="one">
<ul>
<li><a href="">8月12日:学历+技能班</a></li>
<li><a href="">8月16日:高考特招班</a></li>
<li><a href="">8月23日:Java精英班</a></li>
<li><a href="">8月31日:学士后强化班</a></li>
<li><a href="">9月5日:大学生就业班</a></li>
<li><a href="">9月9日:企业定向委培班</a></li>
<li><a href="">9月16日:网络营销强化班</a></li>
</ul>
</div>
</div>
</body>
</html>
完成后的效果图如下:
更多推荐
HTML第6章简答题3(制作北大青鸟网站的中心开班信息模板)
发布评论