- 博客(65)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 HTML 命名规范
1.body元素： -wrap 2.固定元素间隙设置： fix-pd 3.固定定位： fix-top fix-bt 4.弹出层遮罩： black-layer 代码示例： .black-layer{ position: fixed; width: 100%; height: 100%;
2016-05-05 18:20:06
503
原创 css代码重构与优化
写CSS的同学们往往会体会到，随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对CSS代码进行维护，CSS代码不断会越来越多。CSS代码交错复杂，像一张庞大的蜘蛛网分布在网站的各个位置，你不知道修改这行代码会有什么影响，所以如果有修改或增加新功能时，开发人员往往不敢去删除旧的冗余的代码，而保险地增加新代码，最终的坏处就是项目中的CSS会越来越多，最终陷入无底洞。CSS代码重
2016-01-26 11:07:42
423
原创 移动端常用布局（二）
1.商品列表布局毛巾两件套￥1000.0020 样式：.product-list li{float: left;width: 50%; box-sizing: border-box;}.product-list li
2016-01-06 13:24:01
507
原创 移动端常用布局（一）
1. 输入框placeholder样式 (提示文字可单独设置字体样式和大小) /* WebKit browsers */ .login-inp::-webkit-input-placeholder {color: #9e9d9d; } /* Mozilla Firefox 4 to 18 */ .login-inp:-moz-placeholder
2016-01-06 10:57:38
983
原创 关于rem布局
我们知道，当使用rem布局，并配合JS动态按照比例设置HTML标签上的rem值时，整个页面是按照屏幕的宽度来整体缩放的。对于高度不限制的页面（也就是超出一屏页面可以滚动），这种方案没有任何问题，简单暴力。但是对于一些需要布满一整屏的页面（比如现在流行的上下/左右滑动的那种），由于一个页面的元素必须在一个页面内布满，不能超出，那么问题就来了：如果你是按照iPhone5的尺寸来
2015-09-09 10:55:22
1354
原创 IE6下 position:fixed 兼容问题
IE6不支持position:fixed，这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。你是如何让position:fixed在IE6中工作的？本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。
2014-12-24 09:47:53
754
原创 文字多行超出省略
方法一：（注意：尽量不要设置高度，测试效果不好）.text_line { width:200px; border: 1px solid black; overflow: hidden; text-overflow: elipsis; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; }
2014-12-22 14:03:31
708
原创 @media screen 针对不同移动设备
概念: device-pixel-ratio：定义输入设备屏幕的可视宽度与可见高度比率。 device-width：输入设备屏幕的可视宽度。 orientation ：屏幕横竖屏定向。landscape是横向，portrait 是纵向【ipad相反】/* iPhone 4 ———– */@mediaonly screen and (-webkit-min-
2014-12-05 15:20:47
643
原创 js经典面试题
问题1: 作用域 看一下下面的代码：(function() { var a = b = 5;})(); console.log(b); 结果会输出什么? 答案： 5 这个问题考查的要点是两个不同的作用域，'a'被var声明成了一个局部变量，但是'b'实际上没有被定义，所以它是一个全局变量。 这个问题还牵
2014-11-28 14:43:57
3451
原创 Ajax兼容问题
// 适用于ie7之前的版本 function createXHR(){ if(typeof arguments.callee.activeXString !="string"){ var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
2014-11-25 10:10:28
408
原创 Js各种继承方法总结
//原型链方式 function ClassA() { } ClassA.prototype.color = "red"; ClassA.prototype.sayColor = function () { console.log(this.color); } function ClassB() {} ClassB.pro
2014-10-26 18:01:00
397
原创 清除浮动的方法及其利弊
1、采用伪类:after进行后续空制的高度位零的伪类层清除 2、采用CSS overflow:auto的方式撑高 3、采用CSS overflow:hidden的方式产生怪异适应 4、采用display:table将对象变成table形式 5、采用div标签，以及css的clear属性 6、采用br标签，以及css的clear属性 7、采用br标签，
2014-10-22 15:33:21
529
原创 CSS优先级，优先级计算
原则一： 继承不如指定原则二： #id > .class > 标签选择符原则三：越具体越强大原则四：标签#id >#id ; 标签.class > .classCSS优先级权重计算法CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数!根据这四个级别出现的次数计算得到CSS的优先级。CSS
2014-10-18 18:09:30
425
原创 css link和@import标签的区别
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再
2014-10-17 11:17:34
538
原创 前端工作面试HTML相关问题
Q: doctype（文档类型）的作用是什么？A: 在HTML中 doctype 有两个主要目的。对文档进行有效性验证:它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。决定浏览器的呈现模式:对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据
2014-10-17 09:17:31
459
原创 完美解决IE6浏览器下不兼容position:fixed固定定位
一般的 position:fixed; 实现方法以我的博客为例，在右下角 ... 这个 HTML 元素使用的 CSS 代码如下：#top{position:fixed;bottom:0;right:20px;}实现让 ... 元素固定在浏览器的底部和距离右边的20个像素。在 IE6 中实现 position:fixed; 的办法刚刚提过，在IE6中是不能直接
2014-10-16 08:37:53
875
转载 常见浏览器兼容问题
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以
2014-10-14 20:19:31
362
转载 JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax
2014-10-11 16:59:13
334
原创 标准盒模型和IE盒模型
大家好像对盒模型还不是很清楚，我来总结一下。盒模型分为两种：标准盒模型和怪异盒模型（可恶的IE浏览器）一.标准盒模型在标准盒模型中一个盒子实际所占的位置大小为：margin + padding + border + content(width,height)。在标准盒模型中一个盒子的大小为：padding + border + content(width,heigh
2014-10-10 18:45:33
895
原创 javascript闭包
一、什么是闭包：简单的说：父函数，包着子函数。子函数可以引用父函数的参数和变量,参数和变量不会被垃圾回收所收回，看下面的例子。
2014-10-09 15:44:56
362
原创 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义
（1）如何触发两种模式：加入xml头部声明，可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（Javascript）也是如此。 （2）IE6的触发：在XHTML的DOCTYPE前加入XML声明，（3）IE7的触发：在XML声明和XHTML的DOCTYPE之间，加入HTML
2014-10-09 12:06:56
1353
原创 jquery的checkbox,radio,select等方法总结
jquery的checkbox,radio,select等方法总结，该文章为我的新博客文章，以后此博客更新频率会降低，想查看我的最新博客文章请看 http://www.haorooms.com/jquery的checkbox，radio，和select是jquery操作的一个难点和重点，很多前端新手对其了解不是很透彻。时间久了不用，我在写的时候有时也难免对某些操作支支吾吾，记不清楚，现
2014-09-25 11:35:23
519
原创 CSS3中-webkit-box的用法
-webkit-box:1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。提供的关于盒模型的几个属性：box-orient
2014-09-24 16:57:38
676
转载 理解与使用javascript中的回调函数
在Javascript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。因为函数是第一类对象，我们可以在Javascript使用回调函数。在下面的文章中，我们将学到关于回调函数的方方面面。回调函数可能是在Javascript中使用最多的函数式编程技巧，虽然在字面上看起
2014-09-18 11:38:33
492
原创 垂直对齐vertical-align的一些认识
垂直对齐vertical-align与text-align对比对于vertical-align垂直对齐属性，w3c是这么解释的：vertical-align 属性会影响到由内联元素产生的行内框的垂直位置。原文请猛戳 w3c注解值：baseline | sub | super | top | text-top | middle | bottom | text-bottom
2014-09-18 11:34:56
858
转载 影响CSS渲染速度的写法与建议
一、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签；*{margin:0; padding:0}建议的的解决办法：1、不要去使用生僻的标签
2014-09-16 15:13:35
422
原创 css兼容问题总结
div类1. 居中问题 div里的内容，IE默认为居中，而FF默认为左对齐 可以尝试增加代码margin:auto2. 高度问题两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度
2014-09-02 20:18:55
405
原创 js兼容问题总结
1. document.form.item 问题问题： 代码中存在 document.formName.item("itemName") 这样的语句，不能在FF下运行 解决方法： 改用 document.formName.elements["elementName"]2. 集合类对象问题问题：代码中许多集合类对象取用时使用()，IE
2014-09-02 20:11:18
387
原创 margin的一些技能
在一些页面底部，经常会使用到一些像关于我们之类的小导航。但是有的时候不需要用到最右边的竖线。可能有些童鞋会使用一个class来控制，但这并不是一个好技能。其实可以利用下margin负值来实现这样的效果。Examplesbody,ul,li,div{margin: 0;padding: 0;}ul,li{list-style: none;}.clearfix:after{cont
2014-09-01 18:54:44
356
原创 IE6常见bug
1、IE6怪异解析之padding与border算入宽高原因：未加文档声明造成非盒模型解析解决方法：加入文档声明2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）解决方法：display:inline3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎
2014-09-01 09:19:58
388
原创 box-sizing属性
说到 box-sizing不能不提IE 的一个 bug，IE对盒模型的解析问题，w3c规定的标准模式，盒模型站的空间是由 content + padding+ border+margin相加的来。而在IE的怪异模式下盒模型站的空间是由 content +margin相加的来，也就是说。在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和
2014-08-29 17:35:13
362
原创 关于IE6.7.8.FF兼容的问题
作为一个前端开发工程师，在对界面布局的时候，应该注意遇到最常见的问题是css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的页面，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的界面可能出去不想出现的效果！所有浏览器 通用 height: 100px; IE6 专用 _height: 100px;IE6 专用 *height: 100p
2014-08-23 09:29:01
364
原创 JS事件绑定的方法
Javascript的事件绑定主要有四种方法（以下在IE中运行正常，但不保证其他浏览器）：[注：onXXX为某一事件，fun为某一function，domId为某一DOM对象id，event类型见后边附录。]1、在DOM中，直接用onXXX="fun();"进行绑定2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定3、用 DOM对象.attachEve
2014-08-18 16:52:01
419
转载 Ajax入门
理解同步交互和异步交互举个例子：普通B/S模式(同步) AJAX技术(异步) * 同步： 提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事。 发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 你现在传输，我要亲眼看你传输完成，才去做别的事 。
2014-08-13 15:28:50
384
转载 Git GUI的使用
一、克隆在开始 —> 所有程序 —> Git 中，有 Git Bash 和 Git Gui 两个图标，点击启动 Git Gui 界面如下：msysgit 图形工具，可以创建新的版本库（本地）、克隆已有版本库（远程）、打开已有版本库（本地或远程）例如：克隆已有的版本库（远程），如 克隆下载test.git 步骤：a、 点击“克隆已有版本库”，依次输入远程版
2014-08-12 15:50:07
509
原创 JS中setInterval和setTimeout的用法
setTimeout定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。 语法: setTimeout(code,millisec) 参数： code （必需）：要调用的函数后要执行的 JavaScript 代码串。 millisec（必需）：在执行代码前需等待的毫秒数。 提示： setTimeout()
2014-08-11 17:57:35
396
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人