你的位置:首页 > 网页设计
CSS3动画属性:转换(transition)
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” ...
css3之transition详解
2017-06-29 00:00:59

css3之transition详解

transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。 ...
ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更方便的方法,尽请留言:html部分:<audio id=" ...
height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成height:auto就好了,百度过这个问题,却一直没有细看。今天又浮现了同样的问题,百 ...
JS 和 a href className JS编写顺序与运行顺序 字符串或变量嵌入中括号 代替 点号 代表属性
JS 和 a href 在href里面注意分号结尾, 引号闭合<a href="javascript:;">空链接</a><a href="javascript:alert('a');">弹出</a ...
object覆盖的div解决办法
2017-06-29 00:00:52

object覆盖的div解决办法

最近做个web项目,因为里面有个<object>的插件,弹出<div>对话框会被其遮盖,我做了个<iframe>标签,在弹框时,把<object>覆盖掉,再在iframe上放个<div>对话框。这是这个问题的解决思路。终 ...
移动端网页宽度值(未加meta viewport标签)
移动端网页宽度值(未加meta viewport标签):iphone:980pxGalaxy(盖乐世):980pxNexus:980pxblackberry(黑莓):980pxLG:980pxNokia:980pxkindle:1600pxipad:980pxiPad pro:1 ...
前端工程师必备的几个实用网站
一、配色类网站http://colorhunt.co这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了。https://webgradients.com/180种渐变 ...
字符声明
2017-06-29 00:00:46

字符声明

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

CSS3弹性盒布局

使用自适应的窗口弹性盒布局可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta htt ...
贝塞尔曲线与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
 if 函数的实现步骤:function +名字()指定id , 指定开关(display: none or block)if + else 构成逻辑 控制开关 决定在哪里安置一个灯泡, 指定一个id给某个标签把开关用电线连着灯泡, 安装开关 #+id名称{ 属 ...
底部固定,高度自动,跟随滚动条滚动
现在的样式,看起来简单,但里面深奥的东西太多,套路太多,还是自己不够聪明呀!!! <!DOCTYPE html><html><head> <title></title> <style type=&qu ...
小白学习css记录
2017-06-28 12:00:20

小白学习css记录

一、复习什么是CSS? 层叠样式表 -层叠样式只会被覆盖而不会被替代CSS的使用方式 style属性---> <h1 ></h1> sytle标签---> head标签里面 link---><link rel=&qu ...
CSS3,transform3D立体可拖拽正方体实现原理
---恢复内容开始---今天咱们来说一下,CSS中的3D效果.如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱们明天就说如何运用CSS来做轮播图,大家记得看哦!很好,话不多说,翠花'上代码': ...
html发展史简介(摘抄)
2017-06-28 12:00:13

html发展史简介(摘抄)

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

CSS3中的变形处理

变形分类缩放使用scale方法来实现文字或图像的缩放,在参数中指定缩放倍率。例如“scale(0.5)”,表示缩小50倾斜使用skew方法来实现文字或图像的缩放,在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度,若只有一个数值,则为水平方向的倾斜角度,单位为deg。注:rota ...
学习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动画功能
2017-06-28 00:01:29

CSS3动画功能

1.transition功能transition属性的使用方法:transition:property duration timing-function;其中property表示对哪个属性进行平滑过渡,duration表示多长时间完成属性值的平滑过渡,timing-functio ...
margin赋值为负值的几种效果(负值像素,负值百分数)
1、margin-top为负值像素margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <m ...
display:flex css
2017-06-28 00:01:23

display:flex css

