逛园子，看到个练习题，小试了一把(淘宝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取负值时将拉近距离.常见的功能 ...

随机推荐

smarty模板引擎中section循环loop与total的区别
在smarty模板引擎的section循环中 $data=[101,102,103,105,104]; section的两个属性total与loop {section foo $data start= ...
JQuery基础学习总结
JQuery基础学习总结简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
搭建MHA环境【2】安装mysql-5.6 + mysql复制
本例中mysql的安装方式选用了二进制包安装方案.mysql复制用半同步复制方案 [1]安装mysql-5.6.31 要在所有的数据节点上都安装上mysql,安装方式大致相同,所以我这里就不重复写多次 ...
form 练习
<form>姓:<input type="text" name="firstname" /><br />名:<inpu ...
gulp编译less简单demo
写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
IOS响应式编程框架ReactiveCocoa(RAC)使用示例-备
ReactiveCocoa是响应式编程(FRP)在IOS中的一个实现框架,它的开源地址为:https://github.com/ReactiveCocoa/ReactiveCocoa# :在网上看了几 ...
js django 数据互动
后台传输到客户端的数据怎么跟js进行互动 eval("("+{{data|safe}}+")") 获取到的数据可以直接使用 eval 有时候会存在编码问题所以推 ...
linux下制作共享库.a和 .so
接触linux时间不长,总是感觉底气不足,很多东西总是感到迷迷糊糊,其实是因为没找拿到linux C的两把钥匙: makefile和动态库.共享库.linux C中几乎所有的程序都是以库的形式给出,如 ...
【Python脚本】Eclipse IDE扩展PyDev插件安装
作为一名Python的初学者,其实不用太在意IDE了,我觉得开始的时候用用自带的 IDLE 也挺好的. 还有 DreamPie 也挺好的.都是一些轻量级的IDE. 因为我正好安装有Eclipse,平时 ...
linux使用mysql的命令
1.连接到mysql服务器的命令 mysql -h 服务器主机地址 -u 用户名 -p 用户密码例:mysql -h 192.168.1.1 -u root -p //指定服务器的主机地址和用户 ...

逛园子，看到个练习题，小试了一把(淘宝ued的两道小题)

逛园子，看到个练习题，小试了一把(淘宝ued的两道小题)的更多相关文章

随机推荐

热门专题