简单的九宫格布局

最新推荐文章于 2021-05-24 04:09:50 发布

活着就得有野心

最新推荐文章于 2021-05-24 04:09:50 发布

阅读量849

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/huoniu007/article/details/49529749

本文展示了两种九宫格布局方案，其中布局二具有良好的各浏览器兼容性，而布局一在IE6下存在兼容问题。通过这两种方法，可以实现稳定的九宫格展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图：

二、布局一（IE6下兼容有问题）

 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8">
 
<title>九宫格布局</title>
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
</head>
 
<body>
 
<html>
 
<head>
 
<style type="text/css">
 
body{margin:0;padding:0;}
 
.grid_wrapper{
 
    width: 170px;
 
    height: 170px;
 
    margin-left: auto;
 
    margin-right: auto;
 
}
 
.grid{
 
    margin-left: 5px;
 
    margin-top: 5px;
 
}
 
.grid:after{
 
    content: ".";
 
    display: block;
 
    line-height: 0;
 
    height: 0;
 
    clear: both;
 
    visibility: hidden;
 
    overflow: hidden;
 
}
 
.grid a,.grid a:visited{
 
    float: left;
 
    display: inline;
 
    border: 5px solid #ccc;
 
    width: 50px;
 
    height: 50px;
 
    text-align: center;
 
    line-height: 50px;
 
    margin-left: -5px;
 
    margin-top: -5px;
 
    position: relative;
 
    z-index: 1;
 
}
 
.grid a:hover{
 
    border-color: #f00;
 
    z-index: 2;
 
}
 
</style>
 
</head>
 
<body>
 
<div class="grid_wrapper">
 
    <div class="grid">
 
        <a href="#" title="1">1</a>
 
        <a href="#" title="2">2</a>
 
        <a href="#" title="3">3</a>
 
        <a href="#" title="4">4</a>
 
        <a href="#" title="5">5</a>
 
        <a href="#" title="6">6</a>
 
        <a href="#" title="7">7</a>
 
        <a href="#" title="8">8</a>
 
        <a href="#" title="9">9</a>
 
    </div>
 
</div>
 
 
 
</body>
 
</html>

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

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

 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8">
 
<title>九宫格布局</title>
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
</head>
 
<body>
 
<html>
 
<head>
 
<style type="text/css">
 
body,ul,li{margin:0;padding:0;}
 
.grid_wrapper{
 
    width: 170px;
 
    height: 170px;
 
    margin-left: auto;
 
    margin-right: auto;
 
}
 
.grid{
 
    margin-left: 5px;
 
    margin-top: 5px;
 
    list-style-type:none;
 
}
 
.grid:after{
 
    content: ".";
 
    display: block;
 
    line-height: 0;
 
    width:0;
 
    height: 0;
 
    clear: both;
 
    visibility: hidden;
 
    overflow: hidden;
 
}
 
.grid li{float:left;line-height: 50px;}
 
.grid li a,.grid li a:visited{
 
    display:block;
 
    border: 5px solid #ccc;
 
    width: 50px;
 
    height: 50px;
 
    text-align: center;
 
    margin-left: -5px;
 
    margin-top: -5px;
 
    position: relative;
 
    z-index: 1;
 
}
 
.grid li a:hover{
 
    border-color: #f00;
 
    z-index: 2;
 
}
 
</style>
 
</head>
 
<body>
 
<div class="grid_wrapper">
 
    <ul class="grid">
 
        <li><a href="#" title="1">1</a></li>
 
        <li><a href="#" title="2">2</a></li>
 
        <li><a href="#" title="3">3</a></li>
 
        <li><a href="#" title="4">4</a></li>
 
        <li><a href="#" title="5">5</a></li>
 
        <li><a href="#" title="6">6</a></li>
 
        <li><a href="#" title="7">7</a></li>
 
        <li><a href="#" title="8">8</a></li>
 
        <li><a href="#" title="9">9</a></li>
 
    </ul>
 
</div>
 
</body>
 
</html>