CSS实现页面九宫格布局的简单演示

九宫格布局在制作一些Web App时还是经常可以用到的，中国E盟技术频道的小编在这里我们以一个大概的结构示例来作CSS实现页面九宫格布局的简单演示，不过需要注意IE6下的兼容性问题。

一、效果图：
2016627113915155.jpg (175×173)

三、布局二（各浏览器兼容性良好）

CSS Code复制内容到剪贴板
    css">
  4. "utf-8">
  6. "X-UA-Compatible"content="IE=edge">
  11. > type=
  12. body{margin:0;padding:0;}
  13. .grid_wrapper{
  14. width:170px;
  15. height:170px;
  16. margin-left:auto;
  17. margin-right:auto;
  18. }
  19. .grid{
  20. margin-left:5px;
  21. margin-top:5px;
  22. }
  23. .grid:after{
  24. content:".";
  25. display:block;
  26. line-height:0;
  27. height:0;
  28. clear:both;
  29. visibility:hidden;
  30. overflow:hidden;
  31. }
  32. .grida,.grida:visited{
  33. float:left;
  34. display:inline;
  35. border:5pxsolid#ccc;
  36. width:50px;
  37. height:50px;
  38. text-align:center;
  39. line-height:50px;
  40. margin-left:-5px;
  41. margin-top:-5px;
  42. position:relative;
  43. z-index:1;
  44. }
  45. .grida:hover{
  46. border-color:#f00;
  47. z-index:2;
  48. }
  52. "grid_wrapper">
    class=
  53. "grid">
    class=
  54. "#"title="1">1 >
  55. "#"title="2">2 >
  56. "#"title="3">3 >
  57. "#"title="4">4 >
  58. "#"title="5">5 >
  59. "#"title="6">6 >
  60. "#"title="7">7 >
  61. "#"title="8">8 >
  62. "#"title="9">9 >


IE6下兼容有问题，效果图如下：
2016627114120994.jpg (175×228)

三、布局二（各浏览器兼容性良好）

CSS Code复制内容到剪贴板
  4. "utf-8">
  6. "X-UA-Compatible"content="IE=edge">
  11. > type=
  12. body,ul,li{margin:0;padding:0;}
  13. .grid_wrapper{
  14. width:170px;
  15. height:170px;
  16. margin-left:auto;
  17. margin-right:auto;
  18. }
  19. .grid{
  20. margin-left:5px;
  21. margin-top:5px;
  22. list-style-type:none;
  23. }
  24. .grid:after{
  25. content:".";
  26. display:block;
  27. line-height:0;
  28. width:0;
  29. height:0;
  30. clear:both;
  31. visibility:hidden;
  32. overflow:hidden;
  33. }
  34. .gridli{float:left;line-height:50px;}
  35. .gridlia,.gridlia:visited{
  36. display:block;
  37. border:5pxsolid#ccc;
  38. width:50px;
  39. height:50px;
  40. text-align:center;
  41. margin-left:-5px;
  42. margin-top:-5px;
  43. position:relative;
  44. z-index:1;
  45. }
  46. .gridlia:hover{
  47. border-color:#f00;
  48. z-index:2;
  49. }
  53. "grid_wrapper">
    class=
    54. "grid">
    class=
  56. "#"title="1">1>
  59. "#"title="2">2>
  62. "#"title="3">3>
  65. "#"title="4">4>
  68. "#"title="5">5>
  71. "#"title="6">6>
  74. "#"title="7">7>
  77. "#"title="8">8>
  80. "#"title="9">9>

小编带来的这篇CSS实现页面九宫格布局的简单演示，是不是特别的实用呢，更多关于CSS的内容，可以多多关注下中国E盟技术频道，我们会不断的更新。

    A+
发布日期：2019-09-20  所属分类：CSS
标签：