您的位置：首页 > Web前端 > HTML

HTML九宫格布局实现方法

2016-03-31 10:46 821 查看

网站布局多样化是我们前端的拿手菜！最近看到UC浏览器的默认标签页使用的就是九宫格布局。就研究了下，在这里，我就分享一下代码，共同学习下！效果如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>全兼容的HTML九宫格布局</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;}

.xttblog{

width: 1200px;

height: 170px;

margin-top:50px;

margin-left: auto;

margin-right: auto;

}

.box{margin-left: 5px;margin-top: 5px;list-style-type:none;}

.box:after{

content: ".";

display: block;

line-height: 0;

width:0;

height: 0;

clear: both;

visibility: hidden;

overflow: hidden;

}

.box li{float:left;line-height: 230px;}

.box li a,.box li a:visited{

display:block;

border: 5px solid #ccc;

width: 380px;

height: 230px;

text-align: center;

margin-left: -5px;

margin-top: -5px;

position: relative;

z-index: 1;

}

.box li a:hover{border-color: #f00;z-index: 2;}

</style>

</head>

<body>

<div class="xttblog">

<ul class="box">

<li><a href="#" title="1"><img src="sh.jpg"/></a></li>

<li><a href="#" title="2"><img src="bd.jpg"/></a></li>

<li><a href="#" title="3"><img src="tb.jpg"/></a></li>

<li><a href="#" title="4"><img src="fh.jpg"/></a></li>

<li><a href="#" title="5"><img src="tb.jpg"/></a></li>

<li><a href="#" title="6"><img src="tb.jpg"/></a></li>

<li><a href="#" title="7"><img src="tb.jpg"/></a></li>

<li><a href="#" title="8"><img src="tb.jpg"/></a></li>

<li><a href="#" title="9"><img src="tb.jpg"/></a></li>

</ul>

</div>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML 九宫格布局

相关文章推荐

新的分享

章节导航