![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5C3
Guan ri
翻身
展开
-
canvars
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial填充非零环绕规则, 顺是1 逆是-1 相加等于0就不填充开始点也可以通过moveTo()函数改变 一个moveTo绘制一个图形arc 画弧度/*在填充的时候回遵循非零环绕规则*/lineTo(x, y)绘制一条从当前位置到指定...原创 2019-09-22 19:10:51 · 581 阅读 · 0 评论 -
canvas-七巧板
canvas属性canvas.moveTo起点 canvas.lineTo终点 canvas.stroke确定线条。 canvas.begainPath()开始绘制 canvas.closePath()清楚已有的状态 .lineWith 线条宽度 .strokeStyle线条样式 .fillStyle填充颜色<!DOCTYPE html><html lang="en...原创 2019-05-28 11:21:54 · 174 阅读 · 0 评论 -
canvas
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial创建Canvas元素 <cavars with=300px, hight="100px"//画布大小要写在标签内></cavars>通过JavaScript来绘制<script> /*获取元素*///va...原创 2019-06-22 14:13:33 · 243 阅读 · 0 评论 -
左右两模块分别上下滑动
html部分<main id="main"><!-- 左侧分类 --><div class="category-left"><!-- 轮播图大容器 --><div class="swiper-container"><!-- 所有图片容器 --><div class="swiper-wrappe...原创 2019-06-04 14:48:11 · 1111 阅读 · 0 评论 -
mui轮播图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compa...原创 2019-06-01 15:26:34 · 282 阅读 · 0 评论 -
6下拉菜单
1.下拉菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head&...原创 2019-06-07 00:01:45 · 186 阅读 · 0 评论 -
布局-常用类名和快捷键
二、相对网页外层重要部分CSS样式命名:外套 wrap ------------------用于最外层头部 header ----------------用于头部主要内容 main ------------用于主体内容(中部)左侧 main-left -------------左侧布局右侧 main-right -----------右侧布局导航条 nav ---...原创 2019-05-26 17:24:43 · 837 阅读 · 0 评论 -
宽高系列
offset系列:获取元素的宽,高,left,top, offsetParent* offsetWidth:元素的宽,有边框* offsetHeight:元素的高,有边框* offsetLeft:元素距离左边位置的值* offsetTop:元素外边框距离上面位置的值 相当于margin** scroll系列:卷曲出去的值* scrollLeft:向左卷曲出去的距离...原创 2019-05-30 05:04:58 · 163 阅读 · 0 评论 -
动画comment.js
/*** Created by Administrator on 2016/7/27.* 该函数是返回的是指定格式的日期,是字符串类型* 参数:date ----日期* 返回值: 字符串类型的日期* */function getDatetoString(date) {var strDate;//存储日期的字符串//获取年var year=date.getF...原创 2019-05-31 21:12:07 · 191 阅读 · 0 评论 -
css实现箭头图标 伪类 图标
使用伪类伪类一定要相对定位 ,设置 content:"",把border-left改为透明 和border-right改为透明把border-left改为透明left top right都为实心.则是一个方长方形...原创 2019-11-18 16:52:25 · 724 阅读 · 0 评论 -
css注意点 css预处理 伪元素选择器 sass
css预处理npm install sass-loader --save;npm install node-sass --save;//cnpm install -D sass-loader node-sass伪元素选择器(CSS3) E::first-letter文本的第一个单词或字(如中文、日文、韩文等) E::first-line 文本第一行; ...原创 2019-08-29 23:39:17 · 1001 阅读 · 0 评论 -
semantic-ui-react
https://react.semantic-ui.com下载 yarn add semantic-ui-reactyarn add semantic-ui-css引入import{Button}from'semantic-ui-react'import'semantic-ui-css/semantic.min.css'使用<Button p...原创 2020-02-25 01:27:51 · 385 阅读 · 0 评论 -
Hybrid App
Hybrid App是指介于web-app、native-app这两者之间的app,一.混合式App的工作原理1、mobile application:Hybrid App就是一个移动应用2、both browser-supported language and computer language:同时使用网页语言与程序语言编写3、available through applica...原创 2019-11-13 02:14:48 · 545 阅读 · 0 评论 -
移动端
解决移动端点击延迟问题<script src="jd/lib/fastclick/fastclick.js"></script>// 绑定fastclick 给body绑定 因为元素都在body里面 间接为所有元素都绑定了fastclickwindow.addEventListener('load', function() {new FastClick(do...原创 2019-06-02 17:33:54 · 272 阅读 · 0 评论 -
移动端问题
一.处理 移动端 1px 被渲染成 2px 问题?1、局部处理meta 标签中的 viewport 属性 ,initial-scale 设置为 1rem 按照设计稿标准走,外加利用 transfrome 的 scale(0.5) 缩小一倍即可;2、全局处理meta 标签中的 viewport 属性 ,initial-scale 设置为 0.5rem 按照设计稿标准走即...原创 2020-02-12 03:09:51 · 118 阅读 · 0 评论 -
布局-不同类型盒子水平垂直居中
html元素分为行内元素(1种),行内块元素(5种),块级元素(5种)1.行内 元素设置父盒子的行高,line-height=高度(垂直居中) 水平居中用text-align=center2.行内块元素(5种)2.1. 定位+tranfrom(css3属性)父盒子 :绝对定位position :retative居中元素设置:绝对定位position :...原创 2019-03-19 16:43:58 · 175 阅读 · 0 评论 -
布局
网格布局网格线"(grid line)n行有n + 1根水平网格线,m列有m + 1根垂直网格线容器元素都是块级元素,但也可以设成行内元素div {display: inline-grid;}.container {display: grid;grid-template-columns: 100px 100px 100px;//也可以使用百分比。gr...原创 2019-08-01 16:11:37 · 83 阅读 · 0 评论 -
vue中移动端rem flexible.js px2rem 通过viewport来适配
1第一种使用px2rem插件1. 创建:在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码;(function(){functiona(){varb=document.documentElement.clientWidthb=b>750?750:bvarc=(b/750)...原创 2019-05-22 00:37:27 · 968 阅读 · 0 评论 -
rem转换工具
<!doctype html><html><head><meta charset="utf-8" /><title>px转rem</title><meta name="description" content="px转rem" /><meta name="author" content...原创 2019-06-02 17:45:03 · 1016 阅读 · 0 评论 -
搜索记录历史记录渲染列表
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>首页</title><style>*{margin:0;pad...原创 2019-09-22 00:31:57 · 213 阅读 · 0 评论 -
动画回调
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compa...原创 2019-06-22 13:01:45 · 213 阅读 · 0 评论 -
动画-transtion animation
/*开启3d效果*/transform-style:preserve-3d;图片 img ,background-img和颜色color 用js没有动画效果,,只能用transition(所有属性都能过度)改div不要改img (行内属性)/*视距:呈现近大远小效果*//*perspective:500px;*/...原创 2019-03-16 15:06:42 · 277 阅读 · 2 评论 -
布局- video标签
video是H5新标签,可以在开始标签和结束标签之间放置文本内容,这样老的浏览器 就可以显示出不支持该标签的信息。new: HTML5 中的新属性。属性 值 描述 autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。 controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 height...原创 2019-03-15 00:39:56 · 563 阅读 · 0 评论