前端向朔_CSDN博客-HTML/CSS,JavaScript,移动Web开发实战领域博主

私信关注

前端向朔

码龄7年

学习-撕裂-成长-变强

于 2014-02-25 加入CSDN

获得成就

博客专家认证
获得560次点赞
内容获得236次评论
获得991次收藏

荣誉勋章

兴趣领域

#前端

#Flutter#Vue.js#JavaScript#小程序#CSS#前端框架

TA的专栏

原创

367阅读

0评论

0点赞

发布博客于 4 年前

陀螺仪初探

概述大家还记得16年的淘宝造物节吗？那个H5你应该还记得吧。你平时玩过H5赛车吗？你体验过全景web页面吗？等等这些交互体验，都用到了一个知识点——陀螺仪。接下来我们就一起来了解下陀螺仪吧。基本知识我们要对以下几个知识点有基本印象。1.陀螺仪 2.视差效果 3.CSS 3D Transform陀螺仪要想实现重力感应效果，必须取到设备的方向值。有两种Javascript事件负责处理

移动Web开发基础-利用VW单位适配布局

前言前面我们分享移动Web开发基础-rem布局的时候提到了两个方案。方案的最终目的都是为了形成一个“流单位”。方案一是通过媒体查询给html设置font-size，密集的断点设置形成“流单位”。方案二是通过JS脚本根据设备显示屏大小动态计算出根元素字体大小，这个计算结果几乎是连续的“流单位”。两个方案的对比，我们常用的当然也是建议的方案是第二个。目前来看，方案二存在一个问题...

移动Web开发基础-flex弹性布局（兼容写法）

前言前面我们已经分享过一篇移动Web开发基础-百分比+flex布局方案只是大概讲了下这种布局适配方案的思路，后面我们也通过分享移动Web开发基础-比例盒子让大家对百分比布局中比较常用的等比缩放有了比较好的处理方法，本文我们来了解下flex弹性布局，并重点了解移动端web页面中flex弹性布局的兼容写法。flex初认识Flex 是 Flexible Box 的缩写，意为”弹性

移动Web UI库（H5框架）有哪些，看这里就够了

前言今年上半年，项目组在项目开发的过程中建立了一套风格统一，组件丰富完善，命名统一规范的PC端UI库，适用于做大型站点，该UI库也是应用到了整个平台的项目中，在各个项目组中进行推广。因为项目的保密性，这里不方便给出实际项目，当然目前这套UI库也不是开源的。下半年开始，我们偏向做移动Web的同学也开始考虑要梳理出这样一套适用于移动端的UI库，与PC端UI库命名规范保持一致，便于项目组同学在PC项目和移

移动Web开发基础-flexible布局方案

概述前面我们已经已经了解了两种基本的布局方案，移动Web开发基础-百分比+flex布局方案和移动Web开发基础-rem布局，其中rem布局方案和我们今天要了解的flexible布局方案是有关系的，因为这两种方案布局元素的单位都是rem，他们的区别在于前者是固定viewport缩放值，而flexible布局方案是根据设备像素密度比DPR动态修改viewport，下面我们来具体了解下吧。基本了解1.

移动Web开发基础-rem布局

前言在了解了基本的布局方案移动Web开发基础-百分比+flex布局方案之后，我们来了解下利用rem这个css单位来布局的方案。其实不管哪种方案，最终的目的都是为了适配不同设备尺寸的屏幕显示。基本认识1.px是布局当中的css像素 2.em是相对父元素大小的单位，可以用来设置字体，行高，缩进等一些css属性 3.rem是根据根元素，也就是HTML元素的字体大小来计算的，因为rem单位都是根

移动Web开发基础-比例盒子

前言上篇在移动Web开发基础-百分比+flex布局方案中说到了比例盒子的实现，因为在移动端，需要适应各种屏幕宽度的设备，所以我们的图片以及其他一些元素需要根据屏幕宽度自适应的等比例缩放，这里就需要用到比例盒子的布局方法。接下来让我们一起来了解下实现比例盒子的几种方法吧！这里会介绍四种实现方式，分别是用css的vw单位，垂直方向的padding或者margin，以及因此产生的问题而衍生的用伪元素实现的

