03 2017 档案
摘要：原文地址：http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序，图片上传，应用地方-修改用户信息的头像。 详细代码： 小程序的wxml代码 小程序对应的js代码 上传： 在chooseWxImage方法的success回调中我
阅读全文
摘要：我们需要一个标识来记录用户的身份的唯一性，在微信中unionId就是我们所需要的记录唯一ID，那么如何拿到unionId就成了关键，我将项目分为小程序和 后台PHP代码两部分来讲。 从小程序代码说起 简单说下小程序的js代码登陆流程 login -> 获取code -> getUserInfo获取i
阅读全文
摘要：兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
阅读全文
摘要：RGBA颜色 red green blue alpha(透明) background:rgba(200, 54, 54, 0.5); ie不支持rgba 加上rgb颜色，然后加 filter:alpha(opacity=50); （会把文字也给透明了） 使颜色透明 不透明黑色： background
阅读全文
摘要：常见的图片格式包含以下几种： *PNG 1996 优点：透明，无损压缩，渐进显示和流式读写，保留图像名称、作者、版权、创作时间 缺点：色彩支持少 PNG8 PNG24 PNG32,ie6不支持。 *JPEG 1992 优点：色彩多 缺点：有损压缩 *GIF 1987 优点：动态图，可透明，体积小。
阅读全文
摘要：标签 <div class="container"> <h4>Tabs</h4> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">home</a></li> <li><
阅读全文
摘要：警告框 <div class="container"> <div class="alert alert-success" role="alert"> 你好，喵星人！ </div> <div class="alert alert-danger" role="alert"> 你好，喵星人！ </div>
阅读全文
摘要：bootstrap分页 <nav> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3<
阅读全文
摘要：媒体对象 <div class="media"> <div class="media-left"> <a href="#"> <img src="imgs/meinv.jpg" class="media-object" width="200" height="200"> </a> </div> <d
阅读全文
摘要：输入框组（input groups） 避免使用select 支持不好，使用输入框组 尺寸根据 input-group-lg input-group-sm来选择 <div class="container"> <div class="input-group input-group-lg"> <span
阅读全文
摘要：基础表单 <form role="form"> <div class="form-group"> <label>email</label> <input type="email" class="form-control" placeholder="user"> </div> </form> <for
阅读全文
摘要：下拉菜单 dropdown 对齐方式： .dropdown-menu-right .dropdown-menu-left <div class="container"> <div class="dropdown"> 默认向下，向上的设置为 .dropup <button class="btn btn
阅读全文
摘要：情景文本颜色 <p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warni
阅读全文
摘要：bootstrap的按钮 1.<a class="btn btn-default" href="#" role="button">link</a> (使用a元素做按钮的时候，必须设置role="button") 2.<button class="btn btn-default" type="subm
阅读全文
摘要：1.基本表单实例 .form-control类的<input> <textarea> <select>元素等都被默认设置宽度属性为width:100% .form-group{ margin-bottom : 15px; } <form> <div class="form-group"> <labe
阅读全文
摘要：代码 <div class="container"> <!--代码标签 <code>--> <p><code><section></code>是h5的一个新的标签</p> <!--用户输入 <kbd>--> <p>想现在输入<kbd>cmd</kbd>命令</p> <!--代码块 <pr
阅读全文
摘要：1.标题 <h1>到<h6> 还有.h1类到.h6类 给内联属性的文本赋予标题的样式 标题内添加<small>标签或赋予.small类元素，标记副标题 <h1>这是一个标题，<small>副标题</samll></h1> 2.页面主题 <p> bootstrap将全局font-size设置为14px
阅读全文
摘要：@media (max-width:767px) { 超小屏幕，手机设备 } @media (min-width:768px) and (max-width:991px) { 小屏幕设备，平板 } @media (min-width:992px) and (max-width:1199px) { 中
阅读全文
摘要：.container .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { wid
阅读全文
摘要：html5的出现，对于web意义重大，它的意图是想把目前web上存在的各种问题一并解决掉。 web浏览器之间的兼容性低， 文档结构不够明确 web应用程序的功能受到限制 世界知名浏览器厂商对html5的支持（微软，google，苹果，Opera，Mozilla） 语法的改变 内容类型 DOCTYPE
阅读全文
摘要：article元素 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。 它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立的插件。 或其他任何独立的内容。 article元素使可以嵌套使用的。 article元素可以用来表示插件。 <article
阅读全文
摘要：header元素 header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面 或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、 搜索表单或相关的logo图片。 <header> <h1>IT最新技术</h1> <a href="http://www.jikexuey
阅读全文
摘要：1.表单内元素的form属性 在html4中，表单内的从属元素必须书写在表单内部， 而在html5中，可以把他们书写在页面上任何地方， 然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于表单了。 <form id="testform"> <input type="te
阅读全文
摘要：1.标签的control属性 在html5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。 <script> function setValue(){ var label=document.getElementById("label"); var txtbox
阅读全文
摘要：<!--figure元素以及figcaption元素--> figure元素是一种组合元素，带有可选标题，figure元素用来表示网页上 一段独立的内容， 将其从网页上移除，不会对网页上其他内容产生任何影响。figure元素表示的内容可以是 图片，统计图格，音频插件，视频插件，代码实例。 figca
阅读全文
摘要：1.url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、 month类型、week类型、number类型、range类型、search类型、tel类型、color类型 <!--url类型--> <form> <input name="url
阅读全文
摘要：在IE页面的head标签里面加入 <!-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-> 让IE浏览器支持css3的方法 .box { -moz-border
阅读全文
摘要：1.range对象基本概念 一个range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。 range对象方法 selectNode 将range对象的起点指定为某个节点的起点，将range对象额重点指定为该节点的终点。 使range对象所代表的区域中包含该节点。该
阅读全文
摘要：1.音频播放 audio(音频) html5提供了播放音频文件的标准 <audio src="anli.mp3" controls="controls">您的浏览器不支持</audio> 自定义控件 <button onclick="clickA()">播放/暂停</button> <audio s
阅读全文
摘要：HTML5拖放 1.HTML5拖放：拖放（drag和drop）是HTML5标准组成部分。 2.拖动开始：ondragstart : 调用了一个函数，drag(event),它规定了被拖动的数据 3.设置拖动数据：setData():设置被拖数据的数据类型和值 4.放入位置：ondragover:事件
阅读全文
摘要：SVG介绍 1.什么是svg svg指可伸缩矢量图形（Scalable Vector Graphics ） svg用来定义用于网络的基于矢量图形 svg使用XML格式定义图形 svg图像在放大或改变尺寸的情况下其图形质量不会有损失 svg是网为王联盟的标准 2.svg的优势 svg图像可通过文本编辑
阅读全文
摘要：客户端存储数据两种方法 1.localStorage 没有时间限制的数据存储 2.sessionStorage 针对一个session的数据存储（当浏览器被关闭掉之后，数据就会被清楚掉） 与cookie做对比 之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由 每个
阅读全文
摘要：HTML5 File API简介 HTML5File API协议族 Directories and System 文件系统和目录读取 FileWriter 写入文件 FileReader 读取文件 File API 页面选择文件处理 实现文件列表功能 sds 操作栏的创建及WebFont的使用 sd
阅读全文
摘要：1.什么是应用程序缓存 HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网链接时进行访问。 2.应用缓存的优势 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源 3.实现缓存 如需启用应用程序缓存，
阅读全文
摘要：columns 分栏 值：column-width:设置每列的宽度 column-count:设置列数 例：columns{200px 3} 列数和宽度固定 columns{200px} 列宽固定，根据容器宽度动态分布列数 column-width 默认auto,定义列宽，不能为负值 column-
阅读全文
摘要：transformtransform的中文翻译就是变换，改变，改观，转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变。 他的属性（变换方式）有：平移，旋转，缩放，扭曲translate(10px,20px;) 指定对象的2D平移，第一个参数对应X轴，第二个参数对应Y轴。如果第二个
阅读全文
摘要：经典的两个布局方式有圣杯布局和双飞翼布局，圣杯布局主要用在国外，双飞翼布局是淘宝的UED团队开发的，优化了圣杯布局。 主要解决页面分不同列显示的问题， 一般只做页面的时候，我们分三部分，左边，中间，右边，但是浏览器加载页面时，是从上到下加载，但我们需要先加载中间部分，这个时候就需要我们好好布局了，
阅读全文
摘要：transition 它的中文翻译就是过渡，转变，变迁，在css中，用来设置元素或对象变换时的过渡。 由一个样式变成另一个样式的过程。 他有四个值： transition-property 设置对象中参与过渡的属性 transition-duration 设置对象过渡的持续时间 transition
阅读全文
摘要：animation 设置对象的动画特效 有6个主要的值 animation-name 动画名称 animation-duration 动画持续时间 animation-timing-function 动画过渡类型 linear:线性过渡 ease:平滑过渡 ease-in:由慢到快 ease-out
阅读全文
摘要：1.雪碧图 2.滑动门 3.css3渐变背景 background-size: 设置背景图片大小。数值px 百分比 cover(拉伸) contain等关键字 background-repeat: 背景图重复 no-repeat repeat-x repeat-y background-positi
阅读全文
摘要：弹性盒模型（Flexible Box或Flexbox）是一个css3新增布局模块， 官方称为CSSFlexible Box Layout Module,用于实现容器里项目的对其、方向、排序。 弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。 1.弹性容器（
阅读全文
摘要：<style> .container{ column-width:250px; -webkit-column-width:250px; column-gap:5px; -webkit-column-gap:5px; } .container div{ width:250px; margin:5px
阅读全文
摘要：响应式布局（responsive web design）指的是在网页开发过程中针对不同设备开发一套网站，然后根据用户行为 以及设备环境（系统平台、屏幕尺寸、屏幕定向等）自适应地显示不同布局。 响应式布局的核心是媒体查询。媒体查询（media query）是获取用户行为和设备环境、然后提供相应的css
阅读全文
摘要：<h1>极客学院相关课程</h1> <table class="responsive"> <thead> <tr> <th>课程序号</th> <th>课程名称</th> <th>课程操作</th> </tr> </thead> <tbody> <tr> <td class="number">150
阅读全文
摘要：background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置图片的起始位置 background-repeat 设置背景图
阅读全文
摘要：响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。 同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。 常用的实现方式： 1.用srcset和sizes加载不同图片 <img sizes="(min-width:40em) 80vw, 100vw" sr
阅读全文
摘要：css文字属性定义文本的字体系列，大小，加粗，风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体的风格 font-variant 以小型大写字体或正常字体显示文本 font-weight 设置字体的粗细 css3文字相关样式 1.给文
阅读全文
摘要：css列表属性允许你放置，改变列表标志，或者将图像作为列表项标志 list-style 简写列表项 list-style-image 列表项图片 list-style-position 列表标志位置 （inside outside）一个靠里面，一个靠外面 list-style-type 列表类型
阅读全文
摘要：1.css链接的四种状态 a:link 普通的、未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻 2.常见的链接样式： text-decoration 属性大多用于去掉链接中的下划线 3.设置背景颜色： backgrou
阅读全文
摘要：1.表格边框 table,tr,th,td{ border:1px solid #666; } 2.折叠边框 table{ /*合并边框*/ border-collapse : collapse; } 3.表格宽高 table{ width:600px; height:400px; } 4.表格文本
阅读全文
摘要：css轮廓主要是用来突出元素的作用 outline 设置轮廓属性 outline-color 设置轮廓的颜色 outline-style 设置轮廓的样式 outline-width 设置轮廓的宽度
阅读全文
摘要：css定位（改变元素在页面上的位置） 普通流：元素按照其在html中的位置顺序决定排布的过程 浮动： 绝对布局： position 把元素放在一个静态的、相对的、绝对的、或固定的位置中 static(偏移量不起作用) relative absolute fixed top 元素向上的偏移量 left
阅读全文
摘要：1.内边距（内边距在content外，边框内） 内边距属性： padding 设置所有边距 padding-bottom 底边距 padding-left 左边距 padding-right 右边距 padding-top 上边距 2.边框 border-style 定义边框样式 单边框样式 bor
阅读全文
摘要：1.元素选择器 最常见的选择器就是元素选择器，文档的元素就是最基本的选择器 h1{......} a{........} 2.选择器分组 h1,h2{.......} 通配符 * 3.类选择器详解 类选择器允许以一种独立与文档元素的方式来指定样式 .class{.......} 结合元素选择器 a.
阅读全文
摘要：对齐操作 1.使用margin属性进行水平对齐 margin-left:auto; margin-right:auto; 2.使用position属性进行左右对齐 3.使用float属性进行左右对齐 尺寸操作 height 设置元素高度 line-height 设置行高 max-height 设置元
阅读全文
摘要：强制换行： word-break: break-all; 只对英文起作用，以字母作为换行依据 word-wrap: break-word; 只对英文起作用，以单词作为换行依据 white-space: pre-wrap; 只对中文起作用，强制换行 禁止换行： white-space: nowrap;
阅读全文
摘要：text-transform: none 默认 capitalize 每个单词以大写字母开头 uppercase 仅有大写字母 lowercase 无大写字母，仅有小写字母 inherit 继承父元素的text-transform属性
阅读全文
摘要：1.javascript输出 JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 <script> document.write("hello world!"); </script> 插入，输出。 document.getElementById("pid").innerHT
阅读全文
摘要：1.ie6的3像素bug 当浮动元素遇到非浮动元素的时候，会有3px的缝隙，在ie6浏览器下的时候。 .menu{ height:200px; width:150px; float:left; _margin-right:-3px; /*解决方法，只针对ie6*/ } +padding-left:5
阅读全文
摘要：了解函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 <script> function demo(a,b){ var sum=a+b; return sum; } var v1=demo(20,10); alert(v1); </script> <script> function
阅读全文
摘要：异常捕获 1、异常： 当JavaScript引擎执行JavaScript代码时，发生了错误，导致程序停止运行 2、异常抛出： 当异常产生，并且将这个异常生成一个错误信息 3、异常捕获： try{ 发生异常的代码块； }catch(err){ 错误信息处理; } <script> function d
阅读全文
摘要：DOM操作HTML 1.改变HTML输出流： 注意：绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档 2.寻找元素 通过id找到HTML元素 通过标签找到HTML元素 3.改变HTML内容 使用属性：innerHTML 4.改变HTML属性 使用属性：attribute
阅读全文
摘要：事件流 事件流 描述的是在页面中接受事件的顺序 事件冒泡 由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档） 事件捕获 最不具体的节点先接收事件，而最具体的节点应该是最后接收事件 事件处理 1.HTML事件处理 直接添加到HTML结构中 2.DOM0级事件处理 把一个函数赋值给一个事
阅读全文
摘要：什么是对象 1.什么是对象 JavaScript中的所有事物都是对象：字符串、数值、数组、函数... 每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象： 定义并创建对象实例 使用函数来定义对象，然后创建新的对象实例 <script> people=new Object();
阅读全文
摘要：Jquery是一个优秀的js库，它简化了js的复杂操作，不需要关心浏览器的兼容问题，提供了大量实用方法。 Jquery的写法 方法函数化 链式操作 取值赋值合体] $(“p”).html(); 取值 $(“p”).html(‘hello’); 赋值 （当一组元素的时候，取值是一组中的第一个，赋值是一
阅读全文
摘要：常见的图片格式包含以下几种： *PNG 1996 优点：透明，无损压缩，渐进显示和流式读写，保留图像名称、作者、版权、创作时间 缺点：色彩支持少 PNG8 PNG24 PNG32,ie6不支持。 *JPEG 1992 优点：色彩多 缺点：有损压缩 *GIF 1987 优点：动态图，可透明，体积小。
阅读全文
摘要：一、flex布局基础 二、相对定位和绝对定位 flex的容器和元素 主轴（左-右），交叉轴（上-下） flex容器属性详解 flex-direction 决定元素的排列方向（默认row column） flex-wrap 决定元素如何换行（排列不下时） （nowrap不换行 wrap换行 wrap-
阅读全文
摘要：@media Media Queries(媒体查询)，他的作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。 其实就是，允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 screen（屏幕）是媒体类型里的一种，css2.1定义了10种媒体类型。 and被称为关键
阅读全文
摘要：1.使用了bootstrap前端框架，使页面布局更加简洁，提高了前端页面的开发效率 主要用到的了bootstrap的删格系统，模态框，还有一些小的属性 还有就是页面的布局，一定要增强语义化，提高代码的可读性， 2.关于布局的命名规范， 最好减少每一个元素的类名定义，最好的方法就是给最外面的元素定义一
阅读全文
摘要：1.head部分添加icon图片 <link rel="Shortcut Icon" href="imgs/myicon.ico"> 2.不同设备尺寸的媒体查询 @media(max-width:767px){ } @media(min-width:768px)and(max-width:991px
阅读全文
摘要：columns 分栏 column的中文意思就是栏的意思，在html中，作用是分列，把一块内容相同比例均匀的分成一块一块的列，想报纸的内容似的，一篇文章在一张内容上分成好几栏那样显示，它的属性有 1.columns: columns-width column-count; 每一列的宽度和分成多少列；
阅读全文
摘要：使用的前端框架 bootstrap框架 Bootstrap是一个响应式的框架 我们在使用的时候主要使用的是它的网格系统， 1.bootstrap布局 布局容器：.container（用于固定宽度并支持响应式布局的容器） .container-fluid（用于100%宽度，占据全部视口的容器） @me
阅读全文
摘要：word-wrap: break-word; word-break: break-all;
阅读全文
摘要：offset() 只对可见元素有效，获取匹配元素在当前视口的相对偏移，返回的对象有两个整型属性，top和left,像素计算； position() 相对父元素的偏移，position.left position.top scrollTop() 相对滚动条顶部的偏移，（可见、隐藏元素都有效） scro
阅读全文
摘要：text-transform: none: 默认 不设置，全是小写 capitalize: 每个单词以大写字母开头 uppercase: 全部是大写字母 lowercase: 全部是小写字母 inherit: 继承父元素的text-transform属性值
阅读全文
摘要：global 全局 style.css containers: 1400px;容器宽度 xlarge 超大屏（media: max-width:1680px） style-xlarge.css containers:1200px;容器宽度 large 大屏 （media: max-width:128
阅读全文
摘要：@media (min-width:1200px){ } @media (min-width:992px) and (max-width:1199px){ } @media (min-width:768px) and (max-width:991px){ } @media (max-width:76
阅读全文
摘要：ajax (Asynchronous JavaScript and XML) 异步Javascript和XML 用javascript异步形式去操作XML（ajax是javascript的一个内置对象，用来请求数据） 无刷新页面的情况下，获得数据，通过Ajax对象发送请求（可加载某一片段数据）、 使
阅读全文
摘要：$(document).ready(function(){ var p=0,t=0; $(window).scroll(function(e){ p = $(this).scrollTop(); if(t<=p){ //下滚 }else{ //上滚 } t = p; //更新上一次scrollTop的值 }) })
阅读全文
摘要：方法一：css实现居中（不足：需要提前知道元素的宽度和高度） 方法二：css3实现水平垂直居中（无论元素的尺寸是多少，都可以居中，不过只支持IE8以上的浏览器，移动端可忽略） 方法三：auto实现居中
阅读全文
摘要：例： 参数及含义： animation-name: 动画的名字 animation-duration: 动画完成一个周期所花费的秒数，默认是0 animation-timing-function: 规定动画的速度曲线，默认是ease(动画以低速开始，然后加块，在结束前变慢)； linear(动画从头
阅读全文
摘要：.upload_files{ position: relative; overflow: hidden; } .upload_icon{ position:absolute; display:block; outline:none; filter:alpha(opacity=0); -moz-opacity:0; ...
阅读全文
摘要：json => javascript object notation 什么是json 数据交换的文本格式，简单说，每个Json对象，就是一个值，要么是简单类型的值，要么是复合类型的值，但是只能是一个值，不能是两个或更多的值，这就是说，每个Json文档只能包含一个值。 (ie7及以下浏览器不支持jso
阅读全文
摘要：//滚动到顶部function initScrollToTop(){ $("html,body").animate({scrollTop: 0},1000);}
阅读全文
摘要：$("form").submit(function(){ $(":submit",this).attr("disabled","disabled");});
阅读全文
摘要：//重写alertwindow.alert = function(str){ var alertFram = document.getElementById('alertFram'); var shield = document.createElement("DIV"); shield.id = "
阅读全文
浙公网安备 33010602011771号