CSS3动画属性:转换(transition)

CSS3动画属性:转换(transition)

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” ...
css3之transition详解

css3之transition详解

transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。 ...
ios加载html5 audio标签用js无法自动播放

ios加载html5 audio标签用js无法自动播放

html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更方便的方法,尽请留言:html部分:<audio id=" ...
height:100%和height:auto的区别

height:100%和height:auto的区别

一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成height:auto就好了,百度过这个问题,却一直没有细看。今天又浮现了同样的问题,百 ...
JS 和 a href className JS编写顺序与运行顺序 字符串或变量嵌入中括号 代替 点号 代表属性

JS 和 a href className JS编写顺序与运行顺序 字符串或变量嵌入中括号 代替 点号 代表属性

JS 和 a href 在href里面注意分号结尾, 引号闭合<a href="javascript:;">空链接</a><a href="javascript:alert('a');">弹出</a ...
object覆盖的div解决办法

object覆盖的div解决办法

最近做个web项目,因为里面有个<object>的插件,弹出<div>对话框会被其遮盖,我做了个<iframe>标签,在弹框时,把<object>覆盖掉,再在iframe上放个<div>对话框。这是这个问题的解决思路。终 ...
移动端网页宽度值(未加meta viewport标签)

移动端网页宽度值(未加meta viewport标签)

移动端网页宽度值(未加meta viewport标签):iphone:980pxGalaxy(盖乐世):980pxNexus:980pxblackberry(黑莓):980pxLG:980pxNokia:980pxkindle:1600pxipad:980pxiPad pro:1 ...
前端工程师必备的几个实用网站

前端工程师必备的几个实用网站

一、配色类网站http://colorhunt.co这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了。https://webgradients.com/180种渐变 ...
字符声明

字符声明

<meta charset="utf-8">告诉浏览器要用utf-8来解释,同时,保存文档时,编码格式也要为utf-8格式。 ...
CSS3弹性盒布局

CSS3弹性盒布局

使用自适应的窗口弹性盒布局可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta htt ...
贝塞尔曲线与CSS3动画、SVG和canvas的应用

贝塞尔曲线与CSS3动画、SVG和canvas的应用

简介贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果。使用贝塞尔曲线常用的两个网址如下:缓动函数:http://www.xuanfengge.com/easeing/easeing/cubic-bezier:http: ...
移动端应该如何动态设置字体大小?

移动端应该如何动态设置字体大小?

rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不 ...
JS之 if语句函数 对接事件动作 函数更改css  css对接需要换妆的区id或class

JS之 if语句函数 对接事件动作 函数更改css css对接需要换妆的区id或class

 if 函数的实现步骤:function +名字()指定id , 指定开关(display: none or block)if + else 构成逻辑 控制开关 决定在哪里安置一个灯泡, 指定一个id给某个标签把开关用电线连着灯泡, 安装开关 #+id名称{ 属 ...
底部固定,高度自动,跟随滚动条滚动

底部固定,高度自动,跟随滚动条滚动

现在的样式,看起来简单,但里面深奥的东西太多,套路太多,还是自己不够聪明呀!!! <!DOCTYPE html><html><head> <title></title> <style type=&qu ...
小白学习css记录

小白学习css记录

一、复习什么是CSS? 层叠样式表 -层叠样式只会被覆盖而不会被替代CSS的使用方式 style属性---> <h1 ></h1> sytle标签---> head标签里面 link---><link rel=&qu ...
CSS3,transform3D立体可拖拽正方体实现原理

CSS3,transform3D立体可拖拽正方体实现原理

---恢复内容开始---今天咱们来说一下,CSS中的3D效果.如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱们明天就说如何运用CSS来做轮播图,大家记得看哦!很好,话不多说,翠花'上代码': ...
html发展史简介(摘抄)

html发展史简介(摘抄)

1993年,IETF,Internet工程任务组(Internet Engineering Task Force)的简写。IETF又叫互联网工程任务组,成立于1985年底,是全球互联网最具权威的技术标准化组织,主要任务是负责互联网相关技术规范的研发和制定,当前绝大多数国际互联网技 ...
CSS3中的变形处理

CSS3中的变形处理

变形分类缩放使用scale方法来实现文字或图像的缩放,在参数中指定缩放倍率。例如“scale(0.5)”,表示缩小50倾斜使用skew方法来实现文字或图像的缩放,在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度,若只有一个数值,则为水平方向的倾斜角度,单位为deg。注:rota ...
学习CSS制作菜单列表,举一反三

学习CSS制作菜单列表,举一反三

1、普通的二三级菜单<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8&q ...
行内元素转为块级元素的方法

行内元素转为块级元素的方法

以下汇总三种行内元素转为块级元素的方法:(1)display(2)float(3)position(absolute和fixed) 少说多做,运行以下代码看效果: 1 <!DOCTYPE html> 2 <html lang="zh"&g ...
CSS3动画功能

CSS3动画功能

