暂时未有相关云产品技术能力~
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
在现在的很多页面中,都运用到了百度地图来定位,例如: 像这样的地图,我们可以通过手动来进行放大、缩小、移动等来查找具体的地址,特别方便,在页面上引用也显得页面很有特点,那么,应该怎么样来制作这种地图呢? 一、获取源代码 网址:http://api.
js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看: 1、全局作用域或者普通函数中this指向全局对象window。
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配。 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。 假设设计稿是宽750px来做的,书写css方便计算考虑,根节点的font-size假定为100px,得出设备宽为7.5rem。
一、水平居中 方法① :行内元素 (父元素)text-align,(子元素)inline-block .parent{text-align: center;} .child{display: inline-block;} 总结: 优点:兼容性好,支持低版本...
1、HTML 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
一、切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图。
渐进增强和优雅降级之间的不同 1、渐进增强 .transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .
Size Marks下载安装使用方法 一、下载安装 1、下载Size marks:链接: https://pan.baidu.com/s/1breyMf1 密码: fjsn 2、 复制 Size Marks.jsx 到Photoshop的脚本文件夹。
我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本的要求,在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了一、html部分 1.H5新标签在IE9以下的浏览器识别 html5shiv.js下载地址 https://github.com/aFarkas/html5shiv/releases2.ul标签内外边距问题 ul标签在IE6\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。
1.cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。
1、如何让一个盒子水平垂直居中 1 //已知宽高 2 3 4 .div1{ 5 width:400px; 6 height:400px; 7 position:absolute; 8 left:50%; ...
京东秒杀倒计时 1、HTML 1 2 3 掌上秒杀 4 5 0 6 0 7 : 8 0 9 0 10 : 11 0 12 ...
一、移动端三种布局 1、有最大、最小宽度的百分比自适应布局 适用场景:门户网站首页,图片较多的首页。 2、百分比自适应布局 适用场景:信息文字较多的网页,内容较多网页。 3、全屏自适应布局 适用场景:单页面网页,移动web app 页面。
1、响应式布局 开发一个页面,在所有的设备上都能够完美展示。 媒体查询:@media screen and (max-width:100px) { } 媒体类型:screen(屏幕) print(打印机)handheld(手持设备)all(通用) 常用媒体查询参数: width —— 视口宽高he...
1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示?iphone5分辨率640*1136 逻辑像素与物理像素的关系px逻辑像素:浏览器使用的抽象单位dp,pt物理像素:设备无关像素dpr:设备像素缩放比计算公式:1px = (dpr)^2 * dpiphone5的...
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置),此方案仅适用于移动端web !function(e){function t(a){if(i[a])return i[a].
一、总之一句话, 尽量用mm 毫米作为标准单位. 采用新的相对单位 rem 首先设置html的 font-size 为根大小. html{ font-size:1mm; } .titleheight{ height:10rem; //这里等于10mm width:11rem; //这里等于11mm } 当 html{ font-size:2mm; } .
一、关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案。
node.js安装方法 第一步:双击node.js安装包开始安装,注意64位和32位,按照自己的进行安装 第二步:在安装过程中一直选择next,在选择安装目录时,大多数默认安装在C盘,我安装在了D盘,看个人习惯了 第三步:安装完成后,需要设置环境变量,这个是很重要的。
一、预处理 Less 1、官网文件 > 一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点> [官网](http://lesscss.org/)> [中文网](http://lesscss.cn/)> http://www.w3cplus.com/css/less [less手册]www.lesscss.net/ [bootstrap官网less介绍] http://www.bootcss.com/p/lesscss/ 2、为什么要有预处理CSS CSS基本上是设计师的工具,不是程序员的工具。
一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) (1)手指触摸开始时记录手指所在的坐标X (2)获取界面上的轮播图容器var $carousels=$('.carousel'); (3)注册滑动事件(4)变量重复赋值(5)结束触摸的一瞬间记录最后手指所在坐标X (6)比较开始...
下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式。 一、模态框HTML代码 1 DOCTYPE html> 2 3 4 5 模态框实现 6 7 8 9 模态框展示...
1、当我们想使用百分比来进行两个盒子的并排 代码: 1 DOCTYPE html> 2 3 4 5 6 html, 7 body { 8 margin: 0; 9 padding: 0; 10 } 11 12 .
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一、基本的轮播图实现 HTML代码 1 6 7 8 9 15 ...
一、函数库 underscoreJS _.template: /*取到模版当中的字符串*/ var pointTemplateStr = $('#point_template').
一、流式布局 1、 什么是流式布局 流式布局就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充,同时会设定最小宽度和最大宽度,适用于图片比较多的首页、门户、电商等。
1、HTML5文档结构 注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。 1 DOCTYPE html> 2 3 4 5 页面标题 6 7 8 9 10 2、浏览器兼容模式 如果网页在IE中打开,必须用最新的引擎渲...
一、Bootstrap使用 1、搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ····...
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。
移动端视口的分类说明。在开始之前,先看一个典型的例子: 1 2 @media screen and (max-width:480px){ 3 //宽度不超过480px时的样式 4 } 上述代码相信大家在做移动端开发时经常去书写。
Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建option,并将数据添加到option中 (4)定义点击事件,注意点击省调用的是city函数,点击市调用的是area函数 (5)注意获取市信息用的是省编码(pCode),获取区用的是市编码(cCode)。
Ajax运用artTemplate实现菜谱 一、获取接口数据 1、聚合数据API https://www.juhe.cn,在这上面找到菜谱大全数据接口文档 具体使用是这样的: key后面的数据是固定的,rn和pn是参数,后面的数值可以自定义,dtype是jsonp,最后加上输入的值 txt url:"http://apis.
一、不分离与分离的比较 1、前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用。后端程序员和前端程序员会出现同时修改template的情况,这样就造成了前后端的耦合,不利于快速开发和静态展示。
一、什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子域名) google (主域名) 8080 (端口号) script/jquery.js (请求的地址) * 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。
一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数中,判断readyState=4&&status=200表示...
关于javascript中的函数: 1、预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 2、执行 :从上到下执行,但有例外(setTimeout,setInterval,ajax中的回调函数,事件中的函数需要触发执行) 函数的参数可以是一个函数,这个函数可以直接调用 函数可以作为返回值 函数的嵌套形成闭包 function有双重身份: 1、对象 2、构造函数 一、定义 预解析:在当前作用域下,js运行之前,会把带有var和function关键字的事先声明,并在内存中安排好。
由于jQuery中的Ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦。 我们只定义一个Ajax方法,他可以简单的get,post,jsonp请求就可以了。
一、Ajax的实现主要分为四部分: 1、创建Ajax对象 1 // 创建ajax对象 2 var xhr = null; 3 if(window.XMLHttpRequest){ 4 xhr = new XMLHttpRequest(); 5 } else { 6 //为了兼容IE6 7 xhr = new ActiveXObject('Microsoft.
一、Ajax请求GET和POST的区别 1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来 2.使用Get请求发送数据量小,Post请求发送数据量大 3.get请求需注意缓存问题,post请求不需担心这个问题 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。
在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据。 XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后再客户端向服务器请求数据,在页面加载后在服务器端接收数据,在后台向客户端发送数据。
同步请求和异步请求的区别 1、同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。 用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写! 2、异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
一、服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1、服务器类型 - 按服务类型可分为:文件服务器、数据库服务器、邮件服务器、Web服务器等 - 按操作系统可分为:Linux服务器、Windows服务器等 - 按应用软件可分为:Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、 weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等 2、 服务器软件 使计算机具备提供某种服务能力的应用软件,称为服务器软件, 通过安装相应的服务软件,然后进行配置后就可以使计算具备了提供某种服务的能力。
字体图标经常使用的是 阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 一、阿里库字体图标使用 第一步: 首先进入阿里巴巴矢量图网站:http://www.iconfont.cn/ 第二步: 搜索你分类的关键字---然后加入购物车,这个是免费的 第三步:下载到本地 下载到本地,然后解压。
一、Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。
CSS3实现立方体旋转 1 DOCTYPE html> 2 3 4 5 立方体旋转 6 7 .box{ 8 width: 250px; 9 height: 250px; 10 ...
一、transform-style 1、transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。 有两个属性值:flat和preserve-3d。 transform-style属性的使用语法非常简单: transform-style: flat | preserve-3d 其中flat值为默认值,表示所有子元素在2D平面呈现。
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation; 一、Animation定义动画 CSS3的Animation是由“keyframes”这个属性来实现这样的效果,keyframes就是关键帧。
CSS3中透视perspective 透视原理: 近大远小 。 浏览器透视:把近大远小的所有图像,透视在屏幕上。 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改透视原点进行更改。
transform变换详解 本文主要介绍变形transform。 Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
一、渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。 可分为线性渐变、径向渐变 1、 线性渐变 (gradient 变化) linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。