本文介绍的不算是网页特效,而一款标准新闻文章列表的代码,代码使用了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>提示:可修改后代码再运行! 文章导航 CSS+JS实现的滑动TAB,滑动门的特效代码js 滑动门,CSS 实现小箭头指向区域内容