仿新浪CSS盒子模型示例_层和布局特效

模板酷站
  •       3/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      仿新浪CSS盒子模型示例,也就是网页某一部分的DIV布局的实现,感觉新浪的配色很不错,所以这里共享给大家,不知道对您有没有用。

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /> <title>盒子模型演示</title> <style type="text/css"> *{ margin:0; padding:0; font-size:12px; } a{ color:#5E4830; } .Box{ width:205px; border:1px solid #DFD3BD; margin:10px; } .Box .title{ font-weight:bold; height:22px; line-height:22px; background-color:#FDECCE; border:1px solid #fff; padding:0px 0px 0px 10px; color:#665F54; } .Box .mrc{ color:#5E4830; padding:7px 10px; } .Box .mrc li{ line-height:1.5em; } </style> </head> <body> <div class="Box"> <div class="title">源码分类</div> <ul class="mrc"> <li><a href="/">ASP</a>(1)</li> <li><a href="http://mb5u.com">PHP</a>(0)</li> <li><a href="/">JSP</a>(1)</li> </ul> </div> <div class="Box"> <div class="title">访客</div> <ul class="mrc"> <li>暂无访客</li> <li><a href="#">登录</a>后您的头像会在这里。</li> </ul> </div> </body> </html>