<!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. UIDatePicker 日期/时间选取器(滚轮)—IOS开发

    UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入.日期选取器的各列会按照指定的风格进行自动配置,这样 ...

  2. laravel框架总结(四) -- 服务容器

    1.依赖 我们定义两个类:class Supperman 和 class Power,现在我们要使用Supperman ,而Supperman 依赖了Power class Supperman { p ...

  3. SQL SA密码丢失

    ------------记不清了,以下似乎是这样操作的-----NET STOP MSSQLSERVER Net Start MSSQLServer /m"SQLCMD" 安装并使 ...

  4. [问题2014S02] 解答

    [问题2014S02] 解答  首先注意到: 两个实系数多项式 \(f(x),g(x)\) 互素当且仅当 \(f(x),g(x)\) 在复数域 \(\mathbb{C}\) 上没有共公根, 当且仅当结 ...

  5. Android的UI设计

    一.Android控件 1.TextView 属性:id.width.height.gravity(对齐方式).textSize(文字大小).textColor(文字颜色) 2.Button 属性:i ...

  6. linux 修改home目录下的中文目录名为英文

    编辑home/下的 .config/user-dirs.dirs,把所有的中文名称修改为英文名称 在home目录下创建对应的英文名称路径 运行 xdg-user-dirs-update 重启机器

  7. DSO激活时，生成主数据SID时报错：原因，主数据允许小写字母没有勾上

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. Adobe Edge Animate CC 不再开发更新！

    Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...

  9. asp获取虚拟目录根路径

    <% TempArray = Array("account_book","admin","ajaxFile","catalo ...

  10. openfire源码修改聊天消息发送内容

    /** * $RCSfile: MessageRouter.java,v $ * $Revision: 3007 $ * $Date: 2005-10-31 13:29:25 -0300 (Mon, ...