话说, 很久很久以前, 一直到不久前, 浏览器原生的 checkbox(复选框) 的样式大部分都不能改的, 在各个浏览器中的外观和行为都不一致, 这是一件相当让人蛋疼的事.
而在那个远古的蛮荒时代, 还生活着一种叫攻城师的生物, 每天被产品经理们强迫着, 想方设法让 checkbox 外观一统江湖, 苦不堪言.
在那个时代, css2 和 dom level2 风行, 却对 checkbox 束手无策, 苦逼的攻城师们只能用 JS 来模拟 checkbox 的行为, 无辜的 checkbox 只能灰溜溜的束之高阁~.~
首先说这是一个神奇的播放器,为什么神奇呢,先直接看最终成果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> html, body { margin: 0px; padding: 0px; _overflow:hidden; _height:100%; } .lay_topfixed { width: 100%; height: 34px; position: relative; z-index: 400; } .lay_topfixed .lay_topfixed_inner { left: 0px; top: 0px; width: 100%; position: fixed; _position: absolute; background-color:#4B97BD; color:white; text-align:center; height: 34px; line-height:34px; } .container{ _margin-right:15px; _overflow:auto; _height:100%; } </style> </head> <body> <div class="container"> <div class="lay_topfixed"> <div class="lay_topfixed_inner"> 哈哈,我一直不动~~ </div> </div> <div style="height:2000px"> <br /><br /> adfadfasdf asdf a sdfasdf sdf asd fa sdf asd fa sdf asd fsdf sdf as df </div> </div> </body> </html> |
关于团队合作的 css 命名规范
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2