您的位置:首页 > Web前端 > > 正文

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

更多 时间:2022-01-17 01:51:03 类别:Web前端 浏览量:1663

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.  width170px;   
    15.  height170px;   
    16.  margin-leftauto;   
    17.  margin-rightauto;   
    18. }   
    19. .grid{   
    20.  margin-left5px;   
    21.  margin-top5px;   
    22. }   
    23. .grid:after{   
    24.  content".";   
    25.  displayblock;   
    26.  line-height: 0;   
    27.  height: 0;   
    28.  clearboth;   
    29.  visibilityhidden;   
    30.  overflowhidden;   
    31. }   
    32. .grid a,.grid a:visited{   
    33.  floatleft;   
    34.  displayinline;   
    35.  border5px solid #ccc;   
    36.  width50px;   
    37.  height50px;   
    38.  text-aligncenter;   
    39.  line-height50px;   
    40.  margin-left: -5px;   
    41.  margin-top: -5px;   
    42.  positionrelative;   
    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.  width170px;   
    15.  height170px;   
    16.  margin-leftauto;   
    17.  margin-rightauto;   
    18. }   
    19. .grid{   
    20.  margin-left5px;   
    21.  margin-top5px;   
    22.  list-style-type:none;   
    23. }   
    24. .grid:after{   
    25.  content".";   
    26.  displayblock;   
    27.  line-height: 0;   
    28.  width:0;   
    29.  height: 0;   
    30.  clearboth;   
    31.  visibilityhidden;   
    32.  overflowhidden;   
    33. }   
    34. .grid li{float:left;line-height50px;}   
    35. .grid li a,.grid li a:visited{   
    36.  display:block;   
    37.  border5px solid #ccc;   
    38.  width50px;   
    39.  height50px;   
    40.  text-aligncenter;   
    41.  margin-left: -5px;   
    42.  margin-top: -5px;   
    43.  positionrelative;   
    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