lixiaohong2012-CSDN博客

原创 js日常小笔记

一、getElementsByClassName h5中新增的方法，但是只有较新的浏览器才支持它，现在使用DOM方法来实现，能适用于新老浏览器function getElementsByClassName(node,classname) { if(node.getElementsByClassName) { //使用现有方法 return node.g

2017-04-11 20:47:27 626 1

翻译兼容性问题

一、【解决】IE6、7中SELECT标签高度的兼容性修复 (select需要被多嵌套两层标签，一层用来遮挡select的默认边框[在IE6、7中设置border:0px也是无效的，高版本可用]，另一层用来模拟”高度改变后的“select边框)<style type="text/css">.standard_select{ /*边框*/ display:inline-block; b

2017-05-08 12:42:11 309

原创响应式网站实战学习

一、必须在样式表头部最先声明,引入外部字体，尽量少用第三方cdn，下载到本地再引入css@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oswald:300,400,700');

2017-05-04 09:30:16 894

原创 jQuery高级编程

数组操作（1）.isArray()方法检查一个对象是否是一个数组之外（2）.makeArray()方法将一个类似于数组的对象转换为一个真正的数组（3）.merge()方法从第2个数组中获取元素，并将这些元素追加到第一个数组中，并保留两个数组中元素的顺序（4）.inArray()方法用于检查数组中是否存在某个指定的值（5）.unique()方法是从DOM元素的数组中移除重复的元素

2016-09-07 16:35:00 998

原创移动端Web开发

移动web调试使用chrome浏览器手机web页，和PC端web页其实差别不大。主要体现在以下几点： 1、移动web页需要在head里面加上这一句：<meta name="viewport" content="width=device-width, initial-scale=1.0" />。其作用是声明页面宽度为设备宽度，不允许缩放。具体用法请自行百度。 2、移动Web页尽可能使用百分比设置

2016-07-25 10:19:25 796

原创玩转Bootstrap（JS插件篇）

模态弹出框一次性导入：Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。具体使用如下（或见右侧代码编辑器28-29行）：<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery --><script src="http://li

2016-07-11 17:36:59 16547 5

转载 CSS 选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 “CSS” 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）

2016-07-04 09:51:44 429

bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：<script src="https://oss.maxcdn

2016-06-30 14:13:08 2247

原创 jQuery基础修炼圣典—事件篇

click与dbclick事件 jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。

2016-06-22 13:47:23 465

原创 jQuery基础修炼圣典—动画篇

隐藏元素的hide方法//点击buttom1 直接隐藏 $("button:first").click(function() { $("#a1").hide() });//点击buttom2 执行动画隐藏 $("button:last").click(function() { $("#a2").hide(

2016-06-22 11:06:32 473

原创盒子中的margin问题

1、行内元素的margin 垂直margin不起作用水平margin值为第一个元素的margin-right加上第2个元素的margin-left,如同所示 2、块级元素之间的竖直margin 两个块级元素之间的垂直margin是第一块的margin-bottom与第二块的margin-top两者的较大值，如下图所示 3、嵌套盒子之间的margin 父子关系，当一个div块包含在另外一

2016-05-05 15:07:29 951

转载 'display'、'position' 和 'float' 的相互关系

转换对应表：这一节是为了调和三种布局和框形成的关键特性( display )之间的关系而设。总的来说，可以把它看作是一个类似优先级的机制， “position:absolute” 和 “position:fixed” 优先级最高，有它存在的时候，浮动不起作用，’display’ 的值也需要调整；其次，元素的 ‘float’ 特性的值不是 “none” 的时候或者它是根元素的时候，调整 ‘displ

2016-05-05 11:06:01 1029

原创 scrollHeight、clientHeight、offsetHeight使用区别

在IE中 scrollWidth:获取对象的滚动宽度 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTo

2016-05-05 09:54:54 511

原创跨平台的移动Web开发实战（HTML5+CSS3)

标记-moz-、-webkit-、-o-和-ms-的解释 -moz-：代表Firefox浏览器特有的属性 -webkit-:代表webkit浏览器特有的属性，Chrome、Safari浏览器采用WebKit内核 -o-:代表Opera浏览器特有的属性 -ms-:代表IE浏览器特有的属性

2016-05-04 10:15:01 3014

原创【总结】CSS/CSS3常用样式小结——兼容性

1.html中两张图横向回车导致间隙,怎么才能去除成为无间隙？例如：div 宽300px ; img 宽100px; border:0px;<div><img /><img /><img /></div>//上面情况刚好显示三张图<div><img /><img /><img /></div>这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。解决办法就是让图片浮动。2.css ie

2016-04-27 10:35:51 2151

转载浅尝HTML5之canvas

HTML5新标签HTML5新引入header，footer，article，section，aside和nav，audio,datalist,details,video,progress,embed等标签section 标签用于标识页面上的重要内容部分。该标签有点类似于将一本书分成几个章节。article 标签标识了 Web 页面中的主要内容。aside 标签表示arcitle元素内容之外的、与ar

2016-04-27 09:51:29 472

原创 JavaScript权威指南

一、添加事件监听器window.addEventListener("load",function(){......},false};window.attachEvent("onload",function(){......}); //IE8以及之前的浏览器二、Window对象（1）计时器可以用来注册在指定的时间之后单次或重复调用的函数。 Window对象的setTimeout()方

2016-04-26 10:35:56 587

原创 jQuery对表单、表格的操作及更多应用

一、单行文本框应用——获取和失去焦点改变样式$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); });}

2016-04-21 13:47:16 623

