<!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的元素来参与比较。

.使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）的更多相关文章

  1. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  2. CSS代码命名惯例语义化的方法

    CSS代码的命名惯例一直是大家热门讨论的话题.今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导. 您还可以参考彬Go的相关文章 ...

  3. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  4. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  6. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

  7. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  8. 【转载】CSS + DIV 实现局部布局

    HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局    ...

  9. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

随机推荐

  1. immutableJS一些API

    原生js转换为immutableData Immutable.fromJS([1,2]) // immutable的 list Immutable.fromJS({a: 1}) // immutabl ...

  2. 关于js执行顺序

    http://www.cnblogs.com/sanshi/archive/2011/02/28/1967367.html http://mtnt2008.iteye.com/blog/701981 ...

  3. html/CSS基础知识回顾

    html部分 块级元素: 一般用来搭建网站架构,布局,装载内容...像这些大体力的活都属于块级元素.它包括以下标签: address,blockquote,center,dir, div, dl, d ...

  4. GC overhead limit exceeded填坑心得

    我遇到这样的问题,本地部署时抛出异常java.lang.OutOfMemoryError:GC overhead limit exceeded导致服务起不来,查看日志发现加载了太多资源到内存,本地的性 ...

  5. Android之源码之模块编译和调试

    Android之源码之模块编译调试 (一) 进行源码模块修改进行编译的调试 1.首先是从git或者svn上拉一套完整的工程下来,然后全编一下,一般这个时间比较长,大概会得2,3个小时左右, 2,编译成 ...

  6. 能源项目xml文件 -- springMVC-servlet.xml -- context:component-scan

    <context:component-scan base-package="com.xindatai.ibs" use-default-filters="false ...

  7. AWS EC2的VPN-PPTP搭建教程（on aws redhat6.5 X64 centOS 6.5）

    前些日子收到amazon的邮件通知,一年前申请的ec2到期了,一年免费的free tier没有了,放在上面的2个站已经欠费了十几美元了,不过我也不打算用了,准备重新注册账号(请不要鄙视我..) 1.注 ...

  8. 6/12 Sprint2 看板和燃尽图

  9. U-Boot

    U-Boot U-Boot,全称 Universal Boot Loader,是遵循GPL条款的开放源码项目.从FADSROM.8xxROM.PPCBOOT逐步发展演化而来.其源码目录.编译形式与Li ...

  10. 在Linux中使用vi打开文件时如何显示行号，及跳转到指定行

    vi 文件名,打开文件后 如果要显示所有行号,使用 :set nu 如果要显示当前行号,使用 :nu 如果要跳转到指定行,使用 :行号 例如,跳转到第10行,使用 :10