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

程序员文章站 2022-03-17 14:51:33

...

九宫格布局在制作一些Web App时还是经常可以用到的,这里我们以一个大概的结构示例来作CSS实现页面九宫格布局的简单示范,不过需要注意IE6下的兼容性问题.

一、效果图：

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

CSS Code复制内容到剪贴板

<!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>   
<p class="grid_wrapper">   
 <p 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>   
 </p>   
</p>   
</body>   
</html>

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

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

CSS Code复制内容到剪贴板

<!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>   
<p 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>   
</p>   
</body>   
</html>

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

css3的@media属性实现页面响应式布局示例代码

纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面

off-canvas：抽屉式页面布局的纯css实现

Node实现最简单的todo-list页面_html/css_WEB-ITnose

纯html、css、javascript实现楼层跳跃式的页面布局

栅格布局的两种简单的实现方式_html/css_WEB-ITnose

CSS实现九宫格布局(自适应)的示例代码

简单介绍HTML+CSS实现单列布局和水平居中布局的方法

JavaScript和html以及css实现楼层跳跃式的页面布局的案例