全球主机交流论坛

标题: 【300分】求高手代写一段css [打印本页]
作者: thymol    时间: 2013-11-22 15:25
提示: 作者被禁止或删除 内容自动屏蔽
作者: dvbhack    时间: 2013-11-22 15:25
本帖最后由 dvbhack 于 2013-11-22 17:10 编辑

我顺手写了一段，demo在这里：http://www.ofcss.com/cssdemo/simple.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="gbk">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <title></title>
  7.   <style>
  8. body,div,ul,li,img,a {margin:0;}
  9. ul {padding:0;list-style:none;}
  10. a img {border:0 none;}
  11. .wrap:before,
  12. .wrap:after {
  13.     display:block;
  14.     content:'';
  15.     height:0 !important;
  16.     line-height:0 !important;
  17.     visibility:hidden;
  18. }
  19. .wrap:after { clear:both;}
  20. .wrap {width:980px;margin:0 auto;*zoom:1;}
  21. .pics {
  22.     float:left;
  23.     width:340px;
  24.     height:90px;
  25.     overflow:hidden;
  26.     _margin-right:-3px;
  27. }
  28. .script {
  29.     width:640px;
  30.     height:90px;
  31.     overflow:hidden;
  32.     *zoom:1;
  33.     background:#c00;
  34. }
  35. .pic {
  36.     float:left;
  37.     margin:0 10px 10px 0;
  38.     width:160px;
  39.     height:40px;
  40. }
  41. </style>
  42. </head>
  43. <body>

  45. <div class="wrap">
  46.     <ul class="pics">
  47.         <li class="pic">
  48.             <a ><img src="http://fpoimg.com/160x40" width="160" height="40" alt=""></a>
  49.         </li>
  50.         <li class="pic">
  51.             <a ><img src="http://fpoimg.com/160x40" width="160" height="40" alt=""></a>
  52.         </li>
  53.         <li class="pic">
  54.             <a ><img src="http://fpoimg.com/160x40" width="160" height="40" alt=""></a>
  55.         </li>
  56.         <li class="pic">
  57.             <a ><img src="http://fpoimg.com/160x40" width="160" height="40" alt=""></a>
  58.         </li>
  59.     </ul>
  60.     <div class="script">
  61.         <script>document.write('这段文字由js插入');</script>
  62.     </div>
  63. </div>
  64. </body>
  65. </html>
复制代码
作者: h0stl0c    时间: 2013-11-22 15:38
1 2 3 4 5 是 div 吗？
作者: 我心碎不了    时间: 2013-11-22 15:40
  1. <style>
  2. .block { height: 90px; width: 980px; background: #000; }
  3. .left { float: left; width: 340px; height: 90px; background: #ddd }
  4. .left .box { float: left; margin: 0 10px 10px 0; background: #ccc; width: 160px; height: 40px; }
  5. .right { float: left; width: 640px; height: 90px; background: #ccc; }
  6. </style>
  7. <div class="block">
  8.         <div class="left">
  9.                 <div class="box">
  10.                         1
  11.                 </div>
  12.                 <div class="box">
  13.                         2
  14.                 </div>
  15.                 <div class="box">
  16.                         3
  17.                 </div>
  18.                 <div class="box">
  19.                         4
  20.                 </div>
  21.         </div>
  22.         <div class="right">
  23.                 5
  24.         </div>
  25. </div>
复制代码
请联系我！
作者: dvbhack    时间: 2013-11-22 16:44
我心碎不了 发表于 2013-11-22 15:40
请联系我！

(, 下载次数: 0)

IE6下截图。
作者: thymol    时间: 2013-11-22 17:06
提示: 作者被禁止或删除 内容自动屏蔽
作者: 我心碎不了    时间: 2013-11-22 17:09
thymol 发表于 2013-11-22 17:06
ie下面有显示不正常，能修改一下么

抱歉，用五楼大神的吧，公司网站不兼容IE6，自己手头也没IE6设备测试~
作者: thymol    时间: 2013-11-22 17:14
提示: 作者被禁止或删除 内容自动屏蔽
作者: amo    时间: 2013-11-22 18:06
很简单
作者: flyfish    时间: 2013-11-22 18:32
看来已经解决了呢。恭喜



欢迎光临 全球主机交流论坛 (https://443502.xyz/) Powered by Discuz! X3.4