科技常识：CSS实现页面九宫格布局的简单示范_新闻中心

安徽朗凯奇建材有限公司

普通会员

科技常识：CSS实现页面九宫格布局的简单示范

2023-05-063

今天小编跟大家讲解下有关CSS实现页面九宫格布局的简单示范，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现页面九宫格布局的简单示范的相关资料，希望小伙伴们看了有所帮助。

一、效果图：

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

CSS Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>九宫格布局</title> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> </head> <body> <html> <head> <styletype="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; } .grida,.grida:visited{ float:left; display:inline; border:5pxsolid#ccc; width:50px; height:50px; text-align:center; line-height:50px; margin-left:-5px; margin-top:-5px; position:relative; z-index:1; } .grida:hover{ border-color:#f00; z-index:2; } </style> </head> <body> <divclass="grid_wrapper"> <divclass="grid"> <ahref="#"title="1">1</a> <ahref="#"title="2">2</a> <ahref="#"title="3">3</a> <ahref="#"title="4">4</a> <ahref="#"title="5">5</a> <ahref="#"title="6">6</a> <ahref="#"title="7">7</a> <ahref="#"title="8">8</a> <ahref="#"title="9">9</a> </div> </div> </body> </html>

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

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

CSS Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>九宫格布局</title> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> </head> <body> <html> <head> <styletype="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; } .gridli{float:left;line-height:50px;} .gridlia,.gridlia:visited{ display:block; border:5pxsolid#ccc; width:50px; height:50px; text-align:center; margin-left:-5px; margin-top:-5px; position:relative; z-index:1; } .gridlia:hover{ border-color:#f00; z-index:2; } </style> </head> <body> <divclass="grid_wrapper"> <ulclass="grid"> <li><ahref="#"title="1">1</a></li> <li><ahref="#"title="2">2</a></li> <li><ahref="#"title="3">3</a></li> <li><ahref="#"title="4">4</a></li> <li><ahref="#"title="5">5</a></li> <li><ahref="#"title="6">6</a></li> <li><ahref="#"title="7">7</a></li> <li><ahref="#"title="8">8</a></li> <li><ahref="#"title="9">9</a></li> </ul> </div> </body> </html>

来源：爱蒂网