- 博客(19)
- 收藏
- 关注
RSS订阅原创 【Gulp】报错Cannot find module 'jshint/src/cli'
状况描述：在使用gulp构建文件时，报错Cannot find module ‘jshint/src/cli’，但是之前已经运行npm install gulp-jshint --save-dev，并在gulpfile.js中引入模块var jshint=require("gulp-jshint")。 解决方案：重新安装：npm install jshint gulp-jshint --save-
2017-12-12 16:47:18
692
原创 页脚保持在底部
状况描述：当页面内容不足一页时，页脚在视口底部；当内容超过一页，页脚在页面末端。 解决方案：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ pa
2017-11-13 15:30:38
367
原创 图片渐变遮罩效果
<div class="imgBox"> <img src="img/img.png" /></div>.imgBox{ background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));}.imgBox img{
2017-11-08 10:40:53
2036
1
原创 微信小程序API梳理
scroll-view 与<scroll-view>的子元素的类名无关。横向滚动，<scroll-view>的样式要加上white-space:nowrap，子元素为display:inline-block。 -
2017-11-07 09:30:32
316
原创 HTML页面<progress>标签的CSS自定义
progress { -webkit-appearance: none; width: 0.6rem; height: 0.16rem;}progress::-webkit-progress-bar{ background-color: #e7f1fb;}progress::-webkit-progress-value{ background-color:
2017-11-01 10:04:49
1708
原创 背景色渐变
header{ width:12.14rem; height: 0.62rem; background:-webkit-linear-gradient(left,#1C82FF,#2ACBFF);}
2017-10-31 15:22:03
292
原创 使用template.js处理数据
状况描述：页面用Ajax向后台请求数据，把数据渲染进列表中。 解决方案：template.js(https://github.com/yanhaijing/template.js) 步骤： 1. 页面引入template.js<script src="js/template.js" type="text/javascript"></script>2.编写要渲染的模板 模板放在scri
2017-10-24 15:26:46
3261
1
原创 设置网页固定高度的注意事项
状况描述：想写一个页面，覆盖整个浏览器视窗，高度用JavaScript动态计算（window.innerHeight）。 注意：在用rem部署响应式布局的时候，JS获取到的高度值，在赋值给最外层容器时，单位应该是px,而不是rem，否则页面高度会缩短。
2017-10-20 14:45:44
1014
原创 【暂未解决】video标签在移动端页面播放时默认全屏的问题
状况描述：在微信打开移动端页面的视频，点击播放后自动进入全屏模式，给标签添加webkit-playsinline后，一些机型无效，如小米。华为mate9是默认不全屏的。 解决方案： https://mp.weixin.qq.com/s?__biz=MzIzMjU4NDEyNw==&mid=2247483672&idx=1&sn=679b17e465c63d6143780beae1dca56a&c
2017-10-19 19:16:58
4606
转载 H5页面轮播图插件
插件名称：Swiper 官网：http://www.swiper.com.cn/ 依赖：<link rel="stylesheet" href="path/to/swiper.min.css"><script src="path/to/swiper.min.js"></script>//若已经引入jQuery，可以用swiper.jquery.min.js使用：<div class="swi
2017-10-18 16:57:39
2338
转载 移动端页面上拉加载、下拉刷新插件
插件名称：dropload.js GitHub：https://github.com/ximan/dropload 依赖：jQuery1.7以上（http://code.jquery.com/jquery-3.2.1.js） 使用方法：<link rel="stylesheet" href="../dist/dropload.css"><script src="../dist/droploa
2017-10-18 15:04:31
1674
原创 对象转为数组
状况描述：JavaScript用className获取到一系列元素，无法使用forEach方法，因为其为对象而非数组。 解决方案：//javascriptvar el=document.getElementsByClassName("el");var arr=[];for(var i in el){ arr.push(el[i]);}console.log(typeof arr)
2017-10-17 10:33:12
388
原创 利用rem实现响应式布局
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
2017-10-17 10:08:29
623
原创 多列布局的均匀分布
状况描述：想将多个span标签规划为每行四个的样式。 解决方案：计算每个span的宽、border、margin以及父容器的padding，加起来要恰好等于视口宽度。如果代码里span标签用回车换行分隔开，在页面上会体现出计划之外的间距，可给父容器添加一条font-size:0;每一行最后一个span的margin-right也要设为0。
2017-10-17 10:06:26
1991
原创 解决table的border属性设置为0后tr不显示border
状况描述：将table的border属性设为0，可以去掉table自带的边框；而在CSS中给tr设置border是无效的。 解决方案：给table的样式加一条border-collapse：collapse；<!--HTML--><table> <tr> <td>1</td> <td>2</td> </tr></table>/*CSS*/tab
2017-10-11 10:23:09
3705
原创 自定义checkbox的样式
状况描述：HTML自带的checkbox，样式不一定符合需求，但没有简单的CSS属性能将其修改。 解决方案：<!--HTML--><input type="checkbox" id="checker" /><label class="checkerLabel" for="checker">Checker</label>/*CSS*/input[type="checkbox"]{display
2017-10-10 10:25:17
390
原创 同行块级元素等高
两个div在同一行，一高一矮，期望二者高度自适应内容，并且高度同为高者的高度。 解决方案：二者的父元素display：table；二者display：table-cell；并且不能有浮动。
2017-10-09 16:40:38
586
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人