2020年10月_lord_of_war

原创 Flex Box

CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或

2020-10-27 19:57:53 86

原创 2d转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。浏览器支持Internet Explorer 10, Firefox, 和 Opera支持transform 属性.Chrome 和 Safari 要求前缀 -webkit- 版本.注意： Internet Explorer 9 要求前缀 -ms- 版本.translate() 方法<style> div{ width:100px; height:75px; background-color:red; borde

2020-10-27 16:58:28 207

原创 js与百度地图

如何调用百度地图打开百度api文档-申请秘钥-添加域名白名单-引入api。<script src="http://api.map.baidu.com/api?ak=填写你自己的产品秘钥&v=2.0&services=false"></script>然后我们就可以开始使用了，根据地图api文档我们就能实现想要的效果了。使用地图首先需要H5定位，geolocation 这个方法是H5新增特性，专门用来实现客户端地理定位的。//判断是否支持获取本地位置

2020-10-27 16:54:17 128

原创 CSS3新增属性

css3新增边框属性border-color：为边框设置多种颜色div { border-style:solid; border-color:#ff0000 #0000ff; }border-image：图片边框border-image:url(border.png) 30 30 round;注意：Internet Explorer 不支持 border-image 属性；border-image 属性规定了用作边框的图片。border-radius：圆角比如使

2020-10-20 21:00:59 289

原创 SVG

什么是SVGSVG 指可伸缩矢量图形 (Scalable Vector Graphics)；SVG 用于定义用于网络的基于矢量的图形；SVG 使用 XML 格式定义图形；SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失；SVG 是万维网联盟的标准；SVG的优点SVG 图像可通过文本编辑器来创建和修改；SVG 图像可被搜索、索引、脚本化或压缩；SVG 是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；SVG 可在图像质量不下降的情况下被放大；绘制圆形<!

2020-10-20 20:15:49 142

原创震惊！这就是H5的新特性吗？又学到了许多

新语义化标签H5中新增了很多新的语义化标签，让我们大致来看一下<header>标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。<footer>标签一般配合address标签(显示地址)，包含作者信息、相关链接等。<nav> 导航在H4中导航栏一般用ul-li标签，H5中可以直接用标签<hgroup> 页面上得一个标题组合（一个标题和一个子标题）<section> 用来划分页面上的不同区域<article>

2020-10-10 18:45:50 60

原创这就是canvas吗？学到了许多

绘制矩形1.快速创建矩形rect()方法ctx.rect(x, y, width, height);解释：x, y是矩形左上角坐标， width和height都是以像素计rect方法只是规划了矩形的路径，并没有填充和描边。2.创建描边矩形ctx.strokeRect(x, y, width, height);参数跟rect(x, y, width, height)相同，注意此方法绘制完路径后立即进行stroke绘制。3.创建填充矩形ctx.fillRect(x, y, wi

2020-10-09 19:23:32 1876

原创 new关键字的执行过程

在使用JavaScript开发过程中，经常会用到new关键字，从字面意思来看，就是新建一个对象，那么在我们看不见的数据之间的操作到底发生了什么呢？使用new的这个过程执行了哪些操作？function Person(name) { this.name = name;}var zhangsan = new Person('张三');上述代码中new了一个Person，这其中的过程如下：第一步：创建一个空对象object，let obj = new Object()—创建对象新对象，就是指在栈

2020-10-09 00:49:51 971

lord_of_war的博客