站内搜索

HTML九宫格布局实现方法_HTML/Xhtml_网页制作

网站布局多样化是我们前端的拿手菜!最近看到UC浏览器的默认标签页使用的就是九宫格布局。就研究了下,在这里,我就分享一下代码,共同学习下!效果如下:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>全兼容的HTML九宫格布局</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. </head>
  8. <body>
  9. <html>
  10. <head>
  11. <style type="text/css">
  12. /** 重置浏览器默认标签样式 */
  13. body,ul,li{margin:0;padding:0;}
  14. .xttblog{
  15. width: 1200px;
  16. height: 170px;
  17. margin-top:50px;
  18. margin-left: auto;
  19. margin-right: auto;
  20. }
  21. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
  22. .box:after{
  23. content: ".";
  24. display: block;
  25. line-height: 0;
  26. width:0;
  27. height: 0;
  28. clear: both;
  29. visibility: hidden;
  30. overflow: hidden;
  31. }
  32. .box li{float:left;line-height: 230px;}
  33. .box li a,.box li a:visited{
  34. display:block;
  35. border: 5px solid #ccc;
  36. width: 380px;
  37. height: 230px;
  38. text-align: center;
  39. margin-left: -5px;
  40. margin-top: -5px;
  41. position: relative;
  42. z-index: 1;
  43. }
  44. .box li a:hover{border-color: #f00;z-index: 2;}
  45. </style>
  46. </head>
  47. <body>
  48. <div class="xttblog">
  49. <ul class="box">
  50. <li><a href="#" title="1"><img src="sh.jpg"/></a></li>
  51. <li><a href="#" title="2"><img src="bd.jpg"/></a></li>
  52. <li><a href="#" title="3"><img src="tb.jpg"/></a></li>
  53. <li><a href="#" title="4"><img src="fh.jpg"/></a></li>
  54. <li><a href="#" title="5"><img src="tb.jpg"/></a></li>
  55. <li><a href="#" title="6"><img src="tb.jpg"/></a></li>
  56. <li><a href="#" title="7"><img src="tb.jpg"/></a></li>
  57. <li><a href="#" title="8"><img src="tb.jpg"/></a></li>
  58. <li><a href="#" title="9"><img src="tb.jpg"/></a></li>
  59. </ul>
  60. </div>
  61. </body>
  62. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

  • 上一篇:举例讲解HTML中META标签的一些使用技巧_HTML/Xhtml_网页制作
  • 下一篇:meta标签中的viewport控制设备屏幕css_HTML/Xhtml_网页制作