- 博客(129)
- 收藏
- 关注
RSS订阅转载 微信小程序组件开发
三，创建组件1，组件html部分dialog.wxml<view class='dialog-container' hidden="{{!isShow}}"> <view class='dialog-mask'></view> <view class='dialog-info'> <...
2019-09-10 14:53:00
206
转载 css3 单行文字溢出，多行文字溢出
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:200px;...
2019-07-05 11:21:00
177
转载 表格布局
<table class="table"> <thead> <tr class="text-center"> <th>选择</th> <th>姓名</th> <th>性别</th...
2019-01-18 10:42:00
186
转载 对象设置默认属性
const menuConfig = { title:null, body:'Bar', buttonText:null, cancellable:true }; function createMenu(config){ config.title=config.title...
2019-01-08 09:28:00
272
转载 按钮样式
基础样式 .btn{ display:inline-block; border: 1px solid transparent; padding:6px 12px; border-radius: 4px; font-weight: 400; ...
2019-01-03 21:09:00
131
转载 判断一个json是否为空
一，jQueryjQuery.isEmptyObject()函数用于判断指定参数是否是一个空对象。jQuery.isEmptyObject()函数的返回值为Boolean类型，如果指定的参数是空对象，则返回true，否则返回false。jQuery.isEmptyObject( object )jQuery.isEmptyObject()源码如下：isEm...
2018-12-07 10:21:00
4754
转载 vue高仿饿了么（三）
组件拆分（1）header组件有一个static目录，在目录下，放置初始化css样式----reset.css/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, sp...
2018-11-25 21:55:00
170
转载 vue高仿饿了么APP（三）
一·需求分析二，制作css字体图标的制作和使用前面已经有人做过总结，我就直接引用了css字体图标的制作和使用。三，项目目录结构设计1,每一个组件都单独建立一个文件夹，例如商品页建立goods文件夹，goods文件夹放商品页组件，goods.vue以及商品页需要用到的图片等资源。就近维护。在src目录下再新建一个common文件夹，存放公共的js...
2018-11-18 20:52:00
234
转载 vue高仿饿了么APP（二）
这里我直接跳过vue-cli的安装。一，vue.js代码是如何运行的？1，进入页面，首先加载index.html和main.js文件。① index.html文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta n...
2018-11-17 22:39:00
108
转载 vue高仿饿了么APP（一）
在网上找了一个vue的视频教程---高仿饿了么，讲得不错，自己也跟着讲师做了一遍，现在来帮自己整理，总结一下，加深对vue的理解。一，功能技术分析1，利用vue-resource实现前后端数据交互。2，使用vue-router做前端路由实现单页应用。3，实现列表滚动，--第三方js库better-scroll4，收藏商家功能，使用html5的localstorage...
2018-11-17 20:09:00
225
转载 jQuery实现复选框单选
这里职务只能勾选一个，所以我打算实现复选框只能单选的功能。实现思路：遍历每一个checkbox，如果有一个选中，其他的就默认未选中状态，从而实现checkbox单选功能。js代码： //checkbox实现单选 $("input[name='job']:checkbox").each(function(){ $(this...
2018-11-05 15:32:00
629
转载 css圣杯布局和双飞翼布局
一，圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。方法一，圣杯布局实现效果：左边固定宽度200px,右边固定宽度300px,中间自适应。实现方法：主体部分三个子元素都设置浮动，左边子元素设置margin-left:-100%,右边子元素设置margin-left:-200px;html结构：<div class="containe...
2018-09-26 11:21:00
116
转载 CSS BFC
BFC---块状格式化上下文创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。块格式化上下文对浮动定位（参见float）与清除浮动（参见clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于...
2018-09-05 14:47:00
81
转载 position--absolute与普通元素之间的关系
一，普通元素与绝对定位情况一：满足条件：1，父元素不做任何设置1，普通元素与绝对定位元素是兄弟关系2.普通元素在上面，绝对定位元素在下面3，绝对定位元素，不设置任何top,bottom,left,right值html结构：<div class="parent"> <div class="header"></div&g...
2018-09-04 15:28:00
312
转载 js中的bool值
js中有6个值为false，分别是: 0, '', null, undefined, NaN 和 false, 其他(包括{}, [], Infinity)为true.特别注意 其中'0'字符串类型的0，它的bool值为true。总结js中数据类型的bool值及其比较转载于:https://www.cnblogs.com/qianxunpu/p/944999...
2018-08-09 16:47:00
1134
转载 元素的vertical-align属性
一，vertical-algin元素的属性值：二，vertical-align只对以下元素起作用：1，inline2,inline-block3,inline-table基本的inline元素都是标签裹着文字。inline-block元素：是在行内中的块级元素。他们可以有宽度和高度(通常情况下，这取决于他们的内容)。同样也有padding，margin，...
2018-07-31 17:15:00
199
转载 响应式图片
响应式图像：<div class="img-box"> <img class="img-responsive" src="assets/images/zbl01.jpg"/></div>在下面的代码中，可以看到img-responsive class为图像赋予了max-width:100%;和height:auto;属性，...
2018-07-18 17:35:00
110
转载 布局(3)：图片列表布局
我真的菜啊，很少写布局这方面的，最近写公司的官网真的觉得自己好弱啊，不过同时也学习了大量的知识，学过不总结，跟咸鱼有啥区别！两种常用的切图方案：1，float布局2，display:inline-block布局。例如这3行3列的图片列表为例子介绍两种常用的切图方案：一，float布局html结构：<ul> <l...
2018-07-18 16:31:00
568
转载 css最佳实践
一，设置文字不可见 .text-hide{ font:0/0 a; color:transparent; text-shadow: none; background-color:transparent; border:0 }...
2018-07-06 10:01:00
166
转载 HTML最佳实践
一，HTML最佳实践1，在构建页面的时候，经常会要添加图片，但是图片是以<img>元素存在？还是背景图方式存在？答：如果图片是作为页面内容的一部分，则应该使用<img>元素，如果图片是起装饰作用，则应该使用背景图方式。2，给空标签中添加隐藏文字，用于说明标签的实际功能（一般设置text-indent来达到隐藏文字的目的如：text-indent:-99...
2018-07-05 23:21:00
152
转载 响应式导航
1，利用bootstrap来实现响应式的导航条bootstrap中的导航组件都依赖同一个.nav类，状态类也是共用的。要实现一个导航条在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。导航条内所包含元素溢出由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是...
2018-07-05 14:42:00
277
转载 网页预加载层效果（二）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-col...
2018-07-05 11:22:00
174
转载 Bootstrap 滚动监听（Scrollspy）插件（一）
1，网页要实现的效果----，会根据滚动条的位置自动更新对应的导航目标1，滚动监听（Scrollspy）插件，即自动更新导航插件。会根据滚动条的位置自动更新对应的导航目标其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加.activeclass。如果您想要单独引用该插件的功能，那么您需要引用scrollspy.js。或者，正如Bootstrap 插件概览一章中所提...
2018-07-05 10:40:00
248
转载 关于html中img的一些知识点
<img> 标签的 height 和 width 属性设置图像的尺寸。响应式图像div或img图片高度随宽度自适应例子，这个图像的大小是150px*150px。现在我们让他自适应于父级元素box的大小html：<div class="wrap"> <div class="box"> <im...
2018-06-27 16:44:00
175
转载 布局（1），头尾固定，中间滑动的布局方式
方法一，先来实现页面头尾固定，中间滑动的效果1，为页面的body部分设置height:100%,以及overflow:hidden,即禁用页面原生的滚动，保证只会显示一屏的内容。2，固定区域采用绝对定位。html代码：<header id="header">大白课堂</header><section id="wrap">...
2018-05-17 16:46:00
732
转载 响应式开发
什么是响应式?响应式的页面在不同的屏幕有不同的布局，换句话说，使用相同的html在不同的分辨率有不同的排版。反正我的博客没人看，愉快的甩链接吧响应式开发心得转载于:https://www.cnblogs.com/qianxunpu/p/9051889.html...
2018-05-17 16:44:00
57
转载 移动端事件
一，移动端web新增touch事件最基本的touch事件包括4个事件：touchstart:当在屏幕上按下手指时触发。touchmove:当在屏幕上移动手指时触发。touchend:当在屏幕上抬起手指时触发。touchcancel:当一些更高级别的事件发生的时候（如电话接入或者弹出信息），会取消当前的touch操作，即触发touchcancel.一般会在touchca...
2018-05-17 16:44:00
80
转载 弹性盒模型
一，概念弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同屏幕大小及设备类型时确保拥有恰当的行为的布局方式。二，目的引入盒模型的目的是提供一种更加有效的方式来对一个容器的子元素进行排列，对齐和分配空白空间。三 ，css3弹性盒子内容弹性盒子由弹性容器（Flex container）和弹性子元素(Flex item)组成。弹性容器通过设置displa...
2018-05-17 16:43:00
87
转载 拼接html字符串，onClick传递两个参数写法
<a href="javascript:;" onclick=monitorDetails("' + v.baseInfoId + '","' + v.projectId + '"); style="color:#7081ff;font-size:18px;">点击查看实验详情</a>转载于:https://www.cnblogs.com/qia...
2018-05-14 15:49:00
902
转载 Web打印设置
一，A4纸尺寸1,A4纸尺寸：210mm*297mm2,A4纸的像素和分辨率根据A4纸尺寸是210毫米×297毫米，而1英寸=2.54厘米，我们可以得出当分辨率是多少像素时，得出A4纸大小尺寸为多少毫米。如下是我们较长用到的规格尺寸：当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595；分辨率是96像素/英寸时，A4纸的尺寸的图...
2018-05-08 09:46:00
752
转载 常用meta设置
1，设置viewport（视口）<meta name="viewport" content="width=device-width,user-scalable=no"> 这句话设置viewport的宽为设备的宽，禁止用户进行缩放a) width: 宽度(数值/device-width) 默认为980b)height 高度（数值/device-heig...
2018-04-28 21:14:00
253
转载 定位position详解:relative与absolute
一,position:relative相对定位1，不会改变行内元素的display属性3，并没有脱离普通流，只是视觉上发生的偏移。html元素：<div class="box"> <div class="box2"></div></div>css清单：.box{ ...
2018-04-25 15:29:00
427
转载 JQuery性能优化
1，用对选择器最快的选择器：id选择器和元素标签选择器下面的语句性能最佳：$('#id')$('form')$('input')遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。（3）最慢的选择器：伪类选择器和属性选择器先来看例子。找出网页中所有的隐藏元素，...
2018-04-23 10:38:00
69
转载 jQuery $.ajaxSetup方法
jQuery.ajaxSetup()函数用于设置Ajax的全局默认设置。该函数用于更改jQuery中AJAX请求的默认设置选项。之后执行的所有AJAX请求，如果对应的选项参数没有设置，将使用更改后的默认设置。该函数属于全局jQuery对象。2，示例说明//设置AJAX的全局默认选项$.ajaxSetup( { url: "/index.html" , ...
2018-04-12 15:28:00
480
转载 web移动端视口
一，什么是视口？ 以前页面是直接丢到浏览器里面就直接运行了，但是现在移动端，默认会给页面添加了一个中间层，就是页面和浏览器中间会介入一个第三者，就是视口，也就是说视口会把页面包裹起来然后在放到浏览器里面进行渲染，而视口默认的大小一般是980，会比手机的物理设备的尺寸要大，同时视口会自动缩小到手机的屏幕大小，这就是为什么一个PC端的页面扔到移动端的话并没有出现滚动条，而是缩小的本质原...
2018-03-21 21:57:00
271
转载 web移动端开发
第一章：移动端入门第二章：移动端布局实战第三章：响应式布局实战第四章：移动端事件第五章：transform详解第六章：封装移动端的自定滚动条转载于:https://www.cnblogs.com/qianxunpu/p/8619719.html...
2018-03-21 21:15:00
66
转载 表格布局
一般css表格布局代码如下： <style> table{ border-collapse:collapse; border-spacing:0; border:1px solid #c61732; } th{ ...
2018-03-16 17:08:00
181
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人