移动Web开发基础-百分比+flex布局方案

前言移动端适配是一个非常繁琐的问题，当然，只要掌握了一些基础的布局方式之后，适配问题也不再是大问题。其实也没有非常死板的适配方案，一般实际开发过程中也是根据项目实际情况采取不同的适配方案或者混合使用几种。目前常用的布局适配方案有百分比+flex布局；以淘宝首页为代表的 rem+viewport缩放 flexible 布局方案；固定viewport，通过js动态修改html字体大小的rem布局，这里我

移动Web开发基础-reset样式

详细分解1、禁止ios和android用户选中文字.css{-webkit-user-select:none;}2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片.css{-webkit-touch-callout: none}3、webkit去除表单元素的默认样式.css{-webkit-appearance:none;}4、修改webkit表单输入框placeholde

移动Web开发基础-meta锦集

什么是metaMeta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。Meta ：即元数据（Metadata）是数据的数据信息。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果

移动Web开发基础-Viewport

导语：移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思为视图窗口，在移动设备上就是指用来显示页面的那部分区域。用移动设备来访问没有做特殊处理的PC页面，移动设备是显示不下那么宽的内容的，所以移动设备一般会将页面缩小来显示整个页面，用户可以将页面放在来看清楚内容，在做移动Web开发的时候，我们可以手动的设置页面的视窗宽度，页面缩放比例以及是否允许用户...

CSS Mask 在WeGame新手引导的实践

全新版WeGame客户端下载：http://wegame.com/client在全新的WeGame版本，如果首次登录，则会加载新手引导的模块，在这个模块中要实现下图右边效果，我们采用CSS Mask遮罩，类似于alpha透明通道的遮罩效果。详细介绍：介绍：css遮罩最早是由苹果公司提出，并已经出现在W3C草案中的属性，css mask属性目前还不是正式标准，需要添加-webkit-内核前缀才能使用

rem布局在webview中页面错乱

上一篇我分享了 rem布局加载闪烁问题，这个问题也是在rem布局经常遇到而且还比较好解决的问题。但是！注意，这里但是哈！（一般但是都要搞事情）你有没有遇到过如下这种问题（页面错乱）：查看代码，html的font-size设置正常，在浏览器和绝大部分手机上也正常，但是在某些手机上页面元素为什么就大了或小了呢？是rem布局不准了吗？非也，其实是系统字体大小的问题，这类问题常见于安卓设备上，而且是内嵌在A

rem布局加载闪烁问题

先上体验地址：http://jiguang.qq.com/jiguang_app/kapian/html/card-query.html?from=singlemessage扫描二维码：问题rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小，这是怎么回事呢？为此，我们来探讨一下！rem的布局具体不介绍了吧，你应该已经掌握或者会用了。这里我的设计稿是750px的，以下是我用来动态设置ht

a标签的字体颜色继承问题

为什么span标签继承了父类的颜色，唯独链接不能，直到直接设置a的颜色就行？

CSS盒模型

盒模型(box model)是CSS中的一个重要概念，它规定了元素框处理元素内容、内边距、边框和外边距的方式。

一起来了解垃圾分类

垃圾是放错了地方的金子。本文大纲-前言 1.什么是垃圾分类 2.为什么需要分类 3.垃圾分类的意义 4.垃圾种类　　4.1可回收垃圾　　4.2不可回收垃圾　　　　4.2.1餐厨垃圾　　　　4.2.2有害垃圾　　　　4.2.3其他垃圾 5.我国垃圾分类现状 6.国外优秀案例（极致的日本垃圾分类） 7.如何做好垃圾分类 -结束语

如何说服老板页面兼容IE9+

