网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
CSS实现页面九宫格布局的简单示范
(编辑:jimmy 日期: 2024/9/20 浏览:
2
)
一、效果图:
三、布局二(各浏览器兼容性良好)
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>
<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下兼容有问题,效果图如下:
三、布局二(各浏览器兼容性良好)
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>
<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>
上一篇:
CSS实现页面两列布局与三列布局的方法示例
下一篇:
IE6和IE7中行内元素后的浮动元素被折行的问题解决
最新资源
《赛博朋克2077》更新上线:支持AMD FSR3
《塞尔达传说:智慧的再现》提前半个月偷跑,引发
战锤40K星际战士2全职业介绍|全职业技能效果一览
陈百强《2006世纪10星·永恒篇[环球]》[WAV整轨]
【新世纪钢琴】VA-GoldenOctober(Piano)(金秋十
青稞荞麦《破茧》新生代组合[WAV+CUE]
因系统升级后出现BUG 《FF16》PS5完全版宣布延期
《黑神话:悟空》周伯通!大佬用左右手分别挑战两
《黑神话:悟空》攻击动作致敬《大话西游》:这也
《星舰铳犬太阳系物语》游戏背景介绍
首页
音乐
电影
资源