码迷,mamicode.com
首页 >  
搜索关键字:前端入门    ( 189个结果
web前端入门到实战:css3动画 Transition
CSStransitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用CSStransitions后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。CSStransitions可以决定哪些属性发生动画效果(明确地列出这些属性),何时开
分类:Web程序   时间:2019-12-21 22:48:47    阅读次数:118
web前端入门到实战:css3实现半圆和圆效果
在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率。无论圆角、圆弧、实心圆、半圆,css3的实现代码都是border-radius属性,border-radius不但可以定义圆半径和圆角大小,还可以画出各种方向的半圆。代码<!DOCTYPEhtml><h
分类:Web程序   时间:2019-12-21 22:39:59    阅读次数:127
web前端入门到实战:@import和link引入样式的区别
关于@import和link引入样式的区别网上有很多种说法。大致有如下几种,不过这其中会有我存疑的地方,我们可以一起来探讨一下。区别1.从属关系区别@import是CSS提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS、rel连接属性等。2.加载顺序区别加载页面时,link标签引入的CSS被同时加载;@import引入的CSS将在页面加载
分类:Web程序   时间:2019-12-19 23:44:12    阅读次数:178
web前端入门到实战:CSS box-sizing属性的正确用法
CSS自定义属性(变量)CSSbox-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。没有CSSbox-sizing属性默认情况下,元素的宽度和高度计算如下:width+padding+border=元素的实际宽度height+padding+border=元素的实际高度这意味着:当您设置元素的宽度/高度时,元素通常看起来比您设置的大(因为元素的边框和填充被添加到元素的指定宽度/高度
分类:Web程序   时间:2019-12-19 23:37:14    阅读次数:130
web前端入门到实战:HTML5实现首页动态视频背景
你想实现动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景;首先网上找一段清晰的视频下载下来,最好是MP4格式的;下载好了之后我们新建一个html文件来写代码:html代码:<videoid="v1"autoplayloopmuted><sourcesrc="./video2.mp4"type="video/mp4"/></video>
分类:Web程序   时间:2019-12-19 23:29:58    阅读次数:119
web前端入门到实战:纯CSS瀑布流与JS瀑布流
瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。为什么使用瀑布流瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个APP至上的时代,瀑布
分类:Web程序   时间:2019-12-19 23:18:16    阅读次数:134
web前端入门到实战:布局之display属性
在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型,比如说从行内级盒子变成块级盒子。那在这一章节中,我们就来一起探讨CSS的display属性,该属性也是学习CSS不可或缺的属性之一。display的基本介绍CSS的display属性在W3C规范中是一个独立的模块,
分类:Web程序   时间:2019-12-19 22:53:48    阅读次数:175
web前端入门到实战:几种HTML标签伪元素绑定事件的方式
下面整理出几种简便方式实现click伪元素时进行事件处理,附上例子代码。HTML结构首先HTML结构是这样的<section><span>按钮文字</span></section>实现方法第一种通过CSS3的pointer-events特性来实现。CSS代码<style>*{margin:0;padding:0;}section{bord
分类:Web程序   时间:2019-12-16 22:33:17    阅读次数:125
前端入门
diaHTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题) 网页文件的扩展名:.html或.htm(没有区别) ...
分类:其他好文   时间:2019-12-02 18:49:43    阅读次数:115
web前端入门到实战:css之background-position属性实现雪碧图
什么是雪碧图雪碧图就是CSSSprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分。为什么要用雪碧图可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象。用雪碧图有什么弊端个人认为如果你的雪碧图不是很大,也不是很复杂基本没什么弊端。如果你的雪
分类:Web程序   时间:2019-11-19 09:21:25    阅读次数:92
189条   上一页 1 ... 6 7 8 9 10 ... 19 下一页
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!