从以下数据看，我们的页面兼容IE9+是可行的。注：浏览器市场份额占比，数据来自百度统计（http://tongji.baidu.com/data/browser）和StatCounter（http://gs.statcounter.com/），因为地域环境的问题，前者更符合国内实际情况。数据一：2017年4月-2017年7月数据结果显示，用户占比较大的浏览器品牌分别是chrome（41.58%）和I

UE、UI、UCD、UED？你知道你是干啥的吗

名词UE (User Experience) : 用户体验 UI (User Interface) : 用户界面 UCD (User-Centered Design) :以用户为中心的设计 UED (User-Experience Design) :用户体验设计名词解释什么是UI？UI(User Interface)即用户界面，也称人机界面。是指用户和某些系统进

大型网站前端使用图片格式的正确姿势

在网页上使用JPG、PNG和SVG：新手指南 | Cheesecake Labs 本文转载自：众成翻译译者：lunasun 审校: lizheming 链接：http://www.zcfy.cc/article/3211 原文：https://cheesecakelabs.com/blog/jpg-png-svg-web-beginners-guide/在网页上使用J

从零开始学习移动端Web开发

背景近年来，随着智能手机的普及，移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发，转向了移动端Web开发或者是混合开发，既然有需求，那就让我们一起来学习移动端Web开发吧。本文旨在让读者以最快的时间了解移动Web开发基础以及介绍一些常见问题。基础准备首先我们要有HTML/HTML5、CSS/CSS3基础知识（会简单的切图就可以了），如果能懂点JS那就更好啦。其次我们要清楚一些

前端名词解释（持续更新）

前端名词解释前端名词解释名词：HTML 解释： HTML 是用来描述网页的一种语言。 HTML拥有很多标签入等。 HTML文档 = 网页，HTML文档包含“标签”和“纯文本”。 HTML的结构决定这个页面稳不稳定，规不规范，性能好不好。名词：HTML5 解释： HTML5 是 HTML的新标准，它更加语义化，并新增了许多语义化标签。 由于HTML5在PC上只

Sublime内网安装插件教程

概述最近换工作了，所以拿到新电脑的同时要安装一些基本的软件，配置好开发环境等，由于公司IT部门的安全要求，这个过程也是一个辛酸史。今天就来分享一下在内网环境下安装Sublime插件的过程。基础准备首先你得下载Sublime Text3 这个软件吧，来到官网下载，可以免费使用，但是会不时弹窗提醒你注册，不是很影响使用，最好是花钱注册咯。Download：http://www.sublimetext.c

如何计算数组中某项的个数

如何计算数组中某项的个数<script type="text/javascript"> //统计一个数组中有多少个指定的数据项 var arr1= [12, 5, 8, 130, 44,5,51,5]; //方法一： function count(arr,num){ var total = 0; for (var i = arr.length - 1;

JSON必知必会

第一章什么是JSON1.JSON是一种数据交换格式，类似的还有XML2.JSON不是一种编程语言3.JSON是基于JavaScript的对象字面量的表示法第二章 JSON语法1.字面量，如下{ "name": "向朔", "age": 25}关键点：采用“键值对”的表现方式，对象的属性必须加双引号，不需要分号，最后一项也不需要逗号，值可以是字符串、数字、布尔值、null、

简易拖动窗口-面向对象封装

HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>0305_拖动窗口</title> <link rel="stylesheet" type="text/css" href="css/drag.css" /> <style>

JS小练习1（cssText）

概述 JS小练习，从今天开始，每日一题小练习，主要是用原生JS实现一些DOM操作和交互效果，主要目的是熟练JS对DOM操作的方法和解决问题的思路，如果有兴趣的同学可以一起来哦。练习的例子地址：http://www.fgm.cc/learn/ 除了对效果的实现，我会仔细学习原作者的代码并分析，对其中的解决思路，代码巧妙地方，自己不了解和大家容易忽略的地方进行总结，形式以博客为主。如有不正确的

微信小程序-修改数据后页面不渲染

