CSS+DIV練手-部落格

來源:互聯網
上載者:User


前些天做網站,前台樣式手生得很,所以趕緊找幾個執行個體做一做,這是一個部落格首頁,今天練手用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>

做一遍,感覺舒服多了。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.