亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

HTML開發(fā)部落格之文章列表

列表頁

列表頁面我們就不單做網(wǎng)頁編寫了，只需將主頁去掉圖片logo即可。

火狐截圖_2016-11-01T01-23-36.693Z.png

#效果如圖所示，這就可以當(dāng)作我們的列表頁面。


#
繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客首頁</title> <style> body{ background-color: #F0F0F0; } *{ border: 0px; padding: 0px; margin: 0px; font-size: 14px; } a:hover{color:red;text-decoration:none;} #top{ width: 100%; height: 90px; background-color: white; border-bottom: 1px solid #bbbbbb; } #menu{ width: 1000px; overflow: hidden; margin: 0 auto; } #menu img{ height: 90px; } #menu ul{ list-style-type: none; } #menu ul li{ float: left; height: 90px; line-height: 90px; margin-right: 50px; } #menu ul li a{ color: black;text-decoration: none; display: inline-block; } #menu ul li a:hover{color: #65b5ff;text-decoration: none} #box{ width: 900px; height: 370px; background-color: white; margin: 0 auto; margin-top: 50px; padding: 50px; } #box p{ text-align: center; } #box-form{ text-align: center; } .p_line{ border-bottom: 1px solid #bbbbbb; height: 40px; line-height: 50px; } .txtBox{ border: 1px solid #bbbbbb; width: 350px; margin-top: 30px; height: 50px; padding-left: 10px; border-radius: 5px; } .btn { width: 365px; height: 50px;; color: white; background-color: #DD0000; margin-top: 25px; } #bottom{ width:100%; background-color:#323333; height:300px; margin-top:70px; } #bottom-content{ width:1000px; overflow:hidden; margin:0 auto; color:white; height:280px; } #content-left{ width:460px; float:left; height:280px; } #bottom-content p{ margin-top:10px; } #content-right{ width:460px; float:right; height:280px; text-align: center; margin-top: 40px; } .color{ color: #323333; } #blog{ width: 1000px; overflow: hidden; margin: 0 auto; margin-top: 20px; } #blog ul{ list-style-type: none; } #blog ul li{ background-color: white; padding: 20px; width: 100%; overflow: hidden; margin-top: 15px; } .blog-left{ float: left; width: 680px; overflow: hidden; } .blog-right{ float: left; margin-left: 10px; width: 280px; overflow: hidden; } .blog-right img{ width: 280px; height: 200px; } .title{ text-decoration:none; font-size: 26px; } .blog-left p{ color: gray; } .blog-left img{ width: 20px; margin-right: 10px; vertical-align: middle; } .page{ height: 40px; margin-top: 10px; text-align: center; padding-top: 20px; } .page a{ border: 1px solid #71b0bb; text-decoration: none; margin: 5px; padding: 5px 10px; } .page a:link,.page a:visited{ color: #000000; } .page a:hover,.page a:active{ color: #FFF; background-color: #bbac5c; } .mi{ padding-left: 90px; } #blog-content{ width: 940px; overflow: hidden; padding: 30px; background-color: white; margin: 0 auto; border-top: 2px solid #e2b709; margin-top: 30px; } .siztitle{ font-size: 28px; text-align: center; } #blog-content p{ color: black; } #blog-content img{ width: 20px; margin-right: 10px; vertical-align: middle; } .rev{ border-left: 2px solid #e2b709; width: 100%; overflow: hidden; margin-top: 20px; padding-left: 10px; } .content{ margin-top: 20px; line-height: 28px; } .pl-p{ width: 1000px; overflow: hidden; margin: 0 auto; margin-top: 20px; font-size: 20px; padding-left: 20px; } #pl-div{ width: 920px; padding: 40px; background-color: white; overflow: hidden; margin: 0 auto; margin-top: 30px; } #pl-left{ float: left; width: 100px; overflow: hidden; text-align: center; } #pl-right{ float: left; margin-left: 30px; width: 700px; overflow: hidden; } .pl-txt{ border: 1px solid #777777;padding: 20px } .pl-input1{ border: 1px solid #777777;width: 150px;height:30px;margin-top: 30px ; } .pl-input2{ background-color: #65b5ff;color: white;width: 110px;height: 40px;margin-left: 580px } </style> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=https://img.php.cn/upload/course/000/000/004/58171021ac1f3460.png ></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> <li><a href="">留言板</a></li> <li class="mi" ><a href="">登陸</a>/<a href="">注冊</a></li> </ul> </div> </div> <div id="blog"> <ul> <li> <div class="blog-left"> <p ><a href="detail.html" class="title">測試文章</a></p> <p style="margin-top: 20px">內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示</p> <p style="margin-top: 90px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >測試<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p> </div> <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div> </li> <li> <div class="blog-left"> <p ><a href="detail.html" class="title">測試文章</a></p> <p style="margin-top: 20px">內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示</p> <p style="margin-top: 90px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >測試<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p> </div> <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div> </li> <li> <div class="blog-left"> <p ><a href="detail.html" class="title">測試文章</a></p> <p style="margin-top: 20px">內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示</p> <p style="margin-top: 90px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >測試<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p> </div> <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div> </li> <li> <div class="blog-left"> <p ><a href="detail.html" class="title">測試文章</a></p> <p style="margin-top: 20px">內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示內(nèi)容顯示</p> <p style="margin-top: 80px"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >測試<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p> </div> <div class="blog-right"><img src="https://img.php.cn/upload/course/000/000/004/58170bc487acc779.jpg"></div> </li> </ul> <div class="page"> <a href="#">首頁</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">...</a><a href="#">尾頁</a> </div> </div> <div id="bottom"> <div id="bottom-content"> <div id="content-left"> <p><img src="https://img.php.cn/upload/course/000/000/004/58170ff175fc3142.jpg" height="150px"></p> <p> 網(wǎng)站位置 | 關(guān)于我們 | 意見反饋 |</p> </div> <div id="content-right"> <p>友情鏈接</p> <p>PHP中文網(wǎng) | 小豬CMS</p> <p>公司網(wǎng)址：php.cn</p> </div> </div> </div> </body> </html>
提交重置程式碼