![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
文章平均质量分 63
lixiaohong2012
这个作者很懒,什么都没留下…
展开
-
WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的m转载 2016-03-29 14:05:42 · 2317 阅读 · 0 评论 -
全面理解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 · 461 阅读 · 0 评论 -
盒子中的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 · 959 阅读 · 0 评论 -
jQuery对表单、表格的操作及更多应用
一、单行文本框应用——获取和失去焦点改变样式$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); });}原创 2016-04-21 13:47:16 · 627 阅读 · 0 评论 -
玩转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 · 16675 阅读 · 5 评论 -
Bootstrap(基础)
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 · 2271 阅读 · 0 评论 -
CSS 选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 “CSS” 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)转载 2016-07-04 09:51:44 · 440 阅读 · 0 评论 -
jQuery基础修炼圣典—动画篇
隐藏元素的hide方法//点击buttom1 直接隐藏 $("button:first").click(function() { $("#a1").hide() });//点击buttom2 执行动画隐藏 $("button:last").click(function() { $("#a2").hide(原创 2016-06-22 11:06:32 · 480 阅读 · 0 评论 -
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 · 561 阅读 · 0 评论 -
jQuery基础修炼圣典—事件篇
click与dbclick事件 jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。原创 2016-06-22 13:47:23 · 474 阅读 · 0 评论 -
CSS3的学习总结
1、强大的选择器 新增的属性选择器、结构伪类选择器、UI元素状态伪类选择器、其他新增选择器2、增强的文本和颜色功能text-shadow 定义文本阴影或模糊效果text-overflow 定义省略文本的处理方式word-wrap 定义文本超过指定容器的边界时是否断开转行RGBA RGBA是在RGB的基础上增加一个透明度(A)的设置opacity 定义颜色的不透原创 2016-04-18 17:35:18 · 1105 阅读 · 0 评论 -
'display'、'position' 和 'float' 的相互关系
转换对应表:这一节是为了调和三种布局和框形成的关键特性( display )之间的关系而设。总的来说,可以把它看作是一个类似优先级的机制, “position:absolute” 和 “position:fixed” 优先级最高,有它存在的时候,浮动不起作用,’display’ 的值也需要调整; 其次,元素的 ‘float’ 特性的值不是 “none” 的时候或者它是根元素的时候,调整 ‘displ转载 2016-05-05 11:06:01 · 1044 阅读 · 0 评论 -
【总结】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 · 2170 阅读 · 0 评论 -
scrollHeight、clientHeight、offsetHeight使用区别
在IE中 scrollWidth:获取对象的滚动宽度 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTo原创 2016-05-05 09:54:54 · 519 阅读 · 0 评论 -
《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 · 474 阅读 · 0 评论 -
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 · 704 阅读 · 0 评论 -
JavaScript 开发的45个经典技巧
JavaScript是一个绝冠全球的编程语言,可用于Web开发、移动应用开发(PhoneGap、Appcelerator)、服务器端开发(Node.js和Wakanda)等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员,现如今已成了转载 2016-03-30 13:39:23 · 380 阅读 · 0 评论 -
javascript 闭包
闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它。因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包!1 闭包–爱的初体验在接触一个新技术的时候,我首先会做的一件事就是:找它的demo code。对于码农们来说,代码有时候比自然语言更能理解一个事物。 其实,闭包无处不在转载 2016-03-30 13:40:41 · 393 阅读 · 0 评论 -
DIV+CSS检测技巧和应用
DIV+CSS检测技巧 1、检查HTML元素是否有拼写错误、是否忘记结束标记 经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2、检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的 } 等。3、确定错误发生的位置 假如错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。4、利用border属性确定出原创 2016-04-04 20:09:53 · 569 阅读 · 0 评论 -
浅尝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 · 476 阅读 · 0 评论 -
前端工程师必备的PS技能——切图篇
Photoshop界面设置 移动工具快捷键——v 注意自动选择选项 智能参考线——视图->显示 标尺——Ctrl+R 窗口->信息(面板选项中,第二种颜色信息模式为RGB颜色,标尺单位为像素,勾上文档尺寸)、窗口->历史记录、窗口->字符、窗口->图层 更改首选项中单位与尺寸中的标尺和文字都是以像素为单位 窗口->新建工作区->Web切图(存储下来)(窗口-工作区-Web切图)P原创 2016-03-30 11:19:28 · 2390 阅读 · 0 评论 -
清除浮动的七种方式方法(实例代码讲解)
实例代码(未清除浮动):<!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 · 570 阅读 · 0 评论 -
CSS Sprite(s)、图片优化及实例应用那些事
CSS Sprites实现方法 首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位。CSS Sprites技术要点总结 1、小图片整合时,按照从上到下的顺序,而不要一个图片挨着一个图片从左到右排列。 2、小图片整合时尽量靠最左边或者最右边。综合1则是沿着最左边或者最右边的两侧开始由上而下整合图片。 3、不建议在不同小图片上下留间隔,减小文件的大小。 4、把图片中颜原创 2016-04-18 17:01:30 · 419 阅读 · 0 评论 -
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 · 592 阅读 · 0 评论 -
跨平台的移动Web开发实战(HTML5+CSS3)
标记-moz-、-webkit-、-o-和-ms-的解释 -moz-:代表Firefox浏览器特有的属性 -webkit-:代表webkit浏览器特有的属性,Chrome、Safari浏览器采用WebKit内核 -o-:代表Opera浏览器特有的属性 -ms-:代表IE浏览器特有的属性原创 2016-05-04 10:15:01 · 3028 阅读 · 0 评论 -
js日常小笔记
一、getElementsByClassName h5中新增的方法,但是只有较新的浏览器才支持它,现在使用DOM方法来实现,能适用于新老浏览器function getElementsByClassName(node,classname) { if(node.getElementsByClassName) { //使用现有方法 return node.g原创 2017-04-11 20:47:27 · 653 阅读 · 1 评论