CSDN文章列表的CSS实现_html/css_WEB-ITnose
CSDN文章的列表视图如下：
看起来，还是挺好看的，本文用CSS实现该效果，实现后得效果如下：
直接贴代码：
<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><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>登录后复制
有需要的可以直接去用，如有疑问联系：
QQ：1004740957
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？
Mar 12, 2025 pm 04:05 PM
本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
