CSS
九木旭
这个作者很懒,什么都没留下…
展开
-
canvans画圆
window.onload=function(){ draw0("myCanvas"); drawScreen("canvan"); } //实心圆function draw0(id) { var canvas = document.getElementById(id); if (canvas == null) { retu原创 2015-11-01 15:44:20 · 934 阅读 · 0 评论 -
form checkbox & radio 解决方案
form checkbox & radiocheckbox & radio 的对齐一直是个问题,不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样,相信纠结了一大批人,如果没有好好整理总结下得出一个经验,相信每次碰到这个鬼东西都是比较纠结的,很头疼啊。重置 form checkbox & radio因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7原创 2015-11-01 15:45:33 · 373 阅读 · 0 评论 -
CSS边框发光
input[type=text]:focus,input[type=password]:focus,textarea:focus,textarea:hover,input:hover{transition:border linear .2s,box-shadow linear .5s;-moz-transition:border linear .2s,-moz-box-shadow linea原创 2015-11-01 15:44:45 · 937 阅读 · 0 评论 -
localStorage
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。但是如果你找到浏览器的隐私或者本地存储的数据删除也是一样可以删除的!本地存储数据库在同样域名下的网页间是共享的,即便是在多个浏览器标签页中。我在做产品购物车的时间使用到了,这边选择产品,把产品属性拼接成JSON字符串保存到localStorage中,然后到购物车中去取……判断浏览器是否支持本地存储:一:1if原创 2015-11-01 15:44:36 · 1259 阅读 · 0 评论 -
CSS 选择器的优先级
CSS 样式选择器分为 4 个等级,A、B、C、D 可以以这四种等级为依据确定 CSS 选择器的优先级。A 为行内样式(即通过 style=”” 定义)B 为 id 选择器的数量C 为 class 类选择器的数量。D 为类型选择器(即为标签)的数量选择器特殊性(A,B,C,D)优先级Style=””1,0,0,01000#wrapper #content {}0,2,0,0200#content原创 2015-11-01 15:45:41 · 301 阅读 · 0 评论 -
html5语义化标签
http://www.cssue.com/xhtml-css/html5-css3/html5-semantics.html原创 2015-11-01 15:45:36 · 187 阅读 · 0 评论 -
字体icon
http://pan.baidu.com/s/1gdf0Uf5原创 2015-11-01 15:44:41 · 253 阅读 · 0 评论 -
CSS3写的一个按钮
.submit {background-color: #c32d32;padding: 10px 20px;font-size: 16px;text-decoration: none;border: 1px solid #9C1402;background: -webkit-gradient(linear,left top,left bottom,from(#fe444a),to(#c32d32)原创 2015-11-01 15:44:02 · 269 阅读 · 0 评论 -
手机现在也支持gif了
手机loading..效果http://www.17sucai.com/pins/demoshow/5955原创 2015-11-01 15:46:12 · 324 阅读 · 0 评论 -
设置div居中
js根据页面大小变化设置div左右居中 style="border: solid; background-color: red; width: 100px; position: absolute"> 此为居中的div 2 --> v原创 2015-11-01 15:44:33 · 370 阅读 · 0 评论 -
初识flex
页面改版,我想到最近看的flex,就拿来试试,结果很棒,告别浮动 ,清除浮动这些麻烦事,并且,占多大的地方,都帮你算好了。但是浏览器兼容是个坑在谷歌中display: flex;safari中 display: -webkit-flex;安卓浏览器 display: -webkit-box;在样式中得 display: -webkit-box; display: -webkit-flex; dis原创 2015-11-01 15:47:15 · 400 阅读 · 0 评论 -
CSS命名规范
http://www.cssue.com/xhtml-css/css-naming-conventions.html原创 2015-11-01 15:45:44 · 236 阅读 · 0 评论 -
图片垂直居中的使用技巧
以前写图片轮换遇到过,第一次知道 display: table-cell;弄得不漂亮,1个多月后,用JS设置了一把,就好了,额,JS还是强大使用纯 CSS 实现未知尺寸的图片(但高宽都小于200px)在 200px 的正方形容器中水平和垂直居中。题目的难点在于两点:垂直居中;图片尺寸未知;至于如何解决,下面是一个权衡的相对结构干净的 CSS 解决方法:CSS Code:12345678910111原创 2015-11-01 15:45:39 · 330 阅读 · 0 评论 -
超出字符,自动隐藏
overflow: hidden; /*自动隐藏文字*/text-overflow: ellipsis;/*文字隐藏后添加省略号*/white-space: nowrap;/*强制不换行*/width: 20em;/*不允许出现半汉字截断*原创 2015-11-01 15:45:06 · 317 阅读 · 0 评论 -
地址坐标反编译
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;} 反地址解析地理位原创 2015-11-01 15:44:23 · 530 阅读 · 0 评论 -
required定义
//失败图片 input:required:invalid, input:focus:invalid { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA原创 2015-11-01 15:43:39 · 1069 阅读 · 0 评论 -
rem中的坑
这里有一篇专门介绍rem的http://www.w3cplus.com/css3/define-font-size-with-css3-rem要注意的是rem是相对于html的font-size,但是当你的浏览器最小PX是12PX,而你html是62.5%就是10px,rem不会相对10px,而是12px,一般用谷歌调试,所以还是设置75%的好原创 2015-11-01 15:47:10 · 547 阅读 · 0 评论 -
去掉苹果默认样式
-webkit-appearance: none;原创 2015-11-01 15:44:26 · 740 阅读 · 0 评论 -
页面偏移transform
//核心代码就这两句,上面是偏移长度,下面 相当于动画时间 $(".box").css({"-webkit-transform":"translateX(150px)"}); $(".box").css( {"-webkit-transition": "all 0.4s"}); //用这两句可以做http://caibaojian.com/demo/2014/4/off-canvas-men原创 2015-11-01 15:45:59 · 1201 阅读 · 0 评论