1.transition功能transition属性的使用方法:transition:property duration timing-function;其中property表示对哪个属性进行平滑过渡,duration表示多长时间完成属性值的平滑过渡,timing-functio ...
margin赋值为负值的几种效果(负值像素,负值百分数)

margin赋值为负值的几种效果(负值像素,负值百分数)

1、margin-top为负值像素margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <m ...
display:flex css

display:flex css

本文介绍下flex的用法和属性这个一个自适应的3列盒子<div class="flex"> <div style="background-color:red;">红色</div> <div styl ...
html5 css选择器 井号, 句点的区别

html5 css选择器 井号, 句点的区别

一、理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1、选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响;2、属性(如实例中的font-family、color等),规定了布局的什么方面被设置了;3、值(如实例中的Arial, ...
grid栅格布局

grid栅格布局

前面的话  Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格。本文将详细介绍grid布局 引入  对于Web开发者来说,网页布局一直是个比较重要的问题。但实际上,在网页开发很长的一段时间当中,我们甚至没有一个比较 ...
Angular的生命周期钩子

Angular的生命周期钩子

没有什么不能用一张图来解决。 ...
Form提交表单后页面刷新不跳转的实现

Form提交表单后页面刷新不跳转的实现

<form action="" id="" method="post" target="nm_iframe">   <input type="text" id ...
投票系统  js脚本简单刷票

投票系统 js脚本简单刷票

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu ...
一起学Angular

一起学Angular

最近想做一款跨平台(pc\app\pad)的东西玩玩,研究了许多技术:android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程序除android、ios 本身的枷锁(系统)其它 的都 可以实现跨平台,尤其ApiCloud、微信小程 ...
CSS中的onmouseover和hover有什么区别

CSS中的onmouseover和hover有什么区别

它们一样是因为:都是鼠标落上去的时候触发的。它们不一样是因为:onmousemove是javascript里面的,他可以触发js命令,但是hover做不到,hover只是css样式的类,只能定义样式。比如说鼠标落上去实现一个弹出窗口的操作,就要用onmousemove,用hove ...
css之盒子模型

css之盒子模型

什么是盒子模型?  网页中的任何一个标签都相当于是一个盒子模型,而所有的盒子模型都存在五个必要的属性:width,height,padding,border,margin.那么在一个网页中如何计算一个盒子模型实际所占的宽度呢????  例如:<style>div {w ...
有间距的表格布局 table布局

有间距的表格布局 table布局

1、先看有间距的布局效果:2、少说多做,直接看代码(代码中有注释) 1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset=&quo ...
html简介(自己理解和老师讲课)

html简介(自己理解和老师讲课)

首先讲开发网页三种技术:html,css,javascript。html负责网页的结构,css站在没学角度对网页进行美化,javascript负责网页交互,站在用户体验角度设计网页交互效果 而我们所学的html是一种超文本标记语言。何谓超文本?超文本就是指文本 ...
前端面试题1(html)

前端面试题1(html)

HTML * Doctype作用?严格模式与混杂模式如何区分?它们有何意义?1.<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范2. 所谓的标准模 ...
10条必知的网页导航菜单设计原则

10条必知的网页导航菜单设计原则

网站的导航菜单是用户阅读了网页后想进一步了解网站其它部分时最重要的指示,对留住用户至关重要。设计导航菜单的方法有许多,每个网站都必须有自己的导航菜单。想要设计出一个出色的导航菜单,设计师必须突破传统限制来展示自己的创意。网站的导航是决定这个网站可用性的主要因素之一,如果访问者可以 ...
表格布局

表格布局

在实际开发中,我们通过菜鸟教程复制的表格往往不能满足我们的开发需求,样式很难看,而且不能自适应,尤其是需要到处Excel的样式,感觉非常糟糕,这次我就写了一个表单,不足之处,希望大神们多多指教;代码如下: 1 <!DOCTYPE html> 2 <html> ...
Angular2入门学习

Angular2入门学习

最近项目使用angular2,1和2版本变化大变样。下面总结一些学习网址及安装步骤。 中文官网(必看):https://angular.cn懒人学习:http://www.imooc.com/learn/789支持bootstrap UI组件https://github.co ...
移动端meta行大全

移动端meta行大全

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />  width: viewp ...
关于!DOCTYPE html

关于!DOCTYPE html

1.定义DOCTYPE标签是一种标准通用标记语言的文档类型声明,目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 2.作用声 ...
CSS Why

CSS Why

前面的话  在CSS学习目录中,已经详细地介绍了CSS如何使用。知其然,还要知其所以然。本文将介绍CSS各部分出现的原因,仅限个人理解,如有不妥,欢迎交流 Why CSS  早期的大多数网站标记几乎完全由表格和font元素组成,且对于所要表现的内容不能传达任何实际含义,使文档 ...
css的各种选择器

css的各种选择器

一、基本选择器1. * 通用元素选择器,匹配任何元素2. E 标签选择器,匹配所有使用E标签的元素3. .info class选择器,匹配所有class属性中包含info的元素4. #footer id选择器,匹配所有id属性等于footer的元素 二、多元素的组合选择器5. ...
html中的行内元素和块级元素小结

html中的行内元素和块级元素小结

一.首先我们总结下行内元素和块级元素有哪些:行内元素:<a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗< ...
神奇的 conic

神奇的 conic

感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟:linear-gradient : 线性渐变radial-gradient : ...
css中的position(定位)

css中的position(定位)

一、position语法与结构position语法: position : static absolute relative position参数:static :  无特殊定位,对象遵循HTML定位规则absolute :  将对象从文档流中拖出,使用left, ...
markdown基础

markdown基础

介绍:  markdown是一种可以使用普通文本编译器编写的标记语言,通过简单的标记语法,它可以使普通文本具有一定的格式。说的简单一点,markdown其实就是一种简单的文本,与普通的文本文件(txt文件)不同的是,支持一些特殊的符号,通过特殊的符号来表示不同的语义,并且给予不同 ...
Web 前端代码规范

Web 前端代码规范

Web 前端代码规范最后更新时间:2017-06-25原始文章链接:https://github.com/bxm0927/web-code-standards此项目用于记录规范的、高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范。目录前 ...
HTML5+CSS3静态页面项目

HTML5+CSS3静态页面项目

学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少。师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛。于是决定在这个假期里,主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习 ...
Swiper轮播图

Swiper轮播图

今天咱们来说一下.Swiper轮播图.超级简单的:翠花,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&qu ...
一张图教会CSS3倒影

一张图教会CSS3倒影

分享示例图片在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了。这就是今天所要提到的box-reflect属性。咱们先看看W3C给出的box-reflect语法:b ...
Vue 进阶教程之:详解 v

Vue 进阶教程之:详解 v

分享Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识。在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angula ...
第一页   上一页   下一页   末页
1/251页   共: 12529
网页设计1网页设计2网页设计3网页设计4网页设计5网页设计6网页设计7网页设计8网页设计9网页设计10网页设计11网页设计12网页设计13网页设计14网页设计15网页设计16网页设计17网页设计18网页设计19网页设计20网页设计21网页设计22网页设计23网页设计24网页设计25网页设计26网页设计27网页设计28网页设计29网页设计30网页设计31网页设计32网页设计33网页设计34网页设计35网页设计36网页设计37网页设计38网页设计39网页设计40网页设计41网页设计42网页设计43网页设计44网页设计45网页设计46网页设计47网页设计48网页设计49网页设计50网页设计51网页设计52网页设计53网页设计54网页设计55网页设计56网页设计57网页设计58网页设计59网页设计60网页设计61网页设计62网页设计63网页设计64网页设计65网页设计66网页设计67网页设计68网页设计69网页设计70网页设计71网页设计72网页设计73网页设计74网页设计75网页设计76网页设计77网页设计78网页设计79网页设计80网页设计81网页设计82网页设计83网页设计84网页设计85网页设计86网页设计87网页设计88网页设计89网页设计90网页设计91网页设计92网页设计93网页设计94网页设计95网页设计96网页设计97网页设计98网页设计99网页设计100网页设计101网页设计102网页设计103网页设计104网页设计105网页设计106网页设计107网页设计108网页设计109网页设计110网页设计111网页设计112网页设计113网页设计114网页设计115网页设计116网页设计117网页设计118网页设计119网页设计120网页设计121网页设计122网页设计123网页设计124网页设计125网页设计126网页设计127网页设计128网页设计129网页设计130网页设计131网页设计132网页设计133网页设计134网页设计135网页设计136网页设计137网页设计138网页设计139网页设计140网页设计141网页设计142网页设计143网页设计144网页设计145网页设计146网页设计147网页设计148网页设计149网页设计150网页设计151网页设计152网页设计153网页设计154网页设计155网页设计156网页设计157网页设计158网页设计159网页设计160网页设计161网页设计162网页设计163网页设计164网页设计165网页设计166网页设计167网页设计168网页设计169网页设计170网页设计171网页设计172网页设计173网页设计174网页设计175网页设计176网页设计177网页设计178网页设计179网页设计180网页设计181网页设计182网页设计183网页设计184网页设计185网页设计186网页设计187网页设计188网页设计189网页设计190网页设计191网页设计192网页设计193网页设计194网页设计195网页设计196网页设计197网页设计198网页设计199网页设计200网页设计201网页设计202网页设计203网页设计204网页设计205网页设计206网页设计207网页设计208网页设计209网页设计210网页设计211网页设计212网页设计213网页设计214网页设计215网页设计216网页设计217网页设计218网页设计219网页设计220网页设计221网页设计222网页设计223网页设计224网页设计225网页设计226网页设计227网页设计228网页设计229网页设计230网页设计231网页设计232网页设计233网页设计234网页设计235网页设计236网页设计237网页设计238网页设计239网页设计240网页设计241网页设计242网页设计243网页设计244网页设计245网页设计246网页设计247网页设计248网页设计249网页设计250网页设计251