1. 程式人生 > >2018-12-26開班課程通知表單

2018-12-26開班課程通知表單

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作業1226</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.box{
			width: 310px;
			height: 479px;
			border:1px solid #ddd;
			margin: 0 auto;
			margin-top: 20px;
		}
		h2{
			width: 278px;
			height: 40px;
			background-color: #f5f5f5;
			border-top: 3px solid green;
			font-size: 14px;
			padding-left: 16px;
			padding-right: 16px;
			line-height: 40px;
		}
		h2 a{
			color: red;
			display: block;
			float: right;
			font-size: 10px;
		}
		.box1{
			width: 278px;
			height: 180px;
			padding-left: 16px;
			padding-right: 16px;
			font-size: 12px;
			border-bottom: 1px dashed #ddd;
			margin: 0 auto;
		}
		.box1 h3{
			font-size: 14px;
			/*padding-left: px;*/
			padding-right: 16px;
			line-height: 50px;

		}
		.box1 a{
			color: black;
			text-decoration: none;
		}
		.box a:hover{
			text-decoration: underline;
			color: red;
		}
		span{
			color: red;
			font-weight: bold;
		}
		.box2{
			font-size: 12px;
			border-bottom: 1px dashed #ddd;
			margin: 0 auto;
		}
		.box2 h3{
			font-size: 14px;
			/*padding-left: 16px;*/
			padding-right: 16px;
			line-height: 50px;
		}
		.box2 a{
			color: black;
			text-decoration: none;
		}
		li{
			line-height: 25px;
		}
		.abc{
			display: block;
			float: right;
			color: black;
		}
		.bcd{
			display: block;
			float: right;
			color: red;
		}

	</style>
</head>
<body>
	<div class="box">
		<h2>近期開班
		<a href="#">18年面授開發計劃</a>
		</h2>
		<div class="box1">
			<h3>
				<a href="#">人工智慧+python-高薪就業班</a>
			</h3>
			<ul>
				<li><a href="#">開班時間:<span>2018-04-26</span><span class="bcd">預約報名</span></a></li>
				<li><a href="#">開班時間:<span>2018-03-23</span><span class="bcd">無座,名額爆滿</span></a></li>
				<li><a href="#">開班時間:2018-01-23<span class="abc">開班盛況</span></a></li>
				<li><a href="#">開班時間:2017-12-20<span class="abc">開班盛況</span></a></li>
				<li><a href="#">開班時間:2017-11-18<span class="abc">開班盛況</span></a></li>
			</ul>
		<div class="box2">
			<h3>
				<a href="#">Android開發+測試-高薪就業吧</a>
			</h3>
			<ul>
				<li><a href="#">開班時間:<span>2018-04-26</span><span class="bcd">預約報名</span></a></li>
				<li><a href="#">開班時間:2018-03-23<span class="abc">開班盛況</span></a></li>
				<li><a href="#">開班時間:2018-01-23<span class="abc">開班盛況</span></a></li>
				<li><a href="#">開班時間:2017-12-20<span class="abc">開班盛況</span></a></li>
			</ul>
		</div>
		<div class="box3">
			<h3>
				<a href="#">大資料軟體開發-青芒工作室</a>
			</h3>
			<ul>
				<li><a href="#">開班時間:<span>2018-04-26</span><span class="bcd">預約報名</span></a></li>
				<li><a href="#">開班時間:2018-03-23<span class="abc">開班盛況</span></a></li>
			</ul>
		</div>
	</div>
</body>
</html>