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

svg的坐标系统

svg的坐标系统 最近做一个流程图绘制项目,所以研究了一下svg。发现svg目前浏览器支持的挺强大的,但是svg本身有很多背景知识和元素属性以及js库等,如何系统地掌握这一强大工具呢? viewPort(视窗)和viewBox(视野) 这两个词的翻译还是比较好的!你站在屋子里通过窗户来看外面的世界。窗户的大小是固定的,比如是400*200

谈谈关于CSS中transform属性之scale

谈谈关于CSS中transform属性之scale 谈谈关于scale属性 scale是什么? 根据W3C定义 ,scale主要是进行缩放和转化: scale能做什么? 1.1px细线 CSS代码 . width: 200px; height: 50px; left: 0px; } @media screen and (-webkit-min-device-pixel-ratio:2){ . if(ratio1 ratio2){ $('.page1-wrap').css({ '-webkit-transform':'scale('+ratio2+')' }) } } 3.动画(参考animate.css) @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1,1,1); background: blue;

CSS三栏布局的四种方法

} //中间使用margin空出左右元素所占据的空间 . } 圣杯布局实际看起来是复杂的后期维护性也不是很高,在淘宝UED的探讨下,出来了一种新的布局方式就是双飞翼布局,代码如上。增加多一个div就可以不用相对布局了,只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。 4. 浮动 HTML代码如下: //注意元素次序 Left Right Main CSS代码如下: //CSS reset body,html { height:100%;

CSS样式的一些小总结

CSS样式的一些小总结 这是本人学习 css 两天的一些小总结和体会,如果有什么不足或错误的地方还请指教,纠错和探讨。 css 样式最令人头疼的地方就是一个属性有时候在这地方用可以,到另一个地方用却没效果了,或是冲突了。搞得头昏昏的,这时候得看文档 1.margin:0 auto; } 对于 快级元素 那么 嗨 你好 ! 点个赞 css: . margin-left: 50px; border: 1px solid #7e1a05; line-height: 22px;

css经典布局之左侧固定大小右侧自动适应

} /* 两列右侧自适应布局 */ .false:使用最小宽度。默认是使用最大宽度] * @type {Boolean} */ flag=true, /** * [maxWidth,minWidth 分别是左侧的最大和最小宽度] * @type {String} */ maxWidth="200px", minWidth="50px", //左侧按钮容器 btnContainer=doc.querySelector(".right-content"), /** * 切换宽度大小 * @param {String} width 左侧需要显示的宽度(带px) */ setToggleLayout=function(width){ leftContainer.style.width=width; setToggleLayout(flag ?

css实现水平居中和垂直居中的常见方式

} 例子3. 整个div 居中 Content here 让id为child的div 居中实现代码: #parent{display:table;IE8以下不支持。 IE8以下的浏览器可以使用 #child{ display:inline-block; } 例子4.针对div块级元素,可以使用下面的方法实现垂直居中 HTML: Content here css: #parent{ position:relative; } 设置父级position为relative;子元素postion为absolute;同时设置子元素的top为50%,水平也想居中的话,就设置left为50%

css常见布局

center{ background: #D6D6D6;right{ background: #EF4400; margin-right: 200px;流从上到下为:left-center-right。首先将container设置左右padding,在将left和right设置负margin值,使其刚好落在container的padding中。 无论是三栏布局还是两栏布局,以上方法都适用。 纯浮动布局 左右两栏分别向左右浮动,中间设置margin值,宽度自适应。 代码如下: 纯浮动 Header Left Right Center Footer body{padding:0;

js页面实时显示时间

var in_1 = document.getElementById('input'); function showTime(){ var date = new Date(); var week = date.getDay(); case 1: weekday = '星期一'; } var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); setTimeout(showTime,1000);

float与absolute脱离文档流的区别

float与absolute脱离文档firstdiv{ background-color:rgba(125,125,235,0.4); width: 200px; float: left;seconddiv{ background-color: #faf; width: 300px;这是第一个DIV 这是第二个DIV 根据chrome调试和红色边框,可以看到第二个div的背景和边框是占据了第一个DIV的空间的,但是第二个div的文本仍然为第一个DIV留出了位置。 对于使用absolute position脱离文档

[note]布局:列等高,水平垂直居中,固定页脚

[note]布局:列等高,水平垂直居中,固定页脚 等高列布局 两列/marginLeft html结构:.wrap .container { border-left-width: 200px; padding-bottom: 99999px; margin-left: -220px;table-row . display: inline-block;footer { position: absolute; } } http://codepen.io/zplus/pen/M... Sass mixin方法 @mixin center($width: null, $height: null) { position: absolute; } @else { height: $height;

CSS绘制各种图形的方法

CSS绘制各种图形的方法 CSS绘制各种图形的方法 Square(正方形) #square{ width:100px; } Rectangle(矩形) #rectangle { width: 200px; background: red; Circle(圆形) #circle { width: 100px; } / 可以使用百分比值(大于50%),但是低版本的Android不支持 / Oval(椭圆形) #oval { width: 200px; -webkit-border-radius: 100px / 50px; height: 0; border-bottom: 100px solid red; } Triangle Left(向左) #triangle-left { width: 0; border-right: 100px solid red;

css布局:块级元素垂直居中

css布局:块级元素垂直居中 test:调节浏览器宽度和高度,灰色元素始终水平垂直居中。直接上代码 定位居中 定宽:html: css: . background:#eee; height: 200px; bottom: 0; margin: auto; } 非定宽:html: hello world css: .} flex布局 html: css: html,body{ width: 100%; display: -webkit-flex; justify-content:center;container{ width: 400px;main { display: table-cell; vertical-align: middle;

14天入门JavaScript-day one

if(oDiv.style.display=='block') { oDiv.style.display='none';demo4 使用函数改变元素css属性值 function toGreen() { var oDiv=document.getElementById('div3');demo5 简单的对网页的换肤功能要在最前面的body中加入id="changebg" function changebgred(){ var oL=document.getElementById('changebg'); oL.style.background='green' } 红色 绿色 demo6 className的使用 #div5 { width: 100px; } function toBa(){ var oY=document.getElementById('div5') oY.className='box2';

带标签的长标题省略展示的实现

带标签的长标题省略展示的实现 移动端经常出现一种样式:左侧的标题+右侧的标签,标题不长时标签跟随标题,标题过长时让标题省略。 如下图所示: 实现很简单 html 结构看起来是这样的: 精 聚 宽板凳老灶火锅(簋街店) css 样式看起来是这样的: . height: 500px; background: #efefef;ellipsis { text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; margin-left: 10px;