逛园子，看到个练习题，小试了一把(淘宝ued的两道小题)
闲来无事，逛园子，充充电。发现了一个挺有意思的博文，自己玩了一把。
第一题：使用 HTML+CSS 实现如图布局，border-widht 1px，一个格子大小是 60*60，hover时候边框变为橘红色（兼容IE6+，考虑语义化的结构）
效果图:
简单分析一下： 使用伪类 :hover的时候相对定位 改变z-index，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ padding: 0; margin: 0; }
.hover{ overflow: hidden; margin: 10px; width: 244px; height: 244px; }
.item_hover{ float: left; width: 60px; height: 60px; padding:10px; text-align: center; border: 1px solid #e8e8e8; margin-right: -1px; margin-bottom: -1px; z-index: 1; position: relative; cursor: pointer; }
.item_hover:hover{border: 1px solid #f40;z-index: 2;}
</style>
</head>
<body>
<div class="hover">
<div class='item_hover' href="#">1</div>
<div class='item_hover' href="#">2</div>
<div class='item_hover' href="#">3</div>
<div class='item_hover' href="#">4</div>
<div class='item_hover' href="#">5</div>
<div class='item_hover' href="#">6</div>
<div class='item_hover' href="#">7</div>
<div class='item_hover' href="#">8</div>
<div class='item_hover' href="#">9</div>
</div>
</body>
</html>
此方法在IE6下无效，原因是伪类：hover在IE6下只支持a标签，其他标签的伪类是不支持的。要想在IE6呈现出效果只需把class='item_hover'的标签<div>替换为<a>即可
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ padding: 0; margin: 0; }
.hover{ overflow: hidden; width: 188px; height: 188px; }
a{display: block; float: left; z-index: 1; border: 2px solid #e8e8e8; margin-right: -2px; margin-bottom: -2px; width: 60px; height: 60px;line-height: 60px; text-align: center; position: relative;}
a:hover{border: 2px solid #f40;z-index: 2;}
</style>
</head>
<body>
<div class="hover">
<a class='item_hover' href="#">1</a>
<a class='item_hover' href="#">2</a>
<a class='item_hover' href="#">3</a>
<a class='item_hover' href="#">4</a>
<a class='item_hover' href="#">5</a>
<a class='item_hover' href="#">6</a>
<a class='item_hover' href="#">7</a>
<a class='item_hover' href="#">8</a>
<a class='item_hover' href="#">9</a>
</div>
</body>
</html>
当border值设置为1px,margin-right:-1px;margin-bottom:-1px;.hover相应的变为{width:184px;height:184px;overflow:hidden;}后产生了一个新的问题，如下图
当width:185px后，就正常了.搞了半天没弄清，这个1px哪来的？求大神解答。
第二题：使用一个标签和纯CSS <a href="#" title="订阅博客">订阅博客</a> 实现如图效果，文字始终保持左边距10px, 下边距5px，改变字体大小（12px-50px）时，边距保持不变，不使用 content:"订阅博客"，兼容现代浏览器
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
text-decoration: none;
}
.mouse{
width:500px;
height: 100px;
text-align: left;
padding-left:10px;
padding-bottom: 5px;
vertical-align: bottom;
display: table-cell;
border-bottom: 5px solid #f40;
background-color: #a0d0e0;
color: #000;
transition: font-size 4s;
}
.mouse:hover{
background-color: #a0d0e0;
font-size: 50px;
-webkit-animation: color .3s;
-o-animation: color .3s;
animation: color .3s;
}
@keyframes color{
50% {background: green;}
100% {background: #a0d0e0;}
}
@-webkit-keyframes color{
50% {background: green;}
100% {background: #a0d0e0;}
}
</style>
</head>
<body>
<a class='mouse' href="#" alt='鼠标过来，我要变身啦'>鼠标过来，我要变身啦</a>
</body>
</html>
关于css3 animation动画属性，各浏览器兼容问题(来源W3School)：
到此结束啦。
绿豆刚发芽，正在汲取营养，有错误的地方还请指正。
逛园子，看到个练习题，小试了一把(淘宝ued的两道小题)的更多相关文章
- ACM/ICPC 之 两道dijkstra练习题(ZOJ1053(POJ1122)-ZOJ1053)
两道较为典型的单源最短路径问题,采用dijkstra解法 本来是四道练习题,后来发现后面两道用dijkstra来解的话总觉得有点冗余了,因此暂且分成三篇博客(本篇以及后两篇). ZOJ1053(POJ ...
- 听说 JVM 性能优化很难？今天我小试了一把！
文章首发于公众号「陈树义」及个人博客 shuyi.tech,欢迎关注访问. 对于 Java 开发的同学来说,JVM 性能优化可以说是比较难掌握的知识点.这不仅因为 JVM 性能优化需要掌握晦涩难懂的 ...
- sparksql 练习题两道
第一题:select '{"id":1,"name":{"url":"http://xxx/yyy/zz/test.js" ...
- Data URL简介及Data URL的利弊
之前写过一篇“漫谈前端优化”的文章,里面提到过DataUrl,粗鲁的描述了下,感觉不甚详焉,所以这几天也总结了这方面的知识,参考一些资料,补充一篇文章在这里,对这方面的资料来说,也是一种强化记忆应用: ...
- 【转】Data URL和图片，及Data URI的利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...
- NOIP2016纪录[那些我所追求的]
人生第一场正式OI [序] 2016-12-04 见底部 [Day -1] 2016-11-17 期中考试无心插柳柳成荫,考了全市第2班里第1(还不是因为只复习了不到两天考试),马上请了一个周的假准备 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- [转]9个offer，12家公司，35场面试，从微软到谷歌，应届计算机毕业生的2012求职之路
1,简介 毕业答辩搞定,总算可以闲一段时间,把这段求职经历写出来,也作为之前三个半月的求职的回顾. 首先说说我拿到的offer情况: 微软,3面->终面,搞定 百度,3面->终面,口头of ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
随机推荐
- [Mugeda HTML5技术教程之15]案例分析：制作移动教育课件
本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法.Mugeda为移动教育领域和移动数字出版领域提供理想的教 ...
- win7 去除桌面快捷方式小箭头
二手入了个 sony 的本子 vgn-sz780 拿手上,感觉真心不错,然后装系统,装好xp后发现怎么折腾都没声音,由于我的硬盘是SSD的虽然有点小只有60G,但是速度还是蛮不多的,于是一横心就装了 ...
- 自定义textView的高度
原文地址: http://www.cocoachina.com/ios/20141226/10778.html iOS 8 之后的新特性
- PHP-FPM小故障解决记录
前天昨天发生的事. 阿里云升级MYSQL,申请只读库之后,IP发生了改变,PHP中关于数据库的连接都需要修改. 我们是以实例名作为统一连接字符的. 但在其中一台后端机器上,死活不生效. 就是如何是用I ...
- Power on & RESET 之前?
這是個有趣的問題 ? 當應用系統 或 ic元件模組於初始之前存在的現像為何 是個得住意的問題 ! 因為得考量 是否會對週邊或被控制端造成危害 這也是長常常會是不穩定設計 的原因!得有實務經驗及想像力才 ...
- extern "c"用法
在Windows驱动开发中,如果是使用C++开发的,那么必须在有些关键函数钱加extern c 的关键词,否则编译出来的函数,跟C语言编译的函数不同,导致驱动程序不能 被有效识别. 最关键的是Driv ...
- Roman to Integer && Integer to Roman 解答
Roman Numeral Chart V:5 X:10 L:50 C:100 D:500 M:1000 规则: 1. 重复次数表示该数的倍数2. 右加左减:较大的罗马数字右边记上较小的罗马数字,表示 ...
- Binary Search Tree DFS Template
Two methods: 1. Traverse 2. Divide & Conquer // Traverse: usually do not have return value publi ...
- Unity 功夫猫
最近在家里闲着蛋疼,突然看到一个HTML游戏感觉挺可爱的,就把素材拿过来自己写了一遍. 游戏有很多细节还是没有模仿出来. 里面有一个2DUGUI帧动画播放插件,写了我3个通宵. 还是对Unity的扩展 ...
- web前端之 HTML介绍
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...