你的位置:首页 > 网页设计

[网页设计].使用 HTML+CSS 实现如图布局,border


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css淘宝测试练习题</title>
<style type="text/css">
*{margin: 0;padding: 0;font-size: 12px;line-height: 1;font-family: 'Microsoft Yahei',Arial;}
h1{background-color: green;color: #fff;padding: 10px;font-size: 16px;font-weight: normal;}
a{text-decoration: none;}

#box1{width:180px;height:180px;overflow: hidden;}
#box1 a{display: block;float:left;z-index:1;border: 5px solid blue;margin-right: -5px; margin-bottom:-5px;width: 50px;height: 50px;line-height: 50px;text-align: center;}
#box1 a:hover{border-color: red;position: relative;z-index: 2;}

</style>

</head>

<body>
<h1>一.使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)</h1>
<img src="http://images.cnitblog.com/blog/294743/201305/18155307-5204bc8ef6164feb87953dd7f264158b.gif">
<div id="box1">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
</div>

</body>

</html>

1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。

2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。

3. IE6/7下position不为static,且z-index不存在时z-index为0,除此之外的浏览器z-index为auto。

4. z-index为auto的元素不参与层级关系的比较,由向上遍历至此且z-index不为auto的元素来参与比较。