- 博客(21)
- 收藏
- 关注
RSS订阅原创 css媒体查询iphone4和iphone5
/* iphone4 */@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){}/* iphone5 */@media screen and (device-width: 320px) and (device-height:
2016-08-08 11:19:21
7000
原创 select option 右对齐
最近一个需求的信息编辑，里面有连续的select选项，需要右对齐如下图:direction: rtl;原来有一个高端属性很少用到啊，这是个css2哦，，，
2016-04-21 15:56:13
1444
原创 sass写法 给animation添加webkit前缀（待完善）
sass文件内容--------------------------------------------@mixin prefix-animation($animation-name){ animation:$animation-name; -webkit-animation:$animation-name;}@mixin prefix-keyframes($a
2016-03-16 18:08:32
3069
原创 css两行文字超出显示省略号
css写单行超出显示省略号，可以复习下，这个很常用。width: 3rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;这种两行的文字，用纯css截取，移动端下载也ok了，ios的我测了ok，安卓的只测试了小米，魅族，三星的部分机型，是否很符合规范大家可以去查查文档之类的，但是效果确实实现了啊
2016-03-11 16:14:49
5904
原创 css伪类写三角
&:after{ content: ""; position: absolute; left: 0; bottom:0; width: 0; hei
2016-03-08 18:42:43
548
原创 移动端a链接按下背景变色js
注意移动端的按下，是touchstart，和touchend。。。function clickBg(obj,color01,color02){ obj.on('touchstart',function(){ $(this).css({ background:color01 }); }); obj.o
2016-03-08 15:42:50
645
原创 简易单行文字上下滚动js
就是这种最简单的，上线方向的额，单行公告类，文字无缝滚动html结构-------------------------------------- 1北京市海淀法院10月告拍品日预北京市海淀法院10月告拍品日预告告 2京东集团领导人我们，京东京东到家啊啊京东集团领导人我们，京东京东到家啊啊
2016-03-08 15:35:56
6616
原创 实时获取输入框字数(移动端)
$('.textarea-w textarea').on('input',function(){ $('.textarea-mum span').text($(this).val().length);})
2016-02-19 14:59:48
1075
原创 sass的循环写法实例
sass里面也有for的写法，在有些地方用着还是很方便的。比如：下图的左侧所有iconhtml写法：如下图，起名的时候还是要有规律的数字sass写法：i{ width: 18px; height: 18px; background:url(i/intro-icons.png) no-repeat;
2016-02-02 18:33:53
969
原创 h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽
在ios下，双击屏幕某些地方，滚动条会自动向上走一段。当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。用js解决一下吧，这俩问题很类似，总结到一起了。----------特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。html部分
2016-02-02 18:09:28
6301
1
原创 loading条animation写法
-webkit-animation: rotate360 .5s linear infinite;-moz-animation: rotate360 .5s linear infinite;animation: rotate360 .5s linear infinite;@-webkit-keyframes rotate360{ 0%{-webkit-transform-or
2016-01-27 15:01:53
471
原创 移动端返回顶部右下角按钮代码
html结构：------------------------------------------------------------------返回顶部css样式：----------------------------------------------------------------------.go-top { position: fixed; bo
2016-01-12 15:31:59
9936
原创 m版页面判断安卓与ios系统
安卓系统和ios系统，在做app里面嵌入m版时，有时候会发现，ios上面的那个电池状态栏不占位置，但是安卓的状态栏占位，所以需要区分系统样式单独处理一下！var sUserAgent=navigator.userAgent.toLowerCase();if(sUserAgent.match(/iphone os 8/i) == "iphone os 8"){ }else
2016-01-12 11:41:50
460
原创 css3移动端简单的背景渐变和文字渐变
background-image: -moz-linear-gradient(top, #fdfdfd, #f8f8f8); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #f8f8f8)); /* Saf4
2016-01-12 11:22:03
3406
原创 关于移动端css用rem单位的情况
写移动端的页面有一些了试用过的方法大概总结一下：1、字号单位px，宽度写百分数，高度写定值px2、在css中用@media写媒体查询，以iphone6 为分界，字号单位用rem，宽度写百分数，高度尽量用padding，不要给定值（防止用户在浏览器中自动调节字号大小，使页面错乱）3、就是本文想说的重点方法，用js算一下基本字号的大小，字号，宽度和高度，所有单位都用re
2015-12-03 13:03:40
1915
原创 css改变默认滚动条样式
当然兼容性有问题，但是手机上看是ok的，电脑不奢求啥~~~~.menu-tab::-webkit-scrollbar { width: 8px;}.menu-tab::-webkit-scrollbar-track { background: pink;}.menu-tab::-webkit-scrollbar-thumb { border-rad
2015-11-25 19:24:42
371
原创 关于h5页面，在手机上测试，可配host
如果，可以不用配host，就在手机上测试，比较容易，只要有一个地址就ok了，现在的需求需要手机也配host，那具体如何操作，如下(电脑配好host)：1、安装猎豹、360等免费wifi软件，用电脑发出无线信号，设置全为默认即可。2、下载并安装Fiddler，进入顶部菜单的Tools—Fiddleroptions在https中设置Connection设置：勾选Allowr
2015-11-24 13:28:04
5158
原创 css：appearance:none;
appearance:none;-moz-appearance:none; /* Firefox */-webkit-appearance:none; /* Safari 和 Chrome */在移动端，h5页面中，经常会需要使用手机自带的原生select控件，此为清除默认样式代码，在苹果和安卓手机都测过，好用
2015-11-23 22:04:42
816
原创 css：-webkit-overflow-scrolling: touch;
overflow-y:auto;-webkit-overflow-scrolling: touch;通常在有弹层出现，并且弹层里面是列表，需要上下滑动查看，而且在安卓手机比较卡顿的时候，会用到这个属性。
2015-11-23 21:54:26
1057
原创 css：pointer-events
pointer-events 是 CSS 新属性pointer-events：字面理解是点击鼠标事件，常用值分别是auto和none，其他大多跟svg有关。当使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面eg：当有一个全屏铺满的（position:fixed;top:0;left:0;bottom:0;right:0;）弹出层d
2015-11-23 21:40:06
407
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人