HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>開班信息</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="main">
<div class="box">
<div class="title">
<p>近期開班
<a href="#">18年面授開班計劃</a>
</p>
</div>
<div class="content">
<div class="part1">
<div class="wzbt">人工智能+Python-高薪就業(yè)班
<div class="time1">
<div class="one">開班時間：<a href="#">2018-04-26</a>
<div class="yybm"><a href="#">
預約報名</a>
</div>
</div>
<div class="one">開班時間：<a href="#">2018-04-26</a>
<div class="yybm"><a href="#">
無座政供，名額爆滿</a>
</div>
</div>
<div class="one">開班時間：2018-04-26
<div class="yybm">
預約報名
</div>
</div>
<div class="one">開班時間：2018-04-26
<div class="yybm">
預約報名
</div>
</div>
<div class="one">開班時間：2018-04-26
<div class="yybm">
預約報名
</div>
</div>
</div>
</div>
</div>
<div class="part2">
<div class="wzbt">Android開發(fā)+測試-高薪就業(yè)班
<div class="time2">
<div class="two">開班時間：<a href="#">2018-04-26</a>
<div class="yybm"><a href="#">
預約報名</a>
</div>
</div>
<div class="two">開班時間：2018-04-26
<div class="yybm">
預約報名
</div>
</div>
<div class="two">開班時間：2018-04-26
<div class="yybm">
預約報名
</div>
</div>
<div class="two">開班時間：2018-04-26
<div class="yybm">
預約報名
</div>
</div>
</div>
</div>
</div>
<div class="part3">
<div class="wzbt">大數(shù)據(jù)軟件開發(fā)-青芒工作室
<div class="time3">
<div class="three">開班時間：<a href="#">2018-04-26</a>
<div class="yybm"><a href="#">
預約報名</a>
</div>
</div>
<div class="three">開班時間：2018-04-26
<div class="yybm">
預約報名
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代碼如下：
*{
padding: 0;
margin: 0;
}
.main{
background-image: url(../img/true.jpg);
}
.box{
width: 309px;
height: 478px;
margin: 50px auto;
border: 1px solid #e8e8e8;
}
.title{
font-style: bold;
width: 300px;
height: 36px;
margin-top: 4px;
margin-right: 5px;
margin-left: 5px;
border-top: 2px #019e8b solid;
background-color: #f5f5f5;
}
.box p{
font-size: 14px;
line-height: 40px;
margin-left: 16px;
float: left;
}
.box p a{
float: right;
margin-left: 102px;
color: red;
}
.content{
width: 298px;
height: 432px;
border: 1px solid #E8E8E8;
margin: 0px 5px 4px ;
}
.content p{
font-size: 12px;
margin-top: 14px;
margin-left: 20px;
}
.part1{
width: 248px;
height: 148px;
border: 1px solid #e8e8e8;
margin-top: 16px;
margin-right: 28px;
margin-left: 20px;
}
.part2{
width: 248px;
height: 120px;
border: 1px solid #E8E8E8;
margin-top: 30px;
margin-right:28px;
margin-left: 20px;
}
.part3{
width:248px;
height: 66px;
border: 1px solid #E8E8E8;
margin-top: 32px;
margin-right:28px;
margin-bottom: 16px;
margin-left: 20px;
}
.wzbt{
font-size: 12px;
margin-top: 0;
margin-left: 0;
float: left;
color: white;
}
.time1{
margin: 0;
margin-left: 30px;
}
.time1 a{
text-decoration: none;
color: red;
}
.one{
margin-top: 12px;
font-size: 10px;
margin-left: 0px;
}
.yybm{
font-size: 10px;
float: right;
margin-left: 14px;
}
.time2{
margin: 0;
margin-left: 40px;
}
.time2 a{
text-decoration: none;
color: red;
}
.two{
margin-top: 12px;
font-size: 10px;
margin-left: 0px;
}
.time3{
margin: 0;
margin-left: 40px;
}
.time3 a{
text-decoration: none;
color: red;
}
.three{
margin-top: 12px;
font-size: 10px;
margin-left: 0px;
color: white;
}
QQ截圖20180913120357.png
