CSS如何实现页面九宫格布局的简单示范

网络
热爱工作，投身事业，在这一过程中，抑制私心，陶冶人格，同时积累经验，提高能力。这样，才能获得周围人们的信任和尊敬。

一、效果图：

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

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>九宫格布局</title>
  6. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  7. </head>
  8. <body>
  9. <html>
  10. <head>
  11. <styletype="text/css">
  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. }
  49. </style>
  50. </head>
  51. <body>
  52. <divclass="grid_wrapper">
  53. <divclass="grid">
  54. <arel="nofollow noopener noreferrer" href="#"title="1">1</a>
  55. <arel="nofollow noopener noreferrer" href="#"title="2">2</a>
  56. <arel="nofollow noopener noreferrer" href="#"title="3">3</a>
  57. <arel="nofollow noopener noreferrer" href="#"title="4">4</a>
  58. <arel="nofollow noopener noreferrer" href="#"title="5">5</a>
  59. <arel="nofollow noopener noreferrer" href="#"title="6">6</a>
  60. <arel="nofollow noopener noreferrer" href="#"title="7">7</a>
  61. <arel="nofollow noopener noreferrer" href="#"title="8">8</a>
  62. <arel="nofollow noopener noreferrer" href="#"title="9">9</a>
  63. </div>
  64. </div>
  66. </body>
  67. </html>

IE6下兼容有问题，效果图如下：

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

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>九宫格布局</title>
  6. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  7. </head>
  8. <body>
  9. <html>
  10. <head>
  11. <styletype="text/css">
  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. }
  50. </style>
  51. </head>
  52. <body>
  53. <divclass="grid_wrapper">
  54. <ulclass="grid">
  55. <li><arel="nofollow noopener noreferrer" href="#"title="1">1</a></li>
  56. <li><arel="nofollow noopener noreferrer" href="#"title="2">2</a></li>
  57. <li><arel="nofollow noopener noreferrer" href="#"title="3">3</a></li>
  58. <li><arel="nofollow noopener noreferrer" href="#"title="4">4</a></li>
  59. <li><arel="nofollow noopener noreferrer" href="#"title="5">5</a></li>
  60. <li><arel="nofollow noopener noreferrer" href="#"title="6">6</a></li>
  61. <li><arel="nofollow noopener noreferrer" href="#"title="7">7</a></li>
  62. <li><arel="nofollow noopener noreferrer" href="#"title="8">8</a></li>
  63. <li><arel="nofollow noopener noreferrer" href="#"title="9">9</a></li>
  64. </ul>
  65. </div>
  66. </body>
  67. </html>

以上就是CSS如何实现页面九宫格布局的简单示范。也许世间的事，都是那么的千奇百怪，随时随刻都会发生，但你要镇静，可又能镇静得了吗？我们都是俗人，没有什么惊天动地的事情，我们只有这份爱，可又那么的叫人难猜。更多关于CSS如何实现页面九宫格布局的简单示范请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例