开心学习
当前位置：Web前端 > > 正文

css宫格布局（CSS实现页面九宫格布局的简单示范）

时间：2022-01-17 01:51:03类别：Web前端

css宫格布局

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

一、效果图：
css宫格布局（CSS实现页面九宫格布局的简单示范）

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

  • CSS Code复制内容到剪贴板
    1. <!DOCTYPE html>   
    2. <html>   
    3. <head>   
    4. <meta charset="utf-8">   
    5. <title>九宫格布局</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. 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. .grid a,.grid a:visited{   
    33.  float: left;   
    34.  display: inline;   
    35.  border: 5px solid #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. .grid a:hover{   
    46.  border-color: #f00;   
    47.  z-index: 2;   
    48. }   
    49. </style>   
    50. </head>   
    51. <body>   
    52. <li class="grid_wrapper">   
    53.  <li class="grid">   
    54.   <a href="#" title="1">1</a>   
    55.   <a href="#" title="2">2</a>   
    56.   <a href="#" title="3">3</a>   
    57.   <a href="#" title="4">4</a>   
    58.   <a href="#" title="5">5</a>   
    59.   <a href="#" title="6">6</a>   
    60.   <a href="#" title="7">7</a>   
    61.   <a href="#" title="8">8</a>   
    62.   <a href="#" title="9">9</a>   
    63.  </li>   
    64. </li>   
    65.   
    66. </body>   
    67. </html>  

    • IE6下兼容有问题，效果图如下：
    css宫格布局（CSS实现页面九宫格布局的简单示范）

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

  • CSS Code复制内容到剪贴板
    1. <!DOCTYPE html>   
    2. <html>   
    3. <head>   
    4. <meta charset="utf-8">   
    5. <title>九宫格布局</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. 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. .grid li{float:left;line-height: 50px;}   
    35. .grid li a,.grid li a:visited{   
    36.  display:block;   
    37.  border: 5px solid #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. .grid li a:hover{   
    47.  border-color: #f00;   
    48.  z-index: 2;   
    49. }   
    50. </style>   
    51. </head>   
    52. <body>   
    53. <li class="grid_wrapper">   
    54.  <ul class="grid">   
    55.   <li><a href="#" title="1">1</a></li>   
    56.   <li><a href="#" title="2">2</a></li>   
    57.   <li><a href="#" title="3">3</a></li>   
    58.   <li><a href="#" title="4">4</a></li>   
    59.   <li><a href="#" title="5">5</a></li>   
    60.   <li><a href="#" title="6">6</a></li>   
    61.   <li><a href="#" title="7">7</a></li>   
    62.   <li><a href="#" title="8">8</a></li>   
    63.   <li><a href="#" title="9">9</a></li>   
    64.  </ul>   
    65. </li>   
    66. </body>   
    67. </html>  
    • 标签：
    九宫格 css
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习