CSS样式列表展示-优快云博客

程序代码

程序代码

HTML代码

<!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=utf-8" /> <title>css test .</title> <style> *{ margin:0; padding:0; list-style:none; border:none;} body{ font-size:12px; font-family: Verdana; line-height:1.8; padding:30px;} .c{ clear:both;} a:link,a:visited{color:#FFF;text-decoration:none;} a:hover,a:active{color:#FFCC00;text-decoration:underline;} /*list box*/ .info{background:#06518A; width:500px; padding:25px 10px 10px 10px;} .info div{border:2px solid #B48E47; background:url([url]http://www.zishu.cn/p_w_uploads/month_0801/h20081222242.gif[/url]) right top repeat-y #01395C; padding:10px;} .info h2{ background:url([url]http://www.zishu.cn/p_w_uploads/month_0801/120081222150.gif[/url]) top center no-repeat; margin-top:-30px; position:absolute; width:480px; height:50px;} .info span{ text-align:right; display:block} .info li{ background:url([url]http://www.zishu.cn/p_w_uploads/month_0801/n20081222216.gif[/url]) no-repeat center left; padding-left:10px; float:left; width:225px;} </style> </head> <body> <div class="info"> <div> <h2> </h2> <span><a href=""><img src="http://www.zishu.cn/p_w_uploads/month_0801/p20081222114.jpg" alt="more" /></a></span> <ul> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> </ul> <p class="c"></p> </div> </div> <div class="info"> <div> <h2> </h2> <span><a href=""><img src="http://www.zishu.cn/p_w_uploads/month_0801/p20081222114.jpg" alt="more" /></a></span> <ul> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> </ul> <p class="c"></p> </div> </div> <div class="info"> <div> <h2> </h2> <span><a href=""><img src="http://www.zishu.cn/p_w_uploads/month_0801/p20081222114.jpg" alt="more" /></a></span> <ul> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> </ul> <p class="c"></p> </div> </div> <div class="info"> <div> <h2> </h2> <span><a href=""><img src="http://www.zishu.cn/p_w_uploads/month_0801/p20081222114.jpg" alt="more" /></a></span> <ul> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> <li><a href="">css test 001.</a></li> <li><a href="">css test 002.</a></li> <li><a href="">css test 003.</a></li> <li><a href="">css test 004.</a></li> <li><a href="">css test 005.</a></li> <li><a href="">css test 006.</a></li> </ul> <p class="c"></p> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

转载于:https://blog.51cto.com/jenny0927/61426