首页 > 代码库 > 逛园子，看到个练习题，小试了一把(淘宝ued的两道小题)
逛园子，看到个练习题，小试了一把(淘宝ued的两道小题)
闲来无事，逛园子，充充电。发现了一个挺有意思的博文，自己玩了一把。
第一题：使用 HTML+CSS 实现如图布局，border-widht 1px，一个格子大小是 60*60，hover时候边框变为橘红色（兼容IE6+，考虑语义化的结构）
效果图:
简单分析一下： 使用伪类 :hover的时候相对定位 改变z-index，
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ padding: 0; margin: 0; } 8 .hover{ overflow: hidden; margin: 10px; width: 244px; height: 244px; } 9 .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; }10 .item_hover:hover{border: 1px solid #f40;z-index: 2;}11 </style>12 </head>13 <body>14 <div class="hover">15 <div class=‘item_hover‘ href="#">1</div>16 <div class=‘item_hover‘ href="#">2</div>17 <div class=‘item_hover‘ href="#">3</div>18 <div class=‘item_hover‘ href="#">4</div>19 <div class=‘item_hover‘ href="#">5</div>20 <div class=‘item_hover‘ href="#">6</div>21 <div class=‘item_hover‘ href="#">7</div>22 <div class=‘item_hover‘ href="#">8</div>23 <div class=‘item_hover‘ href="#">9</div>24 </div>25 </body>26 </html>
此方法在IE6下无效，原因是伪类：hover在IE6下只支持a标签，其他标签的伪类是不支持的。要想在IE6呈现出效果只需把class=‘item_hover‘的标签<div>替换为<a>即可
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ padding: 0; margin: 0; } 8 .hover{ overflow: hidden; width: 188px; height: 188px; } 9 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;}10 a:hover{border: 2px solid #f40;z-index: 2;}11 </style>12 </head>13 <body>14 <div class="hover">15 <a class=‘item_hover‘ href="#">1</a>16 <a class=‘item_hover‘ href="#">2</a>17 <a class=‘item_hover‘ href="#">3</a>18 <a class=‘item_hover‘ href="#">4</a>19 <a class=‘item_hover‘ href="#">5</a>20 <a class=‘item_hover‘ href="#">6</a>21 <a class=‘item_hover‘ href="#">7</a>22 <a class=‘item_hover‘ href="#">8</a>23 <a class=‘item_hover‘ href="#">9</a>24 </div>25 </body>26 </html>
当border值设置为1px,margin-right:-1px;margin-bottom:-1px;.hover相应的变为{width:184px;height:184px;overflow:hidden;}后产生了一个新的问题，如下图
当width:185px后，就正常了.搞了半天没弄清，这个1px哪来的？求大神解答。
第二题：使用一个标签和纯CSS <a href="http://www.mamicode.com/#" title="订阅博客">订阅博客</a> 实现如图效果，文字始终保持左边距10px, 下边距5px，改变字体大小（12px-50px）时，边距保持不变，不使用 content:"订阅博客"，兼容现代浏览器
效果图：
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 a{ 8 text-decoration: none; 9 }10 .mouse{11 width:500px;12 height: 100px;13 text-align: left;14 padding-left:10px;15 padding-bottom: 5px;16 vertical-align: bottom;17 display: table-cell;18 border-bottom: 5px solid #f40;19 background-color: #a0d0e0;20 color: #000;21 transition: font-size 4s;22 }23 .mouse:hover{24 background-color: #a0d0e0;25 font-size: 50px;26 -webkit-animation: color .3s;27 -o-animation: color .3s;28 animation: color .3s;29 }30 @keyframes color{31 50% {background: green;}32 100% {background: #a0d0e0;}33 }34 @-webkit-keyframes color{35 50% {background: green;}36 100% {background: #a0d0e0;}37 }38 </style>39 </head>40 <body>41 <a class=‘mouse‘ href="#" alt=‘鼠标过来，我要变身啦‘>鼠标过来，我要变身啦</a>42 </body>43 </html>
关于css3 animation动画属性，各浏览器兼容问题(来源W3School)：
到此结束啦。
绿豆刚发芽，正在汲取营养，有错误的地方还请指正。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。