Liste d'articles du blog de développement HTML

Page de liste

Nous n'écrivons pas seulement des pages Web pour la page de liste, nous devons simplement supprimer le logo de l'image depuis la page d'accueil.

L'effet est comme indiqué sur l'image, cela peut être utilisé comme notre page de liste.

Formation continue

nouveau fichier

<!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">內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示</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">內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示</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">內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示</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">內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示內容顯示</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)站位置 | 關于我們 | 意見反饋 |</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>

soumettre Réinitialiser le code

Opération automatique