今天一天調了兩個主介面，另一個見《CSS+DIV練手-部落格》 ，第一個用了5個小時，第二個僅僅用了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="text/html; charset=utf-8" /><title>CSS練手</title><style type="text/css">body{font-family:Arial, Helvetica, sans-serif;font-size:12px;background-color: #2A3A00;margin: 0px;padding: 0px;}#main{position: absolute;top: 10%;left: 0%;width: 100%;background: url(middle_bg.jpg) repeat-x;}#main img{border:0px;}#info{position:absolute;top:55%;left:40%;width:200px;}#info a:hover{color: #2A3A00;text-decoration: none;}#info a:link,#info a:visited{color:#FFFFFF;text-decoration: none;}#menu{position:absolute;top:65%;left:40%;width:200px;}#menu ul li{position:relative;left:-40px;list-style-type:none;width:100px;padding-left:20px;background:url(icon1.gif) no-repeat 4px 7px;}#menu ul li a:hover {color: white;text-decoration: none;}#menu ul li a:link,#menu ul li a:visited{color: #2A3A00;text-decoration: none;}</style></head><body><div id="container"> <div id="main"> <a href="index.html"><img src="index.jpg"></a> </div> <div id="info"> <a href="index.html">思想和文化的交流始於文字，我們以新穎而行之有效方式為您提供實際的服務。</a> </div> <div id="menu"> <ul> <li><a href="index.html">進入首頁</a></li> <li><a href="index.html">關於我們</a></li> <li><a href="index.html">服務流程</a></li> <li><a href="index.html">夥伴</a></li> </ul> </div></div></body></html>
<!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="text/html; charset=utf-8" /><title>css練手</title><style type="text/css">body{font-family:Arial, Helvetica, sans-serif;font-size:12px;background-color: #2A3A00;margin: 0px;padding: 0px;text-align:center;}#container{ position:relative;margin:1px auto 0px auto;width:640px;text-align:left;background:#FFFFFF url(left_bg.jpg) repeat-y;/* 修補#navigation的背景色問題 */}#menu{width:150px;float:left;}#menu ul{list-style-type:none;margin:0px;padding:0px;}#menu ul li{border-bottom: 1px solid #B9FF00;}#menu ul li a { display:block; /* 區塊顯示,非常重要 */padding: 5px 5px 5px 0.5em;text-decoration: none;border-left: 12px solid #3C5300;border-right: 1px solid #3C5300;}#menu ul li a:link, #menu ul li a:visited {background-color: #729E00;color: white;}#menu ul li a:hover{background-color:#587a00;color:#ffff00;}#main{float: left;width: 460px;margin: 10px 15px 35px 15px;}#main h3{font-size:15px;margin:0px 0px 10px 0px;padding:10px 0px 1px 0px;border-bottom:1px dotted #777777;}#main a:link, #main a:visited{color:#afcd00;text-decoration:none;}#main a:hover{color:#000000;text-decoration:underline;}#footer{clear:both;text-align:center;background-color:#c7db51;margin:0px; padding:1px;}#footer a:link, #footer a:visited{color:#475300;text-decoration:none;}#footer a:hover{color:#000000;text-decoration:underline;}/*注意：hover必須放在link和visited的後面，否則滑鼠划上去沒有效果*/</style></head><body><div id="container"><div id="banner"><img src="banner.jpg"></div><div id="menu"> <ul> <li><a href="index.html">進入首頁</a></li> <li><a href="index.html">關於我們</a></li> <li><a href="index.html">服務流程</a></li> <li><a href="index.html">夥伴</a></li> </ul></div><div id="main"><h3>為您提供精準的翻譯服務</h3><p>您是否要將某些文檔翻譯成標準的英語版本？您是否擔心譯文會不符合西方語系的語言習慣？您是否遇到語言障礙而放緩向境外拓展業務的步伐？您是否受到時而需要處理外文資料的困擾？</p><p>讓我們來幫您解決這些問題。我們這裡提供的服務<a href="page3.html">快捷</a> 、高效、準確，而且<a href="page4.html">付費</a>方便。您無需走出家門，就可同我們一起走完服務的全過程，甚至包括付費。</p><p>我們有來自中國和新加坡的翻譯專家，他們具有得天獨厚的語言基礎和深厚的文化背景。他們合作的結晶一定是非常貼切而精美的譯文作品。我們會分配以您的目標語種為 母語 的翻譯員為你翻譯，同時他們也 精通 您的源語語種。</p><p>您若有此需求或任何疑問，請瀏覽我們的網站，也可隨時同我們聯絡，您會得到耐心的解答。我們的連絡方式是: <a href="mailto:demo@demo.com">demo@demo.com</a>。</p></div><div id="footer"><a href="#">聯絡我們: demo@demo.com</a></div></div></body></html>
做這些就是為了CSS+DIV熟練掌握
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