原创全面理解line-height与vertical-align

前面的话　　line-height、font-size、vertical-align是设置行内元素布局的关键属性。这三个属性是相互依赖的关系，改变行间距离、设置垂直对齐等都需要它们的通力合作。在CSS字体里面已经详细介绍了font-size的相关内容，本文将主要介绍line-height与vertical-align。 line-height 定义　　line-height行高是指文本行

2016-04-21 11:12:59 455

原创 CSS3的学习总结

1、强大的选择器新增的属性选择器、结构伪类选择器、UI元素状态伪类选择器、其他新增选择器2、增强的文本和颜色功能text-shadow 定义文本阴影或模糊效果text-overflow 定义省略文本的处理方式word-wrap 定义文本超过指定容器的边界时是否断开转行RGBA RGBA是在RGB的基础上增加一个透明度(A)的设置opacity 定义颜色的不透

2016-04-18 17:35:18 1097

原创 CSS Sprite(s)、图片优化及实例应用那些事

CSS Sprites实现方法首先将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位。CSS Sprites技术要点总结 1、小图片整合时，按照从上到下的顺序，而不要一个图片挨着一个图片从左到右排列。 2、小图片整合时尽量靠最左边或者最右边。综合1则是沿着最左边或者最右边的两侧开始由上而下整合图片。 3、不建议在不同小图片上下留间隔，减小文件的大小。 4、把图片中颜

2016-04-18 17:01:30 413

转载清除浮动的七种方式方法（实例代码讲解）

实例代码（未清除浮动）：<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main div {float: left;width: 200px;height: 200px;margin-ri

2016-04-18 16:08:54 563

原创 jQuery学习笔记———jQuery中的事件和动画

1、加载DOM$(window).load(function(){ //加载window对象所绑定的处理函数})2、简写方式 $(document).ready(function(){ //编写代码 })可写成下面代码：$(function(){//编写代码}）3、事件绑定 $(selector).bind(event,data,function); 第1个参数是事件类型，包括：

2016-04-15 09:58:33 579

原创 jQuery学习笔记-----jQuery中的DOM操作

jQuery选择器 1、层次选择器$("div span">——选取<div>里的所有的<span>元素，返回集合元素$("div>span">——选取<div>元素下元素名为<span>的子元素，返回集合元素$(".one+div">——选取class为one的下一个<div>同辈元素，返回单个元素,等价于$(".one").next("div")方法$("#two~div">——选取id

2016-04-10 23:07:00 541

原创毕业设计笔记

Myeclipse使用开发项目实战第一章开发环境的搭建 1下载和安装JDK,JDK是Java程序开发最核心的工具，通过JDK可以对Java程序的编译和运行。（记住安装路径）2下载和安装MySQL数据库，主流数据库很多，这里选择MySQL数据库可降低成本，体积非常小，速度非常快。（设置用户名和密码要记住，后面会用到）3下载和安装Tomcat服务器，Tomcat服务器是由Apache开源组织开发并

2016-04-08 21:05:45 616

原创 DIV+CSS检测技巧和应用

DIV+CSS检测技巧 1、检查HTML元素是否有拼写错误、是否忘记结束标记经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2、检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的 } 等。3、确定错误发生的位置假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。4、利用border属性确定出

2016-04-04 20:09:53 554

原创 css样式

background:背景颜色背景图片 repeat attachment position; font:font-style font-variant font-weight font-size font-family; 浮动与清除 clear none 允许两边浮动【默认】 left 不允许左边浮动

2016-04-03 23:38:01 576

转载 javascript 闭包

闭包，是 javascript 中重要的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是ECMA规范给的定义，如果没有实战经验，你很难从定义去理解它。因此，本文不会对闭包的概念进行大篇幅描述，直接上干货，让你分分钟学会闭包！1 闭包–爱的初体验在接触一个新技术的时候，我首先会做的一件事就是：找它的demo code。对于码农们来说，代码有时候比自然语言更能理解一个事物。其实，闭包无处不在

2016-03-30 13:40:41 380

转载 JavaScript 开发的45个经典技巧

JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框，也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员，现如今已成了

2016-03-30 13:39:23 372

原创 CSS深入理解之relative

position:relative（老大）定位特性： 1.相对自身 2.无侵入（作用：自定义拖拽）层级 1.提高层叠上下文 2.新建层叠上下文与层级控制position:relative对限制position:absolute的限制作用： 1.限制left/top/right/bottom定位； 2.限制z-index层级；

2016-03-30 13:34:31 692

原创前端工程师必备的PS技能——切图篇

Photoshop界面设置移动工具快捷键——v 注意自动选择选项智能参考线——视图->显示标尺——Ctrl+R 窗口->信息（面板选项中，第二种颜色信息模式为RGB颜色，标尺单位为像素，勾上文档尺寸）、窗口->历史记录、窗口->字符、窗口->图层更改首选项中单位与尺寸中的标尺和文字都是以像素为单位窗口->新建工作区->Web切图（存储下来）（窗口-工作区-Web切图）P

2016-03-30 11:19:28 2369

转载《javascript Dom编程艺术》学习笔记

总结： DOM方法创建元素节点： createElement（），搭配 appendChild()方法。例如：var p = document.createElement("p"); document.body.appendChild(p); 创建文本节点： createTextNode() , 例如： var text = document.createTextNode("Hel

2016-03-29 14:37:54 467

转载 WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的m

2016-03-29 14:05:42 2309

转载欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2016-03-29 11:02:26 262

lixiaohong2012的博客