代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开班信息</title>
<link rel="styleSheet" href="./s.css" type="text/css">
</head>
<body>
<div class="open">
<div class="left">近期开班</div>
<div class="right"><a href="#">18年面授开班计划</a></div>
</div>
<div class="connect">
<h6>人工智能+Python-高薪就业班</h6>
<p class="pright"><a href="#" id="zi">预约报名</a></p>
<p>开班时间：<a href="#" id="zi">2018-04-26</a></p>
<p class="pright"><a href="#" id="zi">名额爆满</a></p>
<p>开班时间：<a href="#" id=zi>2018-04-26</a></p>
<p class="pright">开班盛况</p>
<p>开班时间：2018-04-26</p>
<p class="pright">开班盛况</p>
<p>开班时间：2018-04-26</p>
<p class="pright">开班盛况</p>
<p>开班时间：2018-04-26</p>
<hr>
<h6>Android开发+测试-高薪就业班</h6>
<p class="pright"><a href="#" id="zi">预约报名</a></p>
<p>开班时间：<a href="#" id="zi">2018-04-26</a></p>
<p class="pright">开班盛况</p>
<p>开班时间：2018-04-26</p>
<p class="pright">开班盛况</p>
<p>开班时间：2018-04-26</p>
<p class="pright">开班盛况</p>
<p>开班时间：2018-04-26</p>
<hr>
<h6>大数据软件开发-青芒工作室</h6>
<p class="pright"><a href="#" id="zi">预约报名</a></p>
<p>开班时间：<a href="#" id="zi">2018-04-26</a></p>
<p class="pright">开班盛况</p>
<p>开班时间：2018-04-26</p>
</div>
</body>
</html>
样式表：
*{
padding: 0;
margin: 0;
}
.open{
width: 300px;
height: 36px;
background-color: rgb(245,245,245);
border-top: 2px rgb(1,158,139) solid;
margin: 0 auto;
}
.open div.left{
/*padding-top: 2px;*/
float: left;
font-size: 13px;
margin: 11px 0px 16px 10px;
}
.open div.right{
font-size: 11px;
font-family: "微软雅黑";
float: right;
margin: 13px 10px 0px 16px;
}
.open div.right a{
text-align:
}
.connect{
width: 250px;
height: 400px;
border: 1px;
background-color: rgb(255,255,255);
border-color: rgb(222,221,217);
border-style: solid;
margin: 0 auto;
padding:0px 28px 15px 20px;
font-family: "微软雅黑";
}
.connect p.pright{
float: right;
}
p{
height: 27px;
font-size: 11px;
}
h6{
margin: 16px 0px 8px;
font-family:"宋体";
}
hr{
border:0.5px dashed rgb(222,221,217);
}
a{
color: red;
}
#zi {
text-decoration:none;
font-weight: bold;
}
效果图如下：
开班信息.png
网友评论