<!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. webapi 解决ajax跨域请求问题

    webapi在配置文件中加入这几句就可以解决ajax(同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是 ...

  2. 【Java】代处理？代理模式 - 静态代理，动态代理

    >不用代理 有时候,我希望在一些方法前后都打印一些日志,于是有了如下代码. 这是一个处理float类型加法的方法,我想在调用它前打印一下参数,调用后打印下计算结果.(至于为什么不直接用+号运算, ...

  3. java 字符串split有很多坑，使用时请小心！！

    System.out.println(":ab:cd:ef::".split(":").length);//末尾分隔符全部忽略 System.out.print ...

  4. CentOS7 续

    网络环境 第一步:通过cmd查询自己本机的IP,然后记录下来,手工配置到本地连接上面IP:子网掩码:DNS1:101.7.8.9DNS2:202.38.184.13 第二步:给物理机 本地连接配置第二 ...

  5. 【leetcode❤python】 400. Nth Digit

    #-*- coding: UTF-8 -*- class Solution(object):    def findNthDigit(self, n):        ""&quo ...

  6. POI 导出Excel

    package east.mvc.utils; import java.io.*; import java.lang.reflect.*; import java.text.SimpleDateFor ...

  7. Sprint(第一天11.14)

    Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:点餐系统 4.团队博客地址:http://www.cnblogs.com/iamCarson/ 团 ...

  8. 一个java的DES加密解密类转换成C#

    一个java的des加密解密代码如下: //package com.visionsky.util; import java.security.*; //import java.util.regex.P ...

  9. 学习mongo系列（九）索引，聚合，复制（副本集），分片

    一.索引 二.聚合 三.复制(副本集) 四.分片 尚未实践操作. 详见http://www.runoob.com/mongodb/mongodb-indexing.html

  10. 机器学习职位 & 面经

    http://www.cnblogs.com/peileyuan/p/4775453.html <浅谈机器学习的职业发展方向> http://blog.sina.com.cn/s/blog ...