07 2016 档案

flex弹性盒模型布局
摘要：容器属性：1.flex-direction:项目的排列方向(1)row 主轴方向排列(2)row-reverse 主轴反方向排列(3)column 纵向排列(4)column-reverse 纵向反方向排列2.flex-wrap:项目的换行方式(1)nowrap:不换(2)wrap:换行，第一行在上 阅读全文
posted @ 2016-07-31 16:19 冯小漂儿 阅读(269) 评论(0) 推荐(0)
媒体查询（pc端，移动端不同布局）
摘要：媒体查询语法： 1.内联写法：and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background：red} //常规的样式} 2.外联写法：当满足屏幕满足条件的时候连接href后的css文件<link='styleshe 阅读全文
posted @ 2016-07-31 15:22 冯小漂儿 阅读(7532) 评论(0) 推荐(0)
css单位：em，rem解释
摘要：em：所有浏览器都符合：1em=16px;1.具有继承性2.em的根元素是body，当设置了根元素的大小时，大小是定义的数字乘以根元素定义的大小值 rem：1rem=16pxrem不具有继承性,其根元素是html,当设置了根元素的大小时，大小是定义的数字乘以根元素定义的大小值 <!DOCTYPE h 阅读全文
posted @ 2016-07-31 15:17 冯小漂儿 阅读(298) 评论(0) 推荐(0)
CSS预处理框架：less，scss
摘要：CSS预处理器：less和sass：CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用 变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更 见简洁，适应性更强，代码更直观等诸多好处。 less框架的应 阅读全文
posted @ 2016-07-31 14:50 冯小漂儿 阅读(515) 评论(0) 推荐(0)
Html5+Css3制作下拉菜单的三种方式
摘要：一、渐变式改变ol的高度 1.外部为ul标签，在每个li里嵌套一个ol列表2.设置外部li左浮动，内部ol标签绝对定位，外部li标签相对定位3.设置ol的高为0，溢出隐藏4.外部li标签:hover 时，设置ol的高度，transition渐变 二、渐变式改变ol 下li标签的高度，同第一种方法，设 阅读全文
posted @ 2016-07-31 13:26 冯小漂儿 阅读(26252) 评论(0) 推荐(0)
BFC
摘要：BFC触发1.根元素2.float3.overflow：auto,scroll,hidden（常用）4.display：table-cell，table-caption，inline-block,flex,inline-flex;5.position:absolut,fixed BFC布局规则1.背 阅读全文
posted @ 2016-07-24 23:56 冯小漂儿 阅读(220) 评论(0) 推荐(0)
蒙版
摘要：蒙版效果：1.插入图片标签2.设置一个半透明的div，并定位，rgba()3.将div与图片覆盖4.将鼠标悬停在div上时，设置隐藏div5.设置div的颜色渐变transition：all linear 5s（all ease-in 5s）,先设置left，right，top,bootom的值，确 阅读全文
posted @ 2016-07-24 23:56 冯小漂儿 阅读(188) 评论(0) 推荐(0)
CSS样式，雪碧，图片替换，渐变小析
摘要：Css基础2： 相对长度单位：em,rem,px,%绝对长度单位：厘米等（不用）颜色单位：rgb,rgb的百分比，16进制（#），颜色名称字体：font-size：为了更好适合点阵，尽量使用偶数font-family：字体font-weight：字体粗细100-900,400=normal，700= 阅读全文
posted @ 2016-07-24 23:55 冯小漂儿 阅读(550) 评论(0) 推荐(0)
本地存储之简单存储
摘要：html5提供了四种在客户端存储数据的新方法，及localStorage,sessionStorage,globalStorage,Web Sql Database.前面三个适用于存储于较少的数据，而Web Sql Database适用于存储大型的复杂的数据。一、简单存储与cookie的区别1.存储 阅读全文
posted @ 2016-07-17 23:00 冯小漂儿 阅读(211) 评论(0) 推荐(0)
html5地理位置定位功能小析
摘要：Geolocationd 基本原理1.GPS GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离，然后综合多颗卫星的数据就可知道接收机的具体位置。适用于具备GPS功能的设备（1）优点：在空旷地区比较准确，覆盖面比较广（2）缺点：需要比较长时间定位，比较耗电池，在室内不太好，需要GPS设备支持 阅读全文
posted @ 2016-07-17 18:11 冯小漂儿 阅读(290) 评论(0) 推荐(0)
二级联动
摘要：上文摘录，下文自己写，区别：个城市列表添加城市的时候方法不同 阅读全文
posted @ 2016-07-08 18:00 冯小漂儿 阅读(144) 评论(0) 推荐(0)
html5新增标签和属性
摘要：结构性标签：<header>头部</header><nav>导航</nav><section>用于表达书的一章或一部分</section><artical>文章</artical><hgroup>标题组</hgroup><footer>底部</footer><aside>摘要，表达对主体内容的补充< 阅读全文
posted @ 2016-07-07 21:47 冯小漂儿 阅读(124) 评论(0) 推荐(0)
cookie小析
摘要：cookie用于存储数据，当用户访问了某个网站（网页）时，我们就可以通过cookie来向访问者电脑上存储数据1.不同的浏览器存放的cookie位置不同，也不能通用2.cookie的存储是以域名的形式进行区分的3.cookie的数据可以设置和读（设置：document.cookie='名字=值'；读取 阅读全文
posted @ 2016-07-03 12:18 冯小漂儿 阅读(178) 评论(0) 推荐(0)
鼠标滚轮事件小析
摘要：一、事件IE/Chrome: onmouseWheel(火狐中无此事件)Firefox： DOMMouseScroll (必须用addEventListener绑定事件)兼容性问题解决：if(oDiv.addEventListener){oDiv.addEventListener('DOMMouse 阅读全文
posted @ 2016-07-03 10:36 冯小漂儿 阅读(140) 评论(0) 推荐(0)
鼠标拖拽小析
摘要：一、原理： onmousedown ==>选择元素 onmousemove ==>移动元素 onmouseup ==>释放元素 二、问题： 拖拽的时候，如果有文字被选中，会产生问题 原因：当鼠标按下的时候，如果页面中有蚊子被选中，那会触发浏览器默认拖拽文字的效果。当拖拽图片也会产生问题。 解决： 标 阅读全文
posted @ 2016-07-02 21:52 冯小漂儿 阅读(213) 评论(0) 推荐(0)
浏览器事件小析
摘要：一、焦点事件焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户输入；我们可以通过一些方式设置焦点：1.点击，2.Tab，3.js；不是所有的元素都能接收焦点，能够响应用户操作的元素才有焦点。事件：onfocus ==>当元素获取焦点时触发onblur ==>当元素失去 阅读全文
posted @ 2016-07-02 11:01 冯小漂儿 阅读(194) 评论(0) 推荐(0)
BOM，文档宽高及窗口事件小析
摘要：（一）BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性一、方法：1. open（，）打开一个新窗口（页面）一参为页面地址url，二参为打开方式如果url为空，默认打开一个空白页面如果打开方式为空，默认打开新窗口方式打开返回值：发挥新打开的窗口的 阅读全文
posted @ 2016-07-01 21:41 冯小漂儿 阅读(169) 评论(0) 推荐(0)
表格、表单操作
摘要：（一）表格操作 方法：tHead ==>表格头tBodies ==>表格正文（可以有多个）(在js中如果不写，自动会添加，易出错)tFoot ==>表格尾rows ==>行cells ==>列eg：oTab.tBodies[0].rows[1].cells[1].innerHTML(获取表格的第一个 阅读全文
posted @ 2016-07-01 21:35 冯小漂儿 阅读(134) 评论(0) 推荐(0)