说明去年从小程序一开始出来到现在，我一直是比较看好和保持一定的关注度的，小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的，这是我第一次有意识的亲眼目睹了一个新技术的发展，还是感觉比较荣幸的。唱衰小程序？我的观点是肯定不可能，因为现在每天提交审核的小程序还在继续增加，而且有些小程序确实很好用，比如摩拜的扫码骑车，还有我上周去KTV，直接用小程序扫屏幕上的二维码，就可以绑定房间，然后通过

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float为什么会有以上三点要求呢？其实横向滚动官方文档中是没有做太多说明的，只说明需要定义scroll-view滚动方向scroll-x=tr

微信小程序-template模板使用

如下图，我在做华企商学院小程序的时候，课程搜索结果页和课程列表页结构是完全一样的，这时就非常适合使用模板来完成页面搭建。实现一次定义，到处使用。模板一、定义模板1、新建一个template文件夹用来管理项目中所有的模板； 2、新建一个courseList.wxml文件来定义模板； 3、使用name属性，作为模板的名字。然后在<template/>内定义代码片段。注意： a.可以看到一个.w

微信小程序-navigator 跳转url传递参数

使用方法说明(1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&…….)(2)取值：options 是包含url地址中参数的对象，可以直接点获取。扩展JS获取web页面地址栏中的参数。https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&es

微信小程序-bindtap等事件传参

什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。看图，因为需要传递的数据比较多，所以我们通过dataset携带参数信息。如果只有一个参数，可以通过id来传递。详解（以常见的tap点击事情为例）

wx.navigateTo/wx.redirectTo 无效

在微信小程序开发过程中，如果你出现了在其他地方可以正常跳转，但是此时就是不行，不知道为什么。分析原因：1.你的页面在app.json文件中注册了吗？ 2.你的url地址写对了吗，目录层级没错吗? 3.你要跳转到的页面是非tabBar的页面吗？如果是tabBar页面，恭喜你，找到问题了。 wx.navigateTo/wx.redirectTo只能用在非tabBar页面的跳转，要跳转到tabBar

Array比较好用的属性和方法

1.Array.isArray() 方法用来判断某个值是否为Array。如果是，则返回 true，否则返回 false。2.concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。非常实用于“上拉加载 ”的实现，可以将新请求到的数据与原数据合并，不会造成页面的闪动。let arr3 = arr1.concat(arr2);3.forEach() 方法对数组的每个元素执行一次

Swiper自定义分页器

Swiper自定义分页最终实现效果图：HTML DEMO（官网例子）<link rel="stylesheet" href="path/to/swiper.min.css">

swiper自定义分页

gif

发布资源于 4 年前

我的“第一个”春节

今天是情人节，但是我还是想写一点关于亲情的文字，不为了谁，只为了自己。置于为什么说是“第一个”春节，原因是我觉得今年的春节，我才真正感受到一些关于亲人，关于故乡的情感。今年春节，就过了两天，回家的那天和离家的那天。春运 · 回家赶火车我是在南方小年24的前一天，下午上完班就直接带着行李赶到罗湖站，朱总还让我们提前下班了，感谢。第一次赶春运的车，之前买票什么的就不说了，以前从来没有体验过，根本买不到票

微信小程序-学习资料网站大全

从程序员的角度看，实用性依次排列： 1.github资源汇总 justjavac/awesome-wechat-weapp 2.微信小程序俱乐部_微信小程序社区_wxappclub.com 3.美趋网 - 微信小程序商店 4.微信小程序联盟 4. 微信小程序开发者社区 5. 小程序商店 | 知晓程序第三方小程序制作平台： 1.青雀-零成本一站式开发网站和微信小程序 2.

微信小程序-编辑器插件

微信的提供IDE实在是不怎么好用（我说的是敲代码这块，当一个编译器浏览器倒是挺好的），具体怎么不好用就不吐槽了，各位看官有用过就知道，那我们该怎么来拯救自己呢，这里我给大家整理了一下。以Sublime Text3为例，其他编辑器插件在文末给出。两个步骤，一是修改文件类型，二是安装插件。步骤一右下角可设置制表符缩进宽度，修改文件类型（这个很关键，一般后缀sublime会自动分析文件类型，但对于微信小

