你的位置:首页 > 网页设计
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 就能完美的解决,不过在使用他时,一定要结 ...
2017年前端框架、类库、工具大比拼
相比于JavaScript开发人员的数量,目前JavaScript框架、类库和工具的数量似乎更多一些。截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目。npmjs.org有50万个可用的软件包,每月下载量近100亿次。本文将会讨论目前最为 ...
h5之scrollIntoView控制页面元素滚动
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器 ...
html快速编写
2017-06-23 12:00:17

html快速编写

1. 嵌套操作---------- 子操作: > div>ul>li <div> <ul> <li></li> </ul></div> 并列:+ div+ul>li < ...
每天一个JS 小demo之通过键盘方向键操作图片上下左右无缝切换。主要知识点:事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title>&l ...
css3在页面中插入内容
2017-06-23 00:00:57

css3在页面中插入内容

A. 使用选择器来插入内容h2:before{  content:"前缀";}h2:after{  content:"后缀";}B. 指定个别的元素不进行插入h2.sample:before{  content:none;}2. 插 ...
CSS动画属性性能详细介绍
CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recompositePaint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用 webkit-transform: translateX( ...
meta name id class 标签的区别
metahttps://zhidao.baidu.com/question/2052283721385566387.html name 跟 id 的区别http://blog.csdn.net/frankzcy/article/details/5570265 ...
vue全家桶(Vue+Vue
2017-06-23 00:00:21

vue全家桶(Vue+Vue

Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题。一、Vue  系列一已经用vue-cli搭建了Vue项目,此处就不赘述了。二、Vue-router  Vue的路由,先献上文档(https://router.vuejs.org/zh-cn/)。  路由在全家桶里面定 ...
纯CSS3美化单选按钮radio
2017-06-23 00:00:20

纯CSS3美化单选按钮radio

这种纯CSS3美化单选按钮radio的方法适用于以下情况:1、可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉2、只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出来,但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库3、不需要JS ...
react与vue
2017-06-23 00:00:18

react与vue

vue的选择居于react与angular之间,框架自身的语法比react多一点,但是又比angular少一点。也正是由于选择的不同,所呈现出来的写法与思考方式就一定会有所差异,不论优劣,但肯定会导致不同的偏好。react的简单在于,它的核心API其实非常少。所以我们会看到很多地 ...
高德地图和canvas画图结合应用的一些感想(一)
之前朋友委托有个创业项目,想让我帮忙,正好那段时间有点闲,半推半就中就答应下来了。  入了团队才发现,该项目前后端分离,后端工程师已就位主要实现接口,IOS端工程师也已就位,还差一个web前端工程师。背脊一凉,我之前虽然写过一些js和css,虽有点功底但是离前端工程师还是有距离的 ...
HTML5 History 模式
2017-06-23 00:00:15

HTML5 History 模式

最近看到vue-router的HTML5 History 模式路由的实现,然后顺便又去研究了一下HTML5 的 History,以下是自己的一些理解,顺便用jquery写 一个实现类似vue-router里面HTML5 History 模式路由器,以达到练练手,熟悉熟悉的目的。一 ...
须知的css——margin不重叠的情形
margin重叠摘自css2.1规范中文版CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin。Margin按这种方式结合叫重叠(collapse),产生的结合的margin叫做重叠margin。margin重叠的计算规则摘自css2.1规 ...
网页加载加速 之 图片延迟加载
大家还在为网页加载速度而烦恼吗?大家有发现网页在某些浏览器很快,而在某些浏览器却很慢吗?今天向大家介绍一下为何会出现这些情况,并给大家分享一下具体的实现方法1.先向大家讲解一下为何需要图片延迟加载大家知道图片的常见格式吧,图片就是一个把一点一点像素组合在一起的一组像素,图片它像素 ...
CSS中margin和padding的区别
2017-06-22 00:00:16

CSS中margin和padding的区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。 下面讲解 padding和margin常用的用法 一、padding 1、语法结构(1)paddi ...
关于模板引擎一
2017-06-22 00:00:14

关于模板引擎一

前端模板引擎需要有开发时的透明性透明性即指我在搭建好开发环境后,随手写代码随手刷新浏览器就能看到最新的效果,而不需要额外地执行任何命令或有任何的等待过程。所以一切依赖编译过程的模板引擎并不适合前端使用,编译只能是模板引擎的一个特性,而不能是使用的前提更严格地说,使用FileWat ...
html基础概念
2017-06-22 00:00:10

html基础概念

一、HyperText Markup Language 内容,html是弱代码语言,代码编写不严谨1、超链接 <a href="#">超级链接(anchor)</a> 写超链接的href地 ...
canvas学习总结三:绘制虚线
上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setLineDash();下面我们就来看看虚线的绘制方法 语法ctx.setLin ...
px、em、pt之间的区别与互相转换
关于px、pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之。点击查看原文(原网址已失效,这是其他站点)这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网 ...
Bootstrap排版
2017-06-22 00:00:02

Bootstrap排版

前面的话  本文将详细介绍Bootstrap中排版相关的内容 标题【h】  HTML 中的所有标题标签,<h1> 到 <h6> 均可使用  默认情况下,从h1到h6的font-size如下所示2em -> 1.5em -> 1. ...
Vue实战Vue
2017-06-22 00:00:02

Vue实战Vue

用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起——vue-cli.由于是Vue+webpack这里就不赘述git那些东西,默认环境都配置好了。第一步先建立一个文件夹我这里是apronew;第二步在文件夹里面 ...
每天一个JS 小demo之滑屏幻灯片。主要知识点:event
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title>&l ...
Vue按需加载提升用户体验
Vue官方文档异步组件:在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。原图文来自htt ...
前端实现连连看小游戏(1)
博主玩了这么久的连连看,居然是第一次发现,连连看最多只能有2个转弯。orz…在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,画了下面的图(图有点丑……) 一. 2个物体在同一直线上,可以直接连通 (这个不需要解释啦) 二.2个物体在同一直线上,中间有 ...
Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?
题目点评三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单答题要点1.采用的是均分原理 盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部2.代码的实现第一步 保证元 ...
Web前端面试指导(十九):CSS样式
题目点评本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的。答题思路可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法 ...
css3+javascript实现翻页幻灯片
先上效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type=&qu ...
CSS学习笔记06 简单理解line
在制作页面的时候,经常会遇到文本图片需要居中的情况,这时候,只要设置下文本的line-height属性等于包裹该文本的元素的高度即可让文本居中显示了,先来看看这个现象。 1 <!DOCTYPE html> 2 <html lang="en"& ...
CSS学习笔记07 盒子模型
2017-06-21 00:00:28

CSS学习笔记07 盒子模型

1、盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。用公式表示就是:盒子=边框+内边距+内容区域+外边距元素框的最内部分是实际的内容, ...
本地存储  web storage
2017-06-21 00:00:28

本地存储 web storage

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> < ...
文字溢出隐藏后添加省略号
当我们想让文字溢出后隐藏并添加省略号的效果在当前容器或父容器必须要设置宽度,否则代码会失效。 .box{ width:50%; text-overflow :ellipsis;/* 文字隐藏后添加省略号 */ white-space : nowrap; ...
jQuery.validate 的form校验
2017-06-21 00:00:22

jQuery.validate 的form校验

jQuery验证框架 :基本html代码: 1   <script src="js/jquery-1.9.1.js"></script> 2 <script src="js/jquery.validate.min ...
一篇文章带你快速入门createjs
开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看。 createjs简介官网:http://www.createjs.cc/createjs中包含以下四个部分:EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 ...
网页打印样式CSS
2017-06-20 12:00:19

网页打印样式CSS

相信大多数的前端工程师都是处理显示屏上面的设计,用到最多的计量单位就是px,但是有些时候,我们难免也会有打印的需求,比如一个电商平台的“物流配送打印单”,“打印订单”等等可能都是需要从网友上打印出来的,这个时候如果还是按照自己以前写网页的思路写打印单页面,最后打印出来的效果会不是 ...
新鲜出炉,可能做的还不够好,但对你们有帮助就行!
专注前端开发者的视频直播分享平台——码易极客6月份直播/回放推荐收看:【精彩回放】晴明老师教你用React Native清空购物车(上)https://www.mayigeek.com/mayi-edu-web/user/html/live.html?id=62&stat ...
圆弧和扇形的加载动画
2017-06-20 12:00:11

圆弧和扇形的加载动画

0.静态效果图1.画弧度的代码width: 3em;height: 3em;border: 7px transparent solid;border-left: 7px #4DB6AC solid;border-radius: 50%;  * 这里还有另一个方式border-le ...
CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit
伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器 只作用于html等底部标签.很少用 . ...
总结CSS3中定位模型之position属性的使用方法
一、position元素介绍position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素、另一元素和浏览器窗口等的位置。position属性包含有5个属性值,分别为static、relative、absolute、fix ...
Html5 锚 a的页内跳转, name=abc herf=#abc
锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。 ...
HTML5盒子模型。
2017-06-20 00:00:27

HTML5盒子模型。

盒子模型。盒子由 margin、border、padding、content 四部分组成。margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content:内容<!DOCTYPE html><html> ...
前端基础进阶变量对象详解
开年之后工作热情一直不是很高,这几天一直处于消极怠工状态。早上不想起床,起床了不想上班。明明放假之前工作热情还一直很高,一直心心念念的想把小程序项目怼出来,结果休假回来之后画风完全不一样了。我感觉自己得了严重了节后综合征。还好撸了几篇文章,勉强表示这一周的时间没有完全浪费。这篇文 ...
将数据库从服务器移到浏览器
数据库是属于服务器的,这是天经地义的事,但是有时候数据也许并非需要存储在服务器,但是这些数据也是一条一条的记录,怎么办?今天来带领你领略一下H5的一个新特性--indexedDB的风骚。你会情不自禁的发出感叹--不可思议!一、链接数据库  indexedDB没有创建数据库的概念, ...
模态框中水平垂直居的问题
大家好,今天我们来说一下在写模态框的时候怎么使里面的内容垂直水平居中,我们先把目光放得简单一点,  这个问题其实就等同于怎么让一个div垂直水平居中,那我们怎么来实现这个问题呢?有5种解决办法。  首先,第一种情况,我们知道div1宽高的情况下:  <div id=&quo ...
html开发那些不好的习惯,和问题。
最近网上看了好多html开发中那些问题和不好的习惯,顺手总结一下。一、上下间距  在开发中你会发现你明明设置的两个p标签上下间距为20px但你实际测量中会发现他会多4~8px,这是为什么呢!如果你是老司机我想我就不用多说了,  因为设计稿中量的都是字与字上下的间距,其实你写p标签 ...
原生js二级联动
2017-06-20 00:00:19

原生js二级联动

今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果。 1 //创建两个下拉列表 select标签 是下拉列表 2 var sel = document.createElement("select"); 3 var ...
医药箱APP静态小项目
2017-06-20 00:00:14

医药箱APP静态小项目

花费了10天时间,纯手写一个医药箱APP静态小项目,里面有上拉加载、左右滑动、弹出层淡入淡出等效果,主要是练习。以下是一部分页面效果图:我用的是谷歌的开发者工具的手机端模拟器。 大家有兴趣可到我博客的文件项里下载。里面需要优化的地方还有很多,欢迎指正! ...
响应式布局实现的几种方法 — 弹性布局
响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力。就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局。  弹性布局是一种十分方便的,只需要依赖于CSS样式的实现响应式布局的方式,也是K最 ...
移动端的一些头部标签
2017-06-19 12:00:11

移动端的一些头部标签

1.meta标签http-equiv属性语法格式:   <meta http-equiv="expires" content="wed,20 Jun 2007 22:33:00 GMT"/> <!--expires 期 ...
时间轴效果解析
2017-06-19 12:00:16

时间轴效果解析

虽然时间轴早已不是什么新鲜事物了,个人只是感兴趣所以就研究一下,最近从网上搜索了一个个人感觉比较好的时间轴demo,下载下来研究了一下并做了下修改.具体的效果如下图:(该demo实现的是滚动加载图片)代码地址:http://files.cnblogs.com/files/cby- ...
Css选择器(上) 让样式无孔不入
css选择器 一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器*{ } 就是一个简单的*, 代表应用于全部. 不适合于个性化细致化处理的页面, 副作用是它 ...
!DOCTYPE 标签是什么
2017-06-19 12:00:11

!DOCTYPE 标签是什么

DOCTYPE 标签,是html文档的类型声明(document type declaration,所谓声明,也就是宣称我他妈是谁),用来告诉浏览器,使用什么样的文档类型定义(Document Type Definition, DTD,是对文档概括性描述,什么个结构啊,有哪些有效 ...
html5 区块与内联div 与span html块级元素
HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来。 HTML 块元素 大多数 HTML 元素被定义为块级元素或 ...
浏览器内核 网址分解 web服务器
浏览器最核心的部分是渲染引擎(Rendering Engine),我们一般习惯称之为“浏览器内核”,其负责解析网页语法(如标准通用标记语言的子集HTML、JavaScript)并渲染、展示网页。因此,所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示 ...
HTML表单相关
2017-06-19 00:00:23

HTML表单相关

表单:<input type="text" name="" value="" size="显示字符数" maxlength="最多字符数" readonly="re ...
前端的鼠标滑过图片闪光CSS3效果怎么做?
两三年前鸡哥还是个学生的时候做了本站的前端页面,其实现在这个站有很多前身,有机会发个帖子给大家看看鸡哥以前的年少无知不懂事的杀马特作品...好了,今天聊聊怎么做鼠标滑过图片的时候有反光闪光的效果,这个效果还是在逛京东的时候无意间发现的,大家看看下边的成品演示:不然说了半天还不知道 ...
第一页下一页12345678910下10页末页第1/208页,总共:12474条数据