CSS3
Tony3820
学习新的技术,能让程序员枯燥的生活变得精彩,能让自己更加丰富
展开
-
css3动画的暂停与运行
class="panorama">.panorama { width: 300px; height: 300px; background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg); background-size: auto 100%; cursor: poi原创 2016-07-14 10:12:32 · 930 阅读 · 0 评论 -
页面z-index的数值不生效的原因
说在前面:从父原则 <div class="a"> <div class="b"></div></div><div class="c"></div>chorm22+中,当设置position:fixed;后会触发元素创建一个新的层叠上下文,并且当成一个整体在父层转载 2018-12-30 18:08:34 · 1829 阅读 · 0 评论 -
class命名规范
常见class关键词:布局类:header, footer, container, main, content, aside, page, section 包裹类:wrap, inner 区块类:region, block, box 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span 列表类:li...转载 2018-08-08 15:22:23 · 4157 阅读 · 0 评论 -
微信APP浏览器如何引用中文字体
1、下载中文字体 如:FZS3JW.TTF 2、访问http://www.fontconverter.org/ 转换字体 3、转换成四种格式,包括:FZS3JW.TTF,FZS3JW.svg,FZS3JW.woff,FZS3JW.eot4、css3引用字体方式 @font-face { font-family: 'FZS3JW'; src: url('../ima原创 2017-04-02 16:45:40 · 1850 阅读 · 0 评论 -
webstorm开发vue组件时,支持scss/less等预处理语言
vue组件支持预处理语言的关键点: <style rel="stylesheet/scss" lang="scss"> .mint-swipe { height: 300px; .mint-swipe-indicators { width: 98%; text-align: right; left: 0;原创 2017-01-10 14:45:25 · 6686 阅读 · 1 评论 -
ionic的布局样式row->col
row的子级,col均分宽度,如没有col,则可以设置具体宽度,剩下的col均分剩下的宽度<div class="bd wp-10 clfix row row-center row-no-padding ib_"> <div class="left text-center"> <div class="img-wrapper webkit-sassui-frame-wrapper"原创 2016-11-01 19:53:11 · 6001 阅读 · 2 评论 -
$ionicActionSheet 在Android手机上样式问题
$ionicActionSheet 在Android手机上样式问题 把以下代码复制到style.css中,以重写样式的方式解决/** * Action Sheets for Android * -------------------------------------------------- */.platform-android .action-sheet-backdrop {原创 2016-10-08 16:27:30 · 2698 阅读 · 1 评论 -
解决图片适应手机一屏,用百分比自适应
html<div class="content"> <div class="bg"></div></div>css.content { position: absolute; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; .bg { position: relative原创 2016-09-13 10:01:41 · 2034 阅读 · 1 评论 -
解决vue的变量在settimeout内部效果失效方法
1、定义一个self暂存this2、再改变变量的值,则生效啦 var self=this; this.toastrVal = inVal; this.loadState = true; this.noBg = bgState; setTimeout(function () { self.loadState原创 2016-09-09 16:35:57 · 15481 阅读 · 2 评论 -
zepto实现动画返回顶部的功能
zepto的animate()源码采用css3的方式进行,而scrollTop属性不在css3的动画属性中,所以没有生效(function (global) { $.fn.scrollTo = function (options) { var defaults = { toT: 0, //滚动目标位置 durTime: 500, //过渡动画时间原创 2016-09-09 10:09:39 · 4480 阅读 · 0 评论 -
display:inline-block的小注意
今天使用display:inline-block的时候,发现两个div不能在同一行显示,代码如下: 链接一 链接一 后来百度了一下发现,display:inline-block有个间距,在这里可在父级元素用font-size:0;去除间隙;同时在子元素上设置font-size转载 2016-07-18 14:10:41 · 346 阅读 · 0 评论 -
css垂直居中的方法
一.line-height1.概念:line-height是指文本行基线直接的距离,而不是字体的大小,它确定了将各个元素框的高度增加多少或减少多少。换句话说,line-height值和字体大小之差就是行间距,行间距平分成2部分,分别应用到内容区的顶部和底部,也叫半行距。2.line-height的值。初始值:normal继承性:有百分数:相对元素字体大小计算值:对于原创 2016-07-18 11:29:50 · 796 阅读 · 0 评论 -
css选择子项同类型的索引对象
.jdemo li:nth-child(2){background-color:red;}.jdemo li:nth-of-type(2){background-color:yellow;}我是文本第一条第二条.jdemo li:nth-child(2)选择的是第一条节点,而.jdemo li:nth-of-type(2)则选择的是第二条节点原创 2016-07-18 10:58:07 · 1028 阅读 · 0 评论 -
把div转换为table的td,横向排列,div等高
.leftHeight{width: 300px;border: solid 1px red; } .centerHeight{width: 200px;border: solid 1px blue; } .rightHeight{width: 500px; border: solid 1px black; } .leftHeight,.cen原创 2016-07-18 10:43:02 · 4721 阅读 · 0 评论 -
让谷歌浏览器的字体小于12px
谷歌浏览器的最小字体是12px,但wap移动端有可能要10px,但直接设置为font-size:10px,浏览器没有任何效果用CSS3的transform:scale()这个属性进行缩放!谷歌浏览器测试div{font-size:10px;-webkit-transform:scale(0.8);display:block;}原创 2016-07-14 13:56:05 · 588 阅读 · 0 评论 -
input修改disabled属性默认样式,适配IOS安卓
IOS默认设置透明度.3,需要修改.van-stepper__input[disabled] {color: #7d7e80;-webkit-text-fill-color: #7d7e80;-webkit-opacity: 1;opacity: 1; //默认的不透明级别为0.3background-color: #fff;}...原创 2019-01-27 11:37:39 · 842 阅读 · 0 评论