-
前端必备神器,markdown使用
马克飞象使用方法,程序员编程笔记工具
珠峰培训
2019-04-27
-
HTML的前世今生
html是超文本标记语言
珠峰培训
2019-04-23
-
HTML5基础知识及兼容处理
HTML5基础概述HTML:超文本标记语言(页面中不仅只有文字,而且可以呈现出图片、音视频等媒体资源)XHTML:它是HTML比较规范严谨的一代版本XML:可扩展的标记语言(HTML中使用的标签都是W3C标准中规定的,XML允许我们自己扩展标签的),它的作用不是用来写页面结构的,而是用来存储一些数据的(以自己扩展的标签作为标识,清晰明了的展示出数据的结构
珠峰培训
2019-01-11
-
移动端响应式布局开发常用知识
移动端响应式布局开发常用知识
珠峰培训
2017-12-10
-
HTML5基础知识及兼容处理
HTML5基础知识及兼容处理
珠峰培训
2017-12-10
-
聊聊移动端的REM适配问题
详聊移动端rem的适配问题现在移动端对于前端行业来说特别流行,废话不多说,那我们就来聊聊移动端的哪些事?写移动端必须在html页面head标签内加一个meta标签—viewport视口 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1
珠峰培训
2017-08-22
-
如何编写一个轻量级的CSS框架
如何编写轻量级 CSS 框架目前市场轻量级框架如雨后春笋,层出不穷。我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。现在仍然有很多人对于前端框架的认识还停留在表面,认为 Bootstrap 是后端人员专用,前端没必要等等。我不知道这种说法从何而来,我最开始也不喜欢使用框架,或许和很多人的想法一样,畏惧新知
珠峰培训
2017-08-19
-
canvas 图片动画绘制
canvas 图片动画绘制绘制简单图像 语法: CanvasRenderingContext2D.drawImage( img, dx, dy ) 描述: 使用三个参数, 允许在画布上的 任意位置 绘制图片. 参数 img 是指图片对象. 可以是 img 标签, 或者是 video 标签, 已经另一个 canvas 等. 需要注意的是如果直接添加 img 对象是不可以的,
珠峰培训
2017-08-13
-
CSS背景与边框(二)
6.复杂的背景图案背景知识:css渐变, “条纹背景”6.1 网格把多个渐变图案组合起来,让它们透过彼此的透明区域显现时,就会得到意想不到的图案。background: white;background-image: linear-gradient(90deg, rgba(200,0,0,.5), 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, tra
珠峰培训
2017-07-02
-
CSS背景与边框(一)
背景与边框1.半透明边框背景知识:rgba/hsla,在rgb/hsl的基础上增加了Alpha通道,用于设置颜色的不透明度(就是能透过多少背景) rgba接受四个数值,即rgba(red, green, blue,a),rgb可以为数值(0 ~ 255),也可以为百分比(0 ~ 100%),a表示不透明度(0~1),1为完全不透明,0表示完全透明。 rgba(0,255,0,1) 表示纯绿色,完全不透
珠峰培训
2017-06-27
-
HTML5实现图片上传与预览
File API File - 独立文件;提供只读信息,例如名称、文件大小、mimetype 和对文件句柄的引用。 FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或文件)。 Blob - 可将文件分割为字节范围。 FileReader - 读取File或Blob URL scheme检测浏览器是否支持// 检测是否支持File APIif (window.Fil
珠峰培训
2017-06-16
-
深入理解CSS3 Flexbox
一、前言Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS3 的规范终于普及 ( 或 IE 终于败亡 ),加上行动装置的发展促成了响应式布局兴起,自适应长宽弹性相当大的 Flexbox 就趁势而起了。第一步要来看 Flexbox 的盒子模型,根据 W3C
珠峰培训
2017-06-01
-
Css: background-position属性
在 CSS 中提供的 background-position 用来设置背景图片的最初的位置。既然需要设置位置,肯定需要根据页面中的坐标确定,而这个坐标原点的确定是有background-origin 来设置的。background-origin 有:padding-box、border-box、content-box,三个取值,为了比较清晰的说清楚,来看下面的一个图就知道了:background-position在没有指定
珠峰培训
2017-05-18
-
利用CSS实现无js的tab切换
tab页面的切换原理是利用display属性来操作的,利用这一点,我们就可以利用input中的单选按钮来实现这个功能。我们让与input对应的label来作为tab的导航。<input type="radio" id="tab1" name="parent-type"><label for="tab1" class="labe">tab1</la
珠峰培训
2017-04-27
-
浅谈CSS优先级
了解一下CSS优先级浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。最近在写一些小demo,过程中遇见由于不太熟悉CSS优先级问题而造成的麻烦,所以特地了解和学习了相关的知识,为了避免遗忘,也有助于将来复习,所以记在博客里。什么是CSS权重优先级
珠峰培训
2017-04-14
-
前端性能优化小总结
1.想深层次探究前端优化,就不仅仅停留到表面,要知道文件如何下载?浏览器如何渲染?想优化页面,就要知道一个页面,产生的整个过程 浏览器产生一个页面的流程如下:1.1下载:最有优化点的一部下载,这个方向是优化必要点,贴一张chrome下载文件的时间截图://来个表格,细致分析下下载过程中每个阶段的耗时 1.持续时间 = 时间 *个数 2.时
珠峰培训
2017-04-11
-
常用的几种HTML5体验改进方法
常用HTML5体验改进方法1. fake 页 - 首屏加速因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 秒,所以我们必须保证移动端页面有足够的速度。方案: 避免页面长时间白页,页面渲染只需要完整的 HTML 以及 CSS 加载结束后页面第一屏便渲染结束,然后再异步加载js 静态资源不使用 cookie
珠峰培训
2017-03-21
-
HTML5新增标签概括
HTML5新增标签 标签名 标签属性 article 定义文章 aside 定义页面内容之外的内容 audio 定义声音内容
珠峰培训
2017-03-19
-
CSS3实现居中的各种方式
本篇整理了CSS3实现居中(水平居中、垂直居中、水平垂直居中)的几种解决方案水平居中:行内元素解决方案思路: 把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:text-align: center适用元素:文字,链接,及其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex)//父元素display:b
珠峰培训
2017-03-03
-
初学CSS3应该掌握哪些基础知识2
初学CSS3应该掌握哪些基础知识-2 初学CSS3应该掌握哪些基础知识-2 css3中新增字体 边框 边框圆角 边框阴影 背景 渐变 转换 2D 转换
珠峰培训
2017-02-26
-
初学CSS3应该掌握哪些基础知识
初学CSS3应该掌握哪些基础知识 初学CSS3应该掌握哪些基础知识 CSS3简介 CSS现状 怎样应用 引用前的准备 同一环境 如何使用手册 具体学习那些知识点 CSS3选择器
珠峰培训
2017-02-25
-
CSS常见问题及解决方案
calc()css 数学运算弹性盒模型display: flex 新display: box 旧元素上下居中 css3: 弹性盒模型 css3: translate .element{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}模拟 table.elementParentParent { display: table
珠峰培训
2017-02-18
-
css3 3D转换 transform
CSS3 允许您使用 3D 转换来对元素进行格式化那么下面我们一起看一下2D和3D有什么不同: [请用鼠标放到下面两个盒子上,查看效果] /* .dd{ width:200px; height:200px; display:inline-block; border:1px solid yellow; background:red; } div-2d:hover{ transform: rotate(360deg); } div-3d:hover{ transform: rot
珠峰培训
2017-02-12
-
css3 2D转换transform
css32D转换transform通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 转换是使元素改变形状、尺寸和位置的一种效果。浏览器支持 Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。 注释:Internet Explorer 9 需要前缀 -ms-。2D转换方法有以下几种:属
珠峰培训
2017-02-11
-
网页各种布局的解决方案
两列布局(左边定宽,右边自适应)HTML代码如下:<div class="parent"> <div class="left">侧栏</div> <div class="right">主栏</div></div>思路1:采用float实现.对parent父节点设置padding-left: 210px; ,对left侧栏节点设置fl
珠峰培训
2017-02-05