1. 程式人生 > >HTML第八章上機練習1

HTML第八章上機練習1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=gb2312" />
<title>經濟半小時專題報道頁面</title>
<link href="Untitled-9.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="a">
 <div id="aa">
<dl class="aaa">
 <dt><img src="adver-02.jpg" alt="經濟半個球" /></dt>
<dd>
 <p>2009年春節期間,中央電視臺財經頻道《經濟半小時》欄目重磅推出春節特別節目“2009民生報告”,通過小人物的真實故事回顧2009熱點民生話題。在2010年2月20日播出的“2009民生報告(七):安身立業”中,將目光聚焦農村進城務工人員的新生代——80後、90後農民工,其中重點講述了北大青鳥學員<span>王洪賢、胡梅方</span>的成長經歷。</p>
        <a href="#"><img src="btn-01.gif" alt="按鈕" /></a></dd>
</dl>
<div class="stu01">
<dl>
<dt><img src="adver-03.jpg" alt="學員照片" /></dt>
<dd>
<p><span>王洪賢</span>北大青鳥APTECH授權培訓中心學員,來自江西九江。為生計所迫,隨父親到北京打工。來到北大青鳥後,王洪賢慢慢恢復了對自己前途的信心。現在,王洪賢已經成為北京一家大型技術服務公司的網路工程師。</p>
</dd>
</dl>
</div>
<div class="stu02">
<dl>
<dt><img src="adver-04.jpg"  alt="學員照片" /></dt>
<dd>
  <p><span>胡梅方</span>北大青鳥APTECH授權培訓中心學員,來自湖北襄樊。經過在北大青鳥系統的職業技能培訓,胡梅方成為深圳一家資訊企業的專業IT網路工程師。</p>
</dd>
 </dl>>
</div>
  </div>
</div>
</body>
</html>
@charset "gb2312";
/* CSS Document */
p,dl,dt,dd{padding:0px; margin:0px;}
img{border:0px;}
#a {
	width:736px;
	height:559px;
	border:1px #c6c6c6 solid;
	margin:0px auto;
	overflow:hidden;
}
#aa{
	width:736px;
	height:559px;
	overflow:hidden;
	background:url(adver-01.jpg) center 5px no-repeat;
	position:relative;
}
#aa .aaa {
	width:628px;
	margin:0px auto;
	padding-top:80px;
	height:200px;
	overflow:hidden;
}
#aa .aaa dt {
	float:left;
	width:285px;
}
#aa p {
	font-size:12px;
	line-height:22px;
	text-indent:2em;
	font-family:"微軟雅黑";
}
#aa p span{font-weight:bold; color:#F00;}
#aa .aaa dd img {
	margin-top:10px;
	display:inline;
}
#aa .stu01 dl, #aa .stu02 dl {
	height:135px;
	overflow:hidden;
	border:1px #d1d1d1 solid;
	background-color:#FFF;
	padding:5px;
}
#aa .stu01 {
	padding:0px 0px 0px 50px;
	width:500px;
}
#aa .stu02 {
	position:absolute;
	right:30px;
	bottom:10px;
	width:440px;
}
#aa .stu01 dt, #aa .stu02 dt {
	float:left;
	width:203px;
}