前些天做網站，前台樣式手生得很，所以趕緊找幾個執行個體做一做，這是一個部落格首頁，今天練手用css+div仿的。
：
CSS+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{margin:0px;padding:0px;font-family:Arial, Helvetica, sans-serif;/*設定頁面字型*/background-color:black;font-size:12px;text-align:center;}div{display:block;}#container{ width:760px; position:relative; /*固定寬度頁面相對置中*/ text-align:left; margin:1px auto 0px auto; border-left:1px dashed #AAA; border-right:1px dashed #AAA; border-bottom:1px dashed #AAA; background-color:#FFFFFF; }/*頂部Logo樣式*/#banner{ width:760px; height:163px;/*比背景圖片高一點，下部放導覽功能表*/ background:#DAEEFF url(banner.jpg) no-repeat top;/*背景色，圖片，不重複，圖片位於頂部*/ margin:0px; padding:0px;}/*全域導覽功能表樣式*/#banner ul{margin:0px;padding:0px;position:absolute;width:417px;left:400px;top:145px;list-style-type:none;/*清楚項目符號*/}#banner ul li{float:left;padding:0px 6px 0px 6px;text-align:center;}#banner a:link,#banner a:visited{color:#004A87;text-decoration:none;}#banner a:hover{color:white;text-decoration:underline;}/*內容區左側塊樣式*/#leftBlock{position:relative;float:left;width:210px;padding:0px;margin:0px;}#leftBlock div{ clear:both; margin-top:25px;position:relative;}/*左側第一塊作者區樣式*/#leftBlock #authorBlock{background-image:url(mypic_bg.gif);background-repeat:no-repeat;margin:5px;text-align:center;}#leftBlock #authorBlock #pic{border:none;padding:15px 0px 0px 0px;margin:0px 0px 8px 0px;}#leftBlock #authorBlock #pic img{border:1px solid #444;padding:2px;margin:0px;}#leftBlock #authorBlock #author{border-top:1px dashed #999;border-bottom:1px dashed #999;margin:0px 10px 0px 10px;padding:3px 0px 3px 0px;}/*左側快通用樣式*/#leftBlock div h4{background-image:url(leftbg.jpg);background-repeat:no-repeat;padding:6px 0px 5px 27px;margin:0px;font-size:12px;}#leftBlock ul{list-style:none;margin:5px 5px 0px 25px;padding:0px;}#leftBlock ul li a:link,#leftBlock ul li a:visited{ color:black; text-decoration:none;}#leftBlock ul li a:hover{ color:blue;}/*左側第二塊樣式*/#leftBlock #linkBlock ul li{float:left;/* 顯示為同一行 */width:80px;/* 指定每一項的寬度 */background:none;padding:0px;border:none;}/*左側其餘四塊樣式*/#leftBlock .left{ position:relative;top:10px;margin-bottom:35px;}#leftBlock .left ul{ margin:5px 15px 0px 15px;}#leftBlock .left ul li{background:url(icon1.gif) no-repeat 8px 7px;padding:2px 3px 2px 15px;border-bottom:1px dashed #999; }/*內容區右側樣式*/#rightBlock {float: left;position: relative;font-size: 12px;margin: 0px 20px 5px 20px;width: 510px;}#rightBlock div{ position:relative; margin:20px 0px 30px 0px;}#rightBlock div h3{border-bottom:1px dashed #999;padding-bottom:5px;margin-bottom:5px;font-size:15px;}#rightBlock div h3 a:link,#rightBlock div h3 a:visited{color: #662900;text-decoration: none;}#rightBlock div h3 a:hover{color:blue;}#rightBlock div p.author{margin: 0px;text-align: right;color: #888;padding: 0px 5px 2px 0px;}/*腳註樣式*/#footer {clear: both;text-align: center;background-color: #DAEEFF;margin: 0px;padding: 0px;color: #004A87;}#footer p{padding:2px;margin:0px;}</style></head> <body> <div id="container"> <div id="banner"> <ul> <li><a href="#">個人首頁</a></li> <li><a href="#">控制台</a></li> <li><a href="#">我的文章</a></li> <li><a href="#">我的相簿</a></li> <li><a href="#">我的圈子</a></li> <li><a href="#">給我留言</a></li> </ul> </div> <div id="leftBlock"> <div id="authorBlock"> <p id="pic"><img src="mypic.jpg"></p> <p id="author">我的練手CSS的BLOG</p> </div> <div id="linkBlock"> <h4><span>活力地帶</span></h4> <ul> <li><img src="1.gif"> <a href="#">個人首頁</a></li> <li><img src="3.gif"> <a href="#">控制台</a></li> <li><img src="4.gif"> <a href="#">我的文章</a></li> <li><img src="5.gif"> <a href="#">我的相簿</a></li> <li><img src="6.gif"> <a href="#">我的圈子</a></li> <li><img src="2.gif"> <a href="#">給我留言</a></li> </ul> </div> <div id="friendlinkBlock" class="left"> <h4><span>友情連結</span></h4> <ul> <li><a href=“#”>網易部落格</a></li> <li><a href=“#”>csdn部落格</a></li> <li><a href=“#”>部落格園</a></li> <li><a href=“#”>QQ空間</a></li> <li><a href=“#”>51com</a></li> <li><a href=“#”>Helloword</a></li> </ul> </div> <div id="categoryBlock" class="left"> <h4><span>我的文章分類</span></h4> <ul> <li><a href=“#”>個人隨筆</a></li> <li><a href=“#”>美術設計</a></li> <li><a href=“#”>我的文章</a></li> <li><a href=“#”>我的相簿</a></li> <li><a href=“#”>我的圈子</a></li> <li><a href=“#”>給我留言</a></li> </ul> </div> <div id="listBlock" class="left"> <h4><span>文章列表</span></h4> <ul> <li><a href=“#”>今天很高興</a></li> <li><a href=“#”>明天很高興</a></li> <li><a href=“#”>我是最棒的</a></li> <li><a href=“#”>我會幸福的</a></li> <li><a href=“#”>我會快樂的</a></li> <li><a href=“#”>我會哈哈哈</a></li> </ul> </div> <div id="commentBlock" class="left"> <h4><span>最新評論</span></h4> <ul> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> </ul> </div> </div> <div id="rightBlock"> <div class="article"><h3><a href="#">學生節(6)_釋放天性</a></h3><p class="author">isaac @ : 2012-07-09 16:17:07</p><p class="content">釋放天性是一件很有意思的事情，也是電子系節目本身能夠nb的很重要原因。主持人、各個節目都要求演員釋放天性，下面是一些籌備組常用的手段 :)<br><br>1. 一個人在陽台對著外面大聲喊“爸爸媽媽我愛你們”等等，演員一般到最後就會喊一些自己的東西了 :)<br>2. 男女主角相隔50米，在人多的地方大聲呼喊“你能聽見嗎”“聽見了嗎？”“我愛你”<br>3. 還是露天，男女主角站在一個小圈子裡面，對視3分鐘。然後互相說50遍“我愛你”<br>4. 男1號跟男2號擁抱在一起說台詞，直到想吐都吐不出（《包青天》裡面ws和wc據說就在小樹林抱了好幾個晚上...上台的表演徹底放開了）<br>5. 每天晚上11點後露天排練，放開聲音<br>……<br><br>每次學生節，導演組的導演們都要求入選的各個劇組進行這方面的強化訓練，為的就是在台上能更好的表現自己，入戲。這些訓練事後的影響自然也是多方面的 :)<br><br>1. 很多演員學生節以後性格更開朗了，參加各種面試更加放得開了<br>2. 男生越來越ws了..... 膽子越來越大<br>3. 女生嘛，更加活潑了，朋友圈子擴大了<br>4. 很多男女主角真的成了一對，娃哈哈~~~<br>……<br><br>釋放天性，魅力無窮!!</p><p class="show">瀏覽[1051] | 評論[5]</p></div> <div class="article"><h3><a href="#">學生節(6)_釋放天性</a></h3><p class="author">isaac @ : 2012-07-09 16:17:07</p><p class="content">釋放天性是一件很有意思的事情，也是電子系節目本身能夠nb的很重要原因。主持人、各個節目都要求演員釋放天性，下面是一些籌備組常用的手段 :)<br><br>1. 一個人在陽台對著外面大聲喊“爸爸媽媽我愛你們”等等，演員一般到最後就會喊一些自己的東西了 :)<br>2. 男女主角相隔50米，在人多的地方大聲呼喊“你能聽見嗎”“聽見了嗎？”“我愛你”<br>3. 還是露天，男女主角站在一個小圈子裡面，對視3分鐘。然後互相說50遍“我愛你”<br>4. 男1號跟男2號擁抱在一起說台詞，直到想吐都吐不出（《包青天》裡面ws和wc據說就在小樹林抱了好幾個晚上...上台的表演徹底放開了）<br>5. 每天晚上11點後露天排練，放開聲音<br>……<br><br>每次學生節，導演組的導演們都要求入選的各個劇組進行這方面的強化訓練，為的就是在台上能更好的表現自己，入戲。這些訓練事後的影響自然也是多方面的 :)<br><br>1. 很多演員學生節以後性格更開朗了，參加各種面試更加放得開了<br>2. 男生越來越ws了..... 膽子越來越大<br>3. 女生嘛，更加活潑了，朋友圈子擴大了<br>4. 很多男女主角真的成了一對，娃哈哈~~~<br>……<br><br>釋放天性，魅力無窮!!</p><p class="show">瀏覽[1051] | 評論[5]</p></div> <div class="article"><h3><a href="#">學生節(6)_釋放天性</a></h3><p class="author">isaac @ : 2012-07-09 16:17:07</p><p class="content">釋放天性是一件很有意思的事情，也是電子系節目本身能夠nb的很重要原因。主持人、各個節目都要求演員釋放天性，下面是一些籌備組常用的手段 :)<br><br>1. 一個人在陽台對著外面大聲喊“爸爸媽媽我愛你們”等等，演員一般到最後就會喊一些自己的東西了 :)<br>2. 男女主角相隔50米，在人多的地方大聲呼喊“你能聽見嗎”“聽見了嗎？”“我愛你”<br>3. 還是露天，男女主角站在一個小圈子裡面，對視3分鐘。然後互相說50遍“我愛你”<br>4. 男1號跟男2號擁抱在一起說台詞，直到想吐都吐不出（《包青天》裡面ws和wc據說就在小樹林抱了好幾個晚上...上台的表演徹底放開了）<br>5. 每天晚上11點後露天排練，放開聲音<br>……<br><br>每次學生節，導演組的導演們都要求入選的各個劇組進行這方面的強化訓練，為的就是在台上能更好的表現自己，入戲。這些訓練事後的影響自然也是多方面的 :)<br><br>1. 很多演員學生節以後性格更開朗了，參加各種面試更加放得開了<br>2. 男生越來越ws了..... 膽子越來越大<br>3. 女生嘛，更加活潑了，朋友圈子擴大了<br>4. 很多男女主角真的成了一對，娃哈哈~~~<br>……<br><br>釋放天性，魅力無窮!!</p><p class="show">瀏覽[1051] | 評論[5]</p></div> </div> <div id="footer"> <p>更新時間: 2012-07-09 16:17:07 All Rights Reserved </p> </div> </div> </body></html>
做一遍，感覺舒服多了。
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
