csdn文章的列表视图如下：
立即学习“前端免费学习笔记（深入）”；
看起来，还是挺好看的，本文用CSS实现该效果，实现后得效果如下：
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
直接贴代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Table</title> <style> html,body,table{ font-size: 12px; font-family: "宋体"; text-align: center; MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } .top{ background: #48525e; height: 30px; color: #fff; padding-right: 20px; padding-top: 13px; font-family: Arial Unicode MS, Arial, sans-serif; } .top_links{ text-align: right; font-size: 12px; width: 800px; MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } a{ color: #fff; text-decoration: none; } a:hover{ cursor: pointer; font-weight: bold; } .top_logo{ float: left; font-weight: bold; font-size: 15px; margin-left: 10px; } .box{ margin:10px auto 10px auto; border: 1px solid #bfbfbf; width: 800px; text-align: center; font-size: 100pt; color:#3B5998 ; padding: 30px 0px; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; } table{ width: 800px; border-collapse: collapse; border: none; color: #3B5998; text-align: center; } tr{ border: none; border-top: 1px solid #bfbfbf; } tr:hover{ background: #FFFFCC; } .trTitle{ font-weight: bold; color:#000; border: none; border-bottom: 2px solid #bfbfbf; } .trTitle:hover{ background: #fff; } .altitem{ background: #eee; } .tdleft{ text-align: left; } .tdleft:hover{ cursor: pointer; text-decoration: underline; } span{ color: #000; } .page_nav{ padding-top: 8px; width: 800px; MARGIN-RIGHT: auto; MARGIN-LEFT: auto; text-align: center; } .page_num{ border: 1px solid #dbe5ee; padding: 3px 8px; border-radius:3px; } .page_num:hover{ cursor: pointer; text-decoration: underline; } .page_num_active{ background: #07519a; color: #fff; } </style></head><body><div> <div class="top"> <div class="top_links"> <div class="top_logo"><a href="www.csdn.com">CSDN</a></div> <a>首页</a> | <a>我的博客</a> | <a>联系我们</a> </div> </div> <div class="box"> CSDN </div> <table cellpadding="9"> <tbody> <tr class="trTitle"> <td class="tdleft">标题</td> <td>状态</td> <td>浏览</td> <td>评价</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr class="altitem"> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> <tr> <td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td> <td> </td> <td>12</td> <td>23</td> </tr> </tbody> </table> <div class="page_nav"> <span>76条数据 共4页</span> <span> <span class="page_num">首页</span> <span class="page_num">上一页</span> <span class="page_num">1</span> <span class="page_num page_num_active">2</span> <span class="page_num">3</span> <span class="page_num">下一页</span> <span class="page_num">尾页</span> </span> </div></div></body></html>QQ：1004740957
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
534
收藏
