- 博客(78)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 移动端不同尺寸下的适陪应
@media only screen and (min-width: 640px) and (max-width: 1200px) {ul li div{width: 9rem;height: 8.5rem;}}@media only screen and (min-width: 300px) and (max-width:350px) {ul li div{wid
2017-08-29 17:01:41
311
转载 class类命名
转载自：http://www.cnblogs.com/allenc/p/5178119.htmlAllenC博客园首页新随笔联系订阅管理随笔 - 2 文章 - 0 评论 - 0class如何命名更规范相信写css的人都会遇到下面的问题： 糟糕，怎么命名这个cl
2017-08-29 16:51:05
4969
转载 css 绘制三角形箭头
转载自:http://ourjs.com/detail/532bc9f36922aa7e1d000001OurJS阅读 全端 发布 订阅邮件 用纯CSS实现的箭头分享到分类 编程技巧 关键字 Html5 发布 newghost 2
2017-08-29 16:49:22
639
转载 css border属性
转载自：http://www.divcss5.com/rumen/r120.shtml#top欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！CSS手册CSS3手册CSS论坛CSS培训CSS任务网闻DIV+CSS学习与CSS资源分享平台首页HTML基础HTML入门HTML5
2017-08-29 16:47:45
663
转载 :after伪类+content 清除浮动的影响实例页面
转载自：http://www.zhangxinxu.com/study/201009/after-content-clear-float.htmlCSS代码：.box{padding:10px; background:gray;}.fix{*zoom:1;}.fix:after{display:block; content:"clear"; height:0; clea
2017-08-28 09:23:57
350
转载 viewport
转载自：http://www.cnblogs.com/2050/p/3877280.html移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、v
2017-08-27 22:55:51
209
原创 移动端布局
body{font-family: helvetica;margin:0;}body *{-webkit-text-size-adjust:100%;/*横竖屏切换时，字体可能会变化，用户通过自己的浏览器也可以设置字体的大小/*/-webkit-user-select:none; 在ios设备下长时间按住某个字时，禁止用户选中这个文字}
2017-08-27 22:09:05
189
转载 巧用margin/padding的百分比值实现高度自适应（
转载自https://segmentfault.com/a/1190000004231995巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）布局 自适应 前端 css array_huang 2015年12月31日发布赞 | 14 收藏 |
2017-08-24 18:15:07
3425
转载 非常强大的在线开发平台加工具和资源
转载自：http://www.ofmonkey.com/ 所有功能 数据查询 前端工具 实体生成 编码解码 加密解密 字符转换 单位换算 代码格式化 正则表达式 二维码生成 条形码生成 常用参考表本机IP使用次数：3638使用http模拟查询使用次数：1711使用IP归属地查询使
2017-08-24 17:46:51
645
转载 自适应网页设计
转载自：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html自适应网页设计（Responsive Web Design）作者： 阮一峰日期： 2012年5月 1日随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成
2017-08-24 17:17:10
468
转载 这可能是史上最全的CSS自适应布局总结
转载自：http://web.jobbole.com/86080/所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block
2017-08-24 16:48:16
332
原创 多个css合在一起写
.right .icona,.icona,.iconb,.iconc,.icond,.icone,.iconf{//注意：有两个icona,如果只有一个的话，icona就不会有设置效果，所以要增加一个，height:50px;width:100px;background-image:url(../images/close.png); /*显示小图*/
2017-08-24 01:52:47
5548
原创 no-repeat 失效
background-image:url(../images/close.png) no-repeat; /*显示小图*/ 最后的结果无效，图片消失不见，如果改为如下background-image:url(../images/close.png); /*显示小图*/ 结果为布满多个图片如果改为如下backgroun
2017-08-24 01:32:32
3876
1
转载 何时使用img标签，何时使用background-image背景图像
转载自：http://www.cnblogs.com/zjBoy/p/3729550.html何时使用img标签，何时使用background-image背景图像 在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适： 1、如果图像是等内容的一部分或图表或人(真正
2017-08-24 00:51:35
1293
原创 子元素相对于父元素设定margin-top值的时候
子元素相对于父元素设定margin-top值的时候,怎么办？记得是父元素没有边界，可以加border-top: 1px solid red;解决方法：1、修改父元素的高度，增加padding-top样式模拟2、为父元素添加overflow：hidden；样式即可3、为父元素或者子元素声明浮动4、为父元素添加bo
2017-08-24 00:16:37
782
转载 用padding还是margin
转载自：http://www.hicss.net/use-margin-or-padding/用Margin还是用Padding分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/use-margin-or-padding/用margin还是用padding这个问题是每个学习CSS进阶时
2017-08-23 11:16:34
280
转载 移动H5前端性能优化指南
转载自：https://isux.tencent.com/h5-performance.html移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点，首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1
2017-08-22 19:07:15
244
原创 grunt压缩、合并css、js文件的配置信息
//包装函数module.exports=function(grunt){//任务配置，所有插件的配置信息grunt.initConfig({//获取package.json的信息pkg:grunt.file.readJSON('package.json'),//uglify插件的配置信息uglify:{options:{stripBanners:true,
2017-08-22 17:27:22
302
转载 用grunt搭建自动化的web前端开发环境-完整教程 .jshintrc文件里的内容有问题
转载自：http://blog.csdn.net/wangfupeng1988/article/details/46418203/ 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程标签： web前端web前端开发自动化grunt2015-06-08 21:37 46700人阅读 评论(66) 收藏 举报版权声明：本文为博主
2017-08-21 23:21:08
695
转载 base64:URL背景图片与web页面性能优化
转载自：http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/小tip: base64:URL背景图片与web页面性能优化这篇文章发布于 2012年04
2017-08-21 17:55:55
557
转载 基于HTML5的可预览多图片Ajax上传
转载自：http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/一、关于图片上传什么什么的在XHTML的时代，我们使用
2017-08-21 16:44:12
635
转载 前端性能优化之优化图片
转载自：http://www.cnblogs.com/zhuzhenwei918/p/6935426.html前端图片优化一直以来都是热门话题，从需求上来看，很多站点往往是图片体积大于代码体积， 图片请求多余代码文件请求， 给前端的性能带来了很大的困扰，那么应该如何解决呢？ 零、 认识图片 我们通常使用的图片就是gif、png和jpg了。
2017-08-21 15:52:56
1924
原创 css sprite新手教程
转载自：http://ons.me/125.htmlCSS Sprites新手教程刚开始认真学习CSS的时候，发现一个CSS Sprites教程。后来群里的朋友问起这个问题，我很想把那个教程发给他看看，但是已经找不到了，所以就一直想自己写个CSS Sprites教程。这几天写网页的时候恰巧用到了CSS Sprites，就写出来，分享给各位刚学习CSS
2017-08-21 15:00:13
5495
原创 css sprites将多张图片合并成一张
div,ul,li,h3{margin:0; padding:0;}ul,li{list-style:none;}div{margin:50px; float:left; font-size:12px; width:200px; background:#eee;}h3{height:28px; line-height:28px; padding-left:15px; background:#ccc; border-bottom:1px solid #aaa;}ul{overflow:hidden;
2017-08-21 14:20:32
1897
转载 GitHub 上一份很受欢迎的前端代码优化指南
转载自：https://segmentfault.com/a/1190000002587334看到一份很受欢迎的前端代码指南，根据自己的理解进行了翻译，但能力有限，对一些JS代码理解不了，如有错误，望斧正。HTML语义化标签HTML5 提供了很多语义化元素，更好地帮助描述内容。希望你能从这些丰富的标签库中受益。div id="main"> di
2017-08-21 11:15:06
316
转载 Chrome调试工具developer tool技巧
转载自：https://www.xuanfengge.com/chrome-developer-debugging-tool-tool-tips.htmlChrome调试工具developer tool技巧星期一 2013/11/25 20:20 阅读：51047 评论：6 作者：ivan 分类：Javascript、Web前端、授人以渔Chrome这个浏览
2017-08-21 10:55:30
479
原创 react学习笔记
JSX语法：它允许 HTML 与 JavaScript 的混写上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。ReactDOM
2017-08-21 09:34:56
238
原创 学习笔记
Parse 解析、理解 compile 编译、编辑 render渲染 frame:框架，结构 layout布局、设计 reflow:回流、再涨 compute:计算、推断 hint:暗示、线索、示意 component:成分、组件异步加载：加载的同时执行代码前端性能优化基本技巧：1. 写出来的HTML应该简洁有效2. 把 CSS 放在 HTML 的上面部分3.
2017-08-20 23:00:51
193
转载 CSS优化
转载自：https://www.zhihu.com/question/19886806我复制规则过来：修复解析错误（Parsing errors should be fixed）避免使用多类选择符（Don't use adjoining classes）IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确，参考IE6下的多类选择符一文
2017-08-20 18:22:01
187
转载 前端页面渲染
转载自：https://www.zhihu.com/question/20117417浏览器这边做的工作大致分为以下几步：加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式
2017-08-20 17:36:12
441
转载 Javascript 异步加载详解
转载自：http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.htmlJavascript 异步加载详解本文总结一下浏览器在 javascript 的加载方式。关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async 属性，
2017-08-20 10:32:46
201
转载 chrome快捷键
转载自：http://www.cnbeta.com/articles/soft/64070.htm实用:Google Chrome 键盘快捷键大全2008年09月07日 12:14 21491 次阅读 稿源： 0 条评论感谢真动荡的投递以下是整理的Google Chrome,键盘快捷键大全,Chrome为网页浏览设置了许多快捷键,许多复杂的鼠
2017-08-17 17:23:38
388
转载 svn入门
转载自：https://zhidao.baidu.com/question/274470171.htmlsvn(subversion)是近年来崛起的版本管理工具，是cvs的接班人。目前，绝大多数开源软件都使用svn作为代码版本管理软件。客户端的使用 1.Checkout Repository 首先要Checkout服务器端的Repository， 所谓的Checkout就是指获得服务器端指
2017-08-17 17:21:53
159
转载 console.log的用法
转载自：https://segmentfault.com/a/1190000002511877hrome 控制台console的用法（学了之后对于调试js可是大大有用的哦）chrome-devtools debug console chrome JingDing 2015年01月26日发布赞
2017-08-15 18:21:23
7903
原创 js事件绑定 监听
事件绑定的三种方法法一：直接在元素上绑定：法二：在js中绑定document.getElementById(id).onclick=function(){alert('de');}法三：使用事件监听绑定事件： //事件监听的优点：可以绑定多个事件。可以解除事件绑定关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。用addEventLis
2017-08-13 23:47:56
327
转载 判断JS数据类型的四种方法
转载自：http://www.cnblogs.com/onepixel/p/5126046.html判断JS数据类型的四种方法说到数据类型，我们先说一下JavaScript 中常见的几种数据类型：基本类型：string,number,boolean特殊类型：undefined,null引用类型：Object,Function,Fu
2017-08-13 23:42:43
13321
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人