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

css实现边框动画

css实现边框动画 1、css实现边框动画 效果如图: body,div{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 300px; height: 200px; padding: 20px; margin: 50px auto; color: #fff; background-color: #f60; } .border-box{ position: relative; width: 100%; height: 100%; padding: 20px; } .border-box::before

表格单元格内的两端对齐

表格单元格内的两端对齐 前端入坑纪 49 许久未更,最近做了个表格。碰到了两端对齐的坑(以前看到过,后来忘了。果然好记性不如烂笔头),今天来分享下~ 好,详解如下! OK,first things first! github项目地址 性冷淡表格 HTML 结构 姓名 休泽 职业 修业 就是这么简单的一个表格,这里的span是整个效果的灵魂,mark CSS 结构 table { width: 300px; height: 30px; display: inline-block;

Sass: @mixin vs placeholder vs @function

Sass: @mixin vs placeholder vs @function 学习 Sass 的时候总会发现这三个东西很像,因为他们都是用来统一代码来达到复用的目的的。这篇文章将用一个小例子来对比他们的不同之处。 例子 我们要做的就是两个一大一小的两个 div,一个宽高100px,另一个宽高 300px。 CSS 代码可以写成这样: .smallBox { width: 100px; margin: 10px;bigBox { @include box(300px, 300px);bigBox { @extend

手风琴效果 transition使用

手风琴效果 transition使用 手风琴效果 *{ margin: 0; } ul{ list-style: none; width: 960px; height: 300px; border: 1px solid seagreen; margin: 90px auto; overflow: hidden; } ul li{ float: left; width: 160px; /*添加动画效果*/ transition: all 0.3s; } /*所有的li都变小*/ ul:hover li{ width: 60px; } /*当前的li变大*/ ul li:hover{ width: 600px;动画前.png 动画后.png

【CSS】内圆角

【CSS】内圆角 184250-106.jpg 先上个图看看效果 image.png 紫色边框外面是直角,内部是圆角。要做出这个效果,首先要知道box-shadow 和 outline 的使用方法。box-shadow 和 outline 的使用方法在我的简书《CSS多重边框》里面有记录。http://www.jianshu.com/p/a6333147dff5 我做出这种效果有2个方法。 方法一: 用2个div嵌套实现。 HTML代码: CSS代码: . height: 300px;div { width: 280px; border-radius: 20px;

【CSS】多重边框

【CSS】多重边框 90507-106.jpg 要设置多重边框,最要用到的是box-shadow这个样式。 box-shadow 的作用是添加投影。 div { width: 300px; height: 300px; margin: 100px auto; border: 10px solid #036;好以上参数就行。box-shadow: 5px 5px 10px #888; } image.png 如果需要设置多重边框,可以用逗号分隔语法,这样就可以创建任意数量的投影了。box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf; outline-offset: -16px;

【CSS】八边形

【CSS】八边形 微信订阅号:rabbit_svip 做八边形效果,也是像【CSS】平行四边形 这个笔记里讲的那样,用transform属性,旋转内容。 微信订阅号:rabbit_svip HTML代码 CSS代码 figure { width: 300px; height: 300px; transform: rotate(45deg); overflow: hidden; } img { width: 300px;

被埋没的布局属性table和tabel-cell

被埋没的布局属性table和tabel-cell 学习iview这个ui框架的时候,很好奇下面这个组件是怎么实现的。 image.png 我们先来看一个简单的例子 Loremibus, culpa ipsum sunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione temporibus recusandae deleniti, voluptatem magnam accusamus quod animi eum debitis dicta rem, minus quas quo, itaque error, amet tenetur earum. Est!这里是减去300px和margin-right: 10px;

css圣杯布局和双飞翼布局

css圣杯布局和双飞翼布局 双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应。 圣杯布局 html结构 center left right css 先写出大概的样式 .article{ height: 300px;left{ width: 200px; height: 100px; background: blue; float: left; } 现在的布局是这样的 image.png 在.left中添加 margin-left: -100%; position: relative; overflow: hidden; margin-bottom: -9999px;

超经典面试题:用多种方法实现圣杯布局和双飞翼布局

container也设为100%;left和right定宽;middle宽度100%;让container下的div都向左浮动。 header,footer{ height:100px; } 最后的效果图 这种方法是兼容性最好的写法,然而代码略显复杂。 b.flex布局 dom结构:因为不用设置浮动了,container的三个子div按顺序排布就好。 header left middle right footer flex布局非常简单,只需在container中设置flex即可。 . grid-column:1/5;main{ margin:0 300px 0 200px;

浮动和清除浮动

浮动和清除浮动 timg.jpg 浮动的作用就是解决一行之间显示多个盒子,并且盒子的位置可控的一种布局方式,在介绍浮动之前,先说明标准流 标准流 它是浏览器子在解析html的标签的默认的一种与稳定,也叫文档流 一般情况下,所有的标签都是标准流,浏览器在解析的时候不会按其他方式来解析,而 浮动就是一种脱离标准流的技术 浮动 1.浮动脱离标准流 浮动 .

JavaScript之事件

button.onclick = function () { var demo = document.getElementById("demo") demo.style.width = "300px" demo.style.height = "450px" } var button2 = document.getElementById("btn2") button2.onclick = function () { var demo = document.getElementById("demo") demo.style.backgroundColor = "red" } 入口函数 window.onload = function () { 内放js } 当页面加载完毕以后(结构,样式加载完),执行这个函数里面的JS 部分 百度换肤 *{ padding: 0;

flex-grow、flex-shrink、flex-basis详解

flex-grow、flex-shrink、flex-basis详解 flex-grow、flex-shrink、flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的。 其中,这三个属性都是在子元素上设置的。 注:下面讲的父元素,指以flex布局的元素(display:flex)。 flex-basis 该属性来设置该元素的宽度。当然,width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis

零基础入门OpenGL系列教程(三、GLUT)

零基础入门OpenGL系列教程(三、GLUT) 上一篇讲述了如何在Xcode中搭建OpenGL开发环境,在这篇我会讲GLUT相关函数。 从上一篇的测试代码讲起 在上一篇中我们用如下的一段代码来测试OpenGL是否正常运行。 #include #include #include void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(0.5, 0.5); glFlush(); } int main(int argc, char ** argv) { glutInit( argc, argv); glutCreateWindow("test"); glutMainLoop();

<<CSS权威指南3>>=>实现元素底部不动但高度增加

= 实现元素底部不动但高度增加 读到第七章水平格式化,简述原文 水平格式化的七大属性是:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right,这七个属性加在一起的宽度必须是包含块的宽度。 上述七个属性中只有margin-left,margin-right,width,可以设置为auto 我顺势就联想到了left、right这些,垂直格式化的规则和上述一样。 1.实现元素底部不动但高度增加 .

js-dom操作

js-dom操作 DOM是文档对象化模型(Document Object Model)的简称。DOM Tree是指通过DOM将HTML页面进行解析,并生成的HTML tree树状结构和对应访问方法。 HTML DOM 模型被构造为对象的树 DOM-树 知识体系 思维导图 改变HTML内容 document.write(); element.innerHTML="New Header";attribute=new value document.getElementById("image").src="landscape.jpg"; height: 300px;function changeC() { document.getElementById("example").className = "b";

【CSS】翘边阴影

【CSS】翘边阴影 微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip 仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。 实现原理和【CSS】曲线阴影差不多,也是通过伪元素来实现。 HTML代码 CSS代码 ul,li { list-style:none; height: 210px; float: left; margin: 20px 10px; border: 2px solid #efefef; width: 290px; height: 200px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); transform: skewX(12deg) rotate(4deg);

CSS3创建响应式响应式页面

} } 从上面的代码可以看出,媒体类型是屏幕(screen),使用 一个** and** 连接后面的媒体功能,这里写的是** max-width:300px** ,也就是说,当屏幕的最大宽度 小于等于 300px 的时候,就应用花括号里面的样式。 2、当文档宽度大于等于300px 的时候显示的样式 @media screen and (**min**-width: 300px){ body { background-color:lightblue;

CSS 绘制特殊图形

CSS 绘制特殊图形 先来绘制一个简单基础容器 CSS 绘制特殊图形 div { width: 300px; margin: 30px 30px;div1 { width: 0;div2 { width: 0;div3 { width: 0;div4 { width: 0;div5 { width: 0; height: 10px;div6 { width: 20px;从上可以看出,通过控制容器边框和宽高,可以绘制出各种特殊图形。 接下来,我们来绘制各种圆形相关图形: image.png 圆形 /* 圆形 */ .div7 { width: 100px; height: 80px; border-bottom-left-radius: 50%;

js 根据鼠标拖动(或手机长按)旋转

var y1 = (beginPointY - bgCenterY); //计算cos =(x1x2+y1y2)/[√(x1+y1)*√(x2+y2)] var cos =( x1 * x2 + y1 * y2) /( Math.sqrt(Math.pow(x1, 2) + Math.pow(y1, 2)) * Math.sqrt(Math.pow(x2, 2) + Math.pow(y2, 2)) ); // 角度 var angle = 180 / (Math.PI / radina); 控件的需求是根据鼠标拖来旋转,所以用到了Vue-touch 控件的 pan 事件,然后控件的大小固定宽高300px, 完整的控制代码 panmove:function(event){ //得到 向量1 var x1 = (beginPointX - bgCenterX);