- 博客(19)
- 收藏
- 关注
原创 【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 707
原创 页脚保持在底部
状况描述:当页面内容不足一页时,页脚在视口底部;当内容超过一页,页脚在页面末端。 解决方案:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ pa
2017-11-13 15:30:38 394
原创 图片渐变遮罩效果
<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 2059 1
原创 微信小程序API梳理
scroll-view 与<scroll-view>的子元素的类名无关。横向滚动,<scroll-view>的样式要加上white-space:nowrap,子元素为display:inline-block。 -
2017-11-07 09:30:32 336
原创 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 1739
原创 背景色渐变
header{ width:12.14rem; height: 0.62rem; background:-webkit-linear-gradient(left,#1C82FF,#2ACBFF);}
2017-10-31 15:22:03 313
原创 使用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 3297 1
原创 设置网页固定高度的注意事项
状况描述:想写一个页面,覆盖整个浏览器视窗,高度用JavaScript动态计算(window.innerHeight)。 注意:在用rem部署响应式布局的时候,JS获取到的高度值,在赋值给最外层容器时,单位应该是px,而不是rem,否则页面高度会缩短。
2017-10-20 14:45:44 1030
原创 【暂未解决】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 4636
转载 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 2365
转载 移动端页面上拉加载、下拉刷新插件
插件名称: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 1695
原创 对象转为数组
状况描述: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 405
原创 利用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 641
原创 多列布局的均匀分布
状况描述:想将多个span标签规划为每行四个的样式。 解决方案:计算每个span的宽、border、margin以及父容器的padding,加起来要恰好等于视口宽度。如果代码里span标签用回车换行分隔开,在页面上会体现出计划之外的间距,可给父容器添加一条font-size:0;每一行最后一个span的margin-right也要设为0。
2017-10-17 10:06:26 2045
原创 解决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 3805
原创 自定义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 411
原创 同行块级元素等高
两个div在同一行,一高一矮,期望二者高度自适应内容,并且高度同为高者的高度。 解决方案:二者的父元素display:table;二者display:table-cell;并且不能有浮动。
2017-10-09 16:40:38 616
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人