微信小程序-设置启动页面

在开发微信小程序的时候，除了tabBar上设置的页面之外，想进入肯定要走跳转之类的进入，但是我们开发的时候肯定想要直接看到该页面，那么我们就需要设置一下启动页面了有两种方法。方法一在app.json文件中，pages数组，设置在第一个的页面就是默认启动页面，所以你只需要调整你当前开发的页面顺序就好了。方法二在编译的地方设置，你只需要设置页面的路径，勾选上“使用以上条件编译”，如果页面需要

前端向朔

内推码-394099 顺丰科技 2021届毕业生看过来

HTML 编码规范

CSS 编码规范

一起了解 Git Flow 工作流程

CSS编码规范.md

移动端跨终端技术方案选型（思路）

重读Vue文档

《JavaScript 语言精髓》读书笔记

1024 平凡的一天

元素圆角与内部滚动条的矛盾

【CSS】怎样修改chrome记住密码后自动填充表单的黄色背景？

【CSS】rgba()和opacity这两个的透明效果有什么区别

【CSS】属性content有什么作用呢？有哪些场景可以用到？

【HTML】元素的 alt 和 title 有什么区别？

多端统一技术方案选型

春节随想

《CSS Secrets》读书笔记（5）

还不会CSS水平垂直居中？这里有12种方案

《CSS Secrets》读书笔记（4）

我正在参加2018博客之星评选，需要您的支持，非常感谢

《CSS Secrets》读书笔记（3）

2018学习总结

Vue / Nuxt 项目如何使用 swiper / lazyload

《CSS Secrets》读书笔记（2）

《CSS Secrets》读书笔记（2）

Nuxt项目如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith

《CSS Secrets》读书笔记（1）

Git项目文件/版本管理

Git标签管理集合

安卓调试 adb 工具

手机端抓包http/https-Fiddler安装与设置代理

Git分支操作集合

Git分支操作集合

如何将本地文件推送到Git远程仓库

如何使用Git克隆远程仓库

ES6 Set和Map数据结构（可转为数组）

GitHub如何配置SSH Key

iPhone又出新机了，UI设计师该用什么尺寸呢？

2018-PingFangSC字体全套new

帧动画的多种实现方式与性能对比

移动Web开发实战专栏总结（PPT分享）

Web动画形式

单屏（全屏）适配解决方案（jQuery插件）

Preload图片预加载（jQuery插件）

Canvas绘制时钟（面向对象版）

Canvas星空效果（JS面向对象）

微信小程序-(cover-view/cover-image)

微信小程序-自定义button、checkbox组件

微信小程序-预研总结（PPT分享）

移动Web开发实战-横竖屏适配

微信小程序开发前的基本了解

CSS技巧-根据兄弟元素的数量来设置样式

JS小练习3（charAt）

JS小练习2（isNaN）

GitHub基础使用（版本管理，个人博客）

2017年学习总结

我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具

SVG初体验

陀螺仪初探

移动Web开发基础-利用VW单位适配布局

移动Web开发基础-flex弹性布局（兼容写法）

移动Web UI库（H5框架）有哪些，看这里就够了

移动Web开发基础-flexible布局方案

移动Web开发基础-rem布局

移动Web开发基础-比例盒子

移动Web开发基础-百分比+flex布局方案

移动Web开发基础-reset样式

移动Web开发基础-meta锦集

移动Web开发基础-Viewport

CSS Mask 在WeGame新手引导的实践

rem布局在webview中页面错乱

rem布局加载闪烁问题

a标签的字体颜色继承问题

CSS盒模型

一起来了解垃圾分类

如何说服老板页面兼容IE9+

UE、UI、UCD、UED？你知道你是干啥的吗