CSS文章列表代码 DIV LI UL 的基本运用

发布时间：2018-09-09 03:28:05 所属栏目：专访来源：站长网

导读：本文介绍的不算是网页特效，而一款标准新闻文章列表的代码，代码使用了div ul li等标记，总体来说比较简洁，没有过多的修饰，如果你想使用的话，可以进行相关的修改。重点学习如何使用UL/LI来布局列表，这也是CSS前端编程最常见常用的基本技巧，本列表符

　　本文介绍的不算是网页特效，而一款标准新闻文章列表的代码，代码使用了div ul li等标记，总体来说比较简洁，没有过多的修饰，如果你想使用的话，可以进行相关的修改。

　　重点学习如何使用UL/LI来布局列表，这也是CSS前端编程最常见常用的基本技巧，本列表符合WEB标准，简洁不失大气，适合于多种网站。

　　网页演示：点击这里

　　运行演示：

<!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=gbk" /> <title>CSS新闻列表标准代码 - Liehuo.Net</title> <style type="text/css">、 body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;font-size:9pt;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} .clear{height:0;overflow:hidden;clear:both;} h4{font-size:14px;height:27px;line-height:27px;padding-left:10px;border-bottom:#ddd 1px solid;} .news{width:280px;border:#ddd 1px solid;} .news ul{padding:5px 10px;} .news ul li{height:24px;line-height:24px;overflow:hidden;} </style> </head> <body> <div class="news"> <h4>网站运营 - Liehuo.Net</h4> <ul> <LI>·<A title="Google Adsense防止自己误点击的几种方法" href="/a/view/20389.html" target=_blank>Google Adsense防止自己误点击的几种方法</A></LI> <LI>·<A title=新站PR更新规律总结 href="/a/view/20387.html" target=_blank>新站PR更新规律总结</A></LI> <LI>·<A title="Engagement Index-2：构成参与度指数的参数选择，分类和数据收集" href="/a/view/20345.html" target=_blank>Engagement Index-2：构成参与度指数的参数选</A></LI> <LI>·<A title=阿里妈妈“禁止按时长出售”的官方回答 href="/a/view/20318.html" target=_blank>阿里妈妈“禁止按时长出售”的官方回答</A></LI> <LI>·<A title=阿里妈妈(淘宝联盟)不能选择选择计费类型 href="/a/view/20291.html" target=_blank>阿里妈妈(淘宝联盟)不能选择选择计费类型</A></LI> <LI>·<A title=张焱森：个人站长如何打造大流量网站赚钱？ href="/a/view/20265.html" target=_blank>张焱森：个人站长如何打造大流量网站赚钱？</A></LI> <LI>·<A title=目前网络与访客互动的常见方法 href="/a/view/20173.html" target=_blank>目前网络与访客互动的常见方法</A></LI> <LI>·<A title=通过服务器日志分析网站的原理及优缺点 href="/a/view/20159.html" target=_blank>通过服务器日志分析网站的原理及优缺点</A></LI> <LI>·<A title=企业网站建设要注意更新 href="/a/view/20111.html" target=_blank>企业网站建设要注意更新</A></LI> <LI>·<A title="橘子舍:Google PageRank近期更新情况分析" href="/a/view/20081.html" target=_blank>橘子舍:Google PageRank近期更新情况分析</A></LI> <LI>·<A title=新手站长应当如何合理优化自己的网站 href="/a/view/20074.html" target=_blank>新手站长应当如何合理优化自己的网站</A> </LI> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!