大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

CSS Grid 初识

如果你并不想定义具体的数值,而是想每列的宽度按一行长度的占比来定义的话,可以使用Grid新引入的fr单位。fr是fraction(分数)的意思,也就是说你定义的就是分子,所有你定义的加起来就是分母。比如一整行是900px, 1fr 2fr就代表第一列占据1/3,第二列占据2/3。在我们的效果图中,可以看到4列平分了一行的宽度,因此我们可以这样定义: grid-template-columns: repeat(4, 1fr);

左右两侧宽度固定,中间自适应之【圣杯+双飞翼】实现

min-height: 100px; } body { margin: 0;middle { width: 100%;margin-left固定left和right位置 以上代码因为main的宽度是100%撑满了整个页面,后面浮动的掉到了下面,可以设置-margin-left把left和right位置重排。设置left的margin-left: -100%,left顶到了container左上,那么right移动到left原来的位置,再将right的margin-left设置为-本身宽度,left和right的位置就定位好了 JS Bin .container { padding: 0 220px 0 200px; position: relative;

终于找到一种有效的垂直居中方法

终于找到一种有效的垂直居中方法 今天终于发现了一种有效的垂直居中方法(块级元素里面的块级元素居中),写了个demo试了一下。不过此方法要求父级元素和自己元素都有定位,且自己元素要有明确的高宽。demo如下: Title #parent{ background: #EEEEEE; } #child{ background: #2e6da4; /*设置margin-top,margin-left分别为高,宽的 负 一半*/ margin-top: -150px; margin-left: -200px;

inline-block元素

inline-block元素 inline-block是什么鬼? inline是内联元素,不换行,不能设置宽和高。block是块元素,换行,可以设置宽和高。那么有没有既不换行,又能设置宽和高的呢?有,就是inline-block元素。举个例子 Document div{ width: 100%; height: 100px; text-align: center; } a{ color:#fff; display: inline; width: 200px; height: 60px; line-height: 30px; background: red;

css3旋转的盒子

css3旋转的盒子 工作中一直做普通的网页,今天浏览到一篇做3d旋转的盒子的效果,感觉挺好玩,于是跟着教程练了练,在此做个记录html 1 2 3 4 5 6 camera用来控制景深(perspective)box包裹立方体六个面face1-6是立方体的六个面css . perspective: 200px;face3 { background: #f1c40f; transform: translateX(-50%) translateY(50px) translateZ(50px) rotateY(-90deg); } @keyframes rotate{ 0%{ -webkit-transform:rotateY(0) rotateX(0);

CSS3中的box-flex属性

之后再设置其空间大小。 由上我们可以知道,该题的解答如下: .item{ -moz-box-flex:1; -webkit-box-flex:1; background-color:#fff;item:first-child{ -moz-box-flex:0; 是为了适应不同内核的浏览器,处于兼容性的考虑,应当三个都写上。

css3写的android logo

css3写的android logo android *{ margin: 0; padding: 0; } div.head{ margin-top: 100px; margin-left: 200px; width: 200px; height: 100px; background: greenyellow; border-top-left-radius: 100px; border-top-right-radius: 100px; position: relative; } div.head:after{ content:""; position: absolute; top: 50px; left: 50px; width: 20px; height: 20px; background: white; border-radius: 10px; } div.head:before{ content:""; position: absolute; top: 50px; right: 50px; width: 20px; height: 20px; backgr

Flexbox属性介绍

Flexbox属性介绍 介绍 flexbox是HTML5中提出的新的布局方式。使用时,需要将父子节点的display都设置为flex。每个参赛的效果可以参考这里 父节点属性 flex-direction 控制子界点的方向。一共有4个值: .container { justfy-content: flex-start; // default 默认模式,按照父节点的algin-item来显示 align-self: flex-start;container { width: 400px;item { width: 200px;item { flex-grow: [flex-grow] [flex-shrink] [flex-basis];

step by step:圆形loading进度条实现步骤详解

circle-right-mask, . border-radius: 50%;circle-right { clip: rect(0, 200px, auto, 100px);circle-left { /*设置左边的旋转*/ transform: rotate(0deg);circle-right { /*设置右边的旋转*/ transform: rotate(40deg);

box-shadow实现不同角度的投影

box-shadow实现不同角度的投影 先看看看box-shadow的参数说明: h-shadow 水平阴影的位置。允许负值。 v-shadow 垂直阴影的位置。允许负值。 blur 模糊距离 spread 阴影的尺寸 为了实现不同角度的投影,需要借助四个参数。核心原理是将模糊的距离加大,将阴影的尺寸减小 顶部投影 width: 100px; background: #f1f1f1; margin: 20px ; 右侧投影 width: 100px; box-shadow: #000 5px 0 5px -5px; margin: 200px ;

BFC与IFC概念理解+布局规则+形成方法+用处

block-formatting 怎样形成一个BFC? 块级格式化上下文由以下之一创建: 根元素或其它包含它的元素 浮动 (元素的 float 不是 none) 绝对定位的元素 (元素具有 position 为 absolute 或 fixed) 非块级元素具有 display: inline-block,table-cell, table-caption, flex, inline-flex 块级元素具有overflow ,且值不是 visible 整理到这儿,对于上面第4条产生了一个small small的疑问:为什么display: inline-block; float: left;

懒人必备的移动端定宽网页适配方案

} 如果你不希望你的页面被用户手动缩放,你还可以加上 user-scalable=no。不过需要注意的是,这个属性在部分安卓机型上是无效的哦。 其他参考资料 Supporting Different Screens in Web Apps - Android Developers Viewport target-densitydpi support is being deprecated 附录 - 测试页面 有兴趣的同学可以拿这个测试页面来测测自己的手机,别忘了改 viewport 哦。 Document body { margin: 0; } #fourth { width: 320px;

animation控制动画暂停/播放

animation控制动画暂停/播放 效果: animation控制动画暂停/播放 .height: 120px;} @-webkit-keyframes changebg{ 0{background-color: orange;control'), animateSelector = document.querySelector('. btnSelector.addEventListener('click', function() { if(this.textContent == '暂停动画') { this.textContent = '播放动画'; animateSelector.style.webkitAnimationPlayState = 'paused'; animateSelector.addEventListener('animationend', function() { console.log('动画结束');

可想实现一个自己的简单jQuery库?(七)

可想实现一个自己的简单jQuery库?(七) Lesson-6 这个版本完善hasClass和css 方法. i++) { if(typeof attr == 'string') { if (arguments.length == 1) { return getComputedStyle(this[0], null)[attr]; 如果是字符串,我们就按照css('width','100px')这样的方式处理 如果是对象css({"width":'100px','height':'200px'}) var _this = this[i];这里要着重说明下!className.match(reg)) arr.push(true); f.each(attr,function(attr,val) { _this.setAttribute('data-' + attr,val);