本文介绍下flex的用法和属性这个一个自适应的3列盒子<div class="flex"> <div style="background-color:red;">红色</div> <div styl ...
html5 css选择器 井号, 句点的区别
一、理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1、选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响;2、属性(如实例中的font-family、color等),规定了布局的什么方面被设置了;3、值(如实例中的Arial, ...
grid栅格布局
2017-06-28 00:01:20

grid栅格布局

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

Angular的生命周期钩子

没有什么不能用一张图来解决。 ...
Form提交表单后页面刷新不跳转的实现
<form action="" id="" method="post" target="nm_iframe">   <input type="text" id ...
投票系统  js脚本简单刷票
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu ...
一起学Angular
2017-06-27 12:01:17

一起学Angular

最近想做一款跨平台(pc\app\pad)的东西玩玩,研究了许多技术:android、ios、H5、Bootrap、angular、angular2、ApiCloud、微信小程序除android、ios 本身的枷锁(系统)其它 的都 可以实现跨平台,尤其ApiCloud、微信小程 ...
CSS中的onmouseover和hover有什么区别
它们一样是因为:都是鼠标落上去的时候触发的。它们不一样是因为:onmousemove是javascript里面的,他可以触发js命令,但是hover做不到,hover只是css样式的类,只能定义样式。比如说鼠标落上去实现一个弹出窗口的操作,就要用onmousemove,用hove ...
css之盒子模型
2017-06-27 12:01:10

css之盒子模型

什么是盒子模型?  网页中的任何一个标签都相当于是一个盒子模型,而所有的盒子模型都存在五个必要的属性:width,height,padding,border,margin.那么在一个网页中如何计算一个盒子模型实际所占的宽度呢????  例如:<style>div {w ...
有间距的表格布局 table布局
1、先看有间距的布局效果:2、少说多做,直接看代码(代码中有注释) 1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset=&quo ...
html简介(自己理解和老师讲课)
首先讲开发网页三种技术:html,css,javascript。html负责网页的结构,css站在没学角度对网页进行美化,javascript负责网页交互,站在用户体验角度设计网页交互效果 而我们所学的html是一种超文本标记语言。何谓超文本?超文本就是指文本 ...
前端面试题1(html)
2017-06-27 00:01:17

前端面试题1(html)

HTML * Doctype作用?严格模式与混杂模式如何区分?它们有何意义?1.<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范2. 所谓的标准模 ...
10条必知的网页导航菜单设计原则
网站的导航菜单是用户阅读了网页后想进一步了解网站其它部分时最重要的指示,对留住用户至关重要。设计导航菜单的方法有许多,每个网站都必须有自己的导航菜单。想要设计出一个出色的导航菜单,设计师必须突破传统限制来展示自己的创意。网站的导航是决定这个网站可用性的主要因素之一,如果访问者可以 ...
表格布局
2017-06-27 00:00:24

表格布局

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

Angular2入门学习

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

移动端meta行大全

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

关于!DOCTYPE html

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

CSS Why

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

css的各种选择器

一、基本选择器1. * 通用元素选择器,匹配任何元素2. E 标签选择器,匹配所有使用E标签的元素3. .info class选择器,匹配所有class属性中包含info的元素4. #footer id选择器,匹配所有id属性等于footer的元素 二、多元素的组合选择器5. ...
html中的行内元素和块级元素小结
一.首先我们总结下行内元素和块级元素有哪些:行内元素:<a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗< ...
神奇的 conic
2017-06-26 12:00:12

神奇的 conic

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

css中的position(定位)

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

markdown基础

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

Web 前端代码规范

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

HTML5+CSS3静态页面项目

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

Swiper轮播图

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

一张图教会CSS3倒影

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

Vue 进阶教程之:详解 v

分享Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识。在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angula ...
Vue Admin
2017-06-26 00:00:10

Vue Admin

Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组件,其中还有丰富的图表组件,开箱即用。赶紧来体验一下吧。 ...
angular之$watch、$watchGroup、$watchCollection
1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}; 2,参数:watchExp(必须):{(function()|string)},可以字符串表达式,也可以带 ...
一名 40 岁“老”程序员的反思
英文:Ben Northrop 译文:开源中国 【导读】:Ben Northrop 在 2016 年满了 40 岁,本文是他对职业生涯的思考。他认为从长远来看,应该多投资一些不容易过期、衰竭期较长的知识领域中。 我是一名程序员,几个月前刚过完 40 岁生日。 ...
HTML5 之图片上传预处理
2017-06-25 00:00:13

HTML5 之图片上传预处理

在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量。像我这么为用户着想的程序员,绝对不会让这种事情发生的,于是就有了本文。获取图片通过 File API 获取图片。var inpu ...
Bootstrap概述
2017-06-24 12:00:19

Bootstrap概述

前面的话  Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。Bootstrap基于HTML5和CSS3,具有漂亮的设计、友好的学习曲线、卓越的兼容性,还有12列响应式栅格结构,丰富的组件等等。按照官网的宣传来说,Bootstra ...
Vuex2.0边学边记+两个小例子
最近在研究Vuex2.0,搞了好几天终于有点头绪了。首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解。废话少说,直接上干货。这是官网上的一个计数的实例。先来起个项目。第 ...
微信场景制作教程
2017-06-24 00:01:40

微信场景制作教程

微信是目前最流行的社交软件,每逢节假日,很多人都会在朋友圈分享自己的照片,有的人更是把照片做成了相册,图片的切换还伴随有音乐,这个就是微信场景。接下来就带领大家做一个微信场景。备注:通过本套教程的学习,能够学到触摸事件的使用,多点触摸技术,手势事件滑动方向判断的算法,CSS3动画 ...
如何垂直居中一个浮动元素
如何垂直居中一个浮动元素// 方法一:已知元素的高宽#div1{ width:200px; height:200px; position: absolute; ...
h5启动原生APP总结
2017-06-24 00:01:16

h5启动原生APP总结

许久没有写博客了,最近有个H5启动APP原生页面的需求,中间遇上一些坑,看了些网上的实现方案,特意来总结下一、需要判断客户端的平台以及是否在微信浏览器中访问1、客户端判断在启动APP时,Android和IOS系统处理的方式是不一样的,Android这边由于开放,可以在浏览器中通过 ...
文字溢出隐藏,隐藏的问字用省略号表示
之前在写页面的时候用的都是单行文字溢出隐藏,今天遇到了多行文字溢出隐藏,溢出部分用省略号。我通过查阅一些资料整理了一下,拿出来与大家分享一下。  单行文本的溢出隐藏  对于单行文本溢出 隐藏,text-overflow: ellipsis 就能完美的解决,不过在使用他时,一定要结 ...
第一页下一页12345678910下10页末页第1/209页,总共:12529条数据