ResourceTree 重构网页

web页面的重构和回流【转载】

在了解什么是重构和回流之前,我们应该先看看浏览器是怎么渲染的? 浏览器的渲染过程: 1.处理HTML脚本,生成DOM树(DOM树里包含所有的HTML标签,包括display:none和js动态添加的元素等)2.处理CSS脚本,生成CSSOM树(DOM和CSSOM是独立的数据结构)3.将DOM树和CSSOM树合并为渲染树,render树中不包含定位和几何信息.虽然,render树与dom树类似但还是有区别的.render树中不包含隐藏的节点 (比如display:none的节点,还有head节点)

重构网页过程中的小tips

1.display为inline-block的元素可以使用virtical-align:middle来使得元素垂直居中对齐 2.在一些按钮标签或者mark标签中,如果文本内容确定不会改变长度的话,可以定义标签的width和height,如果文本内容字数不固定,要达到文本居中的效果,可以使用padding和line-height来实现.使用padding的时候要考虑到文本内容是否已有定义的line-height 3.属性text-align针对的是html元素,如a,img,p等.对于div和sp

一个Java程序员的实习总结（2）

在今天的总结里,主要讲述第二.三周这半个月的培训情况,并且穿插讲讲我对实习和见习的看法,有需要有兴趣的童鞋可以看看. 半个月的见习其实我更愿意把实习和见习分开讲,实习指的是还没签三方或者直接就是大三暑假时到公司里面参加工作,见习就是签了三方或者确定工作意向后.拿到毕业前提前熟悉日后的工作和环境.(个人定义,请勿吐槽···) 这两个礼拜主要是介绍EJB以及JSF的内容,培训的做法就是把技术给我们稍微讲解一下,然后丢给我们一些电子书或者是文档,让我们做一个小demo出来.刚开始的时候相当痛苦,因为

[转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因此,Ethan Marcotte提出一种响应式web设计的概念. 响应式web设计的英文为Responsive Web Design,简写为RWD. 在图书馆借到一本O'REILLY的<Head First Moblie Web>,里面讲到了一些做RWD的技巧. 今天学到的两招是: 1.使用med

DOM 之通俗易懂讲解

DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系统的讲解下DOM的相关知识,如有遗漏或错误,还请大家指出一起讨论^ ^. 一.DOM是什么? DOM(文档对象模型)是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 这个说法很官方,大家肯定还是不明白. 举个例子:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节

IOS设备对position的支持性

最近在开发一个网页. 要嵌套在微信里大家都知道 IOS版微信和安卓版微信还是一定的差距 IOS版微信在打开网页的时候回调取自己的浏览器以及内核但是安卓版微信不会,他会默认使用自己的QQ浏览器和X5内核这个大家在用微信打开网页是,把网页向下拉动时,可以看到接下来我说一下我遇到的问题和解决方法由于要做一个展示性数据网页需求是做固定右滑动这里我没有用到插件.. 只是用了html css特有的属性在正常写完网页的时候,安卓设备的支持性很好,可以说任何bug都没有但是在IOS设备下

关于ie6下png背景透明

今天我突破了一个技术难关,真的是头都大了.. 关于ie6下png背景透明的解决方法,我就不多说了,网上有很多解决方法,我用的是其中的一种: <script type="text/javascript" src="js/iepng/iepngfix_tilebg.js"></script> <style type="text/css"> img,div { behavior: url(js/iepng/iepng

CSS3动画旋转——（图片360°旋转）

今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./yft.png" alt="" class="rotation"> </div> css <style> @-webkit-keyframes rot { from { -webkit-transform: rotate(0deg)

JS一般般的网页重构可以使用Node.js做些什么（转）

一.非计算机背景前端如何快速了解Node.js? 做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过. 对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.js,且很有可能对Node.js都没有一个比较立体的认识——知道这玩意可以跑服务,构建很多前端工具,看上去很厉害的样子,但是,可能就仅限于此了. “那可否三言两语概括Node.js的林林总总呢?” “不可!” “那怎么办?” “那就六言四语!” 首先,要知道,Node.js一个JavaScript运行

网页重构应该避免的10大 CSS 糟糕用法

对于网页重构来说,CSS禅意花园是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css.今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法. 为了方便大家理解

网页重构应该避免的10大CSS糟糕用法

对于网页重构来说,CSS禅意花园是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css.今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法. 为了方便大家理解

【重构前端知识体系之HTML】HTML5给网页音频带来的变化

[重构前端知识体系之HTML]HTML5给网页音频带来的变化引言音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计一些年轻的开发者都不用了解flash是啥了.因为HTML5来了,它改变了这一切. HTML5音频的播放方式是的,HTML5带来了不止一种能够播放音频的方式. 使用插件浏览器插件是一种扩展浏览器标准功能的小型计算机程序. 插件可以使用 object 标签或者 embed 标签添加在页面上. embed方式 embe

无废话网页重构系列——（7）布局(区块、栅格)、模块组件(module)

本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4654800.html 在构建HTML主干结构后,开始编写“页面布局”和“模块组件”: 页面框架由几个主干结构支撑和区分,框架下则是布局,布局是由多个区块组成,区块里面则是栅格列,格子列里是各模块组件,各模块可有边框.内外边距. 用于布局的层,尽量不要设置边框.内外边距. 一.布局如图: 主要HTML和CSS代码如下: <div class="section"> <div c

无废话网页重构系列——（6）HTML主干结构：站点(site)、页面(page)

本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4653546.html 在分析和切出设计稿,以及部署项目目录文件后,开始写HTML Demo. 首先,弄出HTML布局的主干结构,最原始的基础框架. 一.<head>里加各类<meta>元素,<link>引入样式.</body>前<script>引入脚本: 二.构建HTML主干结构: 1.网站站点(site),可分“页头页尾”部分: 2.网站子站(page

无废话网页重构系列——（3）Web重构前的分析

本篇讲重构前的分析.从“工作状态.工作环境和工作角色”和具体重构工作两方面分析. 凡是经过考验的朋友,就应该把他们紧紧地团结在你的周围比较理想的工作状态:制定了各种设计和开发规范,各团队之间邮件.团队内部即时通讯工具或声波传输沟通,对已有的或将要孵化的项目和产品,或多或少会有参与和认识,较早的进入开发环境中,进行准备.分析和实施相关的思考.但也可能会是产品需求未确定和频繁变更,技术规范.产品文档和开发文档尚未定义,已经要求团队进行并行开发的充满风险的工作状态. 工作环境多是公司内部,但也有可能

无废话网页重构系列——（2）来套Web重构装备

本篇主要从语言入门.规范.工具.构建.库.框架.版本控制等各方面展开,篇幅会有点长,涉及到的工具类,会另开博文详细介绍. 另外说明Web重构是Web前端的开始,主要侧重Web页面,如实现布局与兼容,符合W3C标准规范,组件化框架化,实现页面视觉效果,提升代码的可维护性.可读性和性能优化. 三生万物 HTML.CSS.JavaScript 是为Web开发三基石. 人类社会的工作,各方面各环节都是林林总总,Web开发亦是如此,具体的可以查阅Web Developer Roadmap.Frontend

网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

由于万恶的IE6和IE7,我们在页面重构时不免要对其进行各种bug修复及差异化处理.在标准浏览器中可实现的效果在IE里却有各种离奇问题,例如IE6.IE7不能良好应对的inline-block和.clearfix问题,好在大部分问题已经有了足够的总结和途径.废话不多说,下面是一些方法区分浏览器的方法和我的看法. 主要途径 CSS Hack 直接在CSS文件中写CSS Hack是非常直观的区分方法.区分不同IE版本的hack代码为 #content{background:red; /* 所有浏览器

HTML重构与网页常用工具

下面这张思维导图,是我对全书大体内容的一个概括性总结: 工具本书推荐的工具主要包含的是自动化测试,但是我觉得现行的开发环节当中实际用到的会比较少.这里就推荐一下其他方面的优秀工具: 1. YSlow YSlow是雅虎推出的一款浏览器插件,可以帮助你对网站的页面进行分析,并为你提供一些优化建议,以提高网站的性能.戳我查看Yslow-23条规则 Firefox插件 Chrome插件 YSlow for Mobile/Bookmarklet 源码 2. PageSpeed PageSpeed也是一个

现代程序设计网页前端开发作业（to 邹欣老师）

在一些著名的网站的搜索框上,会有一种“自动完成”功能. 比如google.百度和淘宝: 现在,我们来考虑如何实现这个功能. 第一步:模仿任意一个网站,编写一个类似的网页效果原型. 在这一步,不要估计开发时间. 把学习新技术(一些前端基础知识)的时间花在这个阶段. 以完成原型为目标,不必深入技术. 去 http://www.w3schools.com/ 获得入门知识去 https://developer.mozilla.org/ 查阅文档第二步:仔细观察三个网站的“自动完成”功能,比较它们<s

《HTML重构》读书笔记&思维导图

最近读了<HTML重构>这本书,以下做出自己的总结归纳,大家可以一起学习交流. 什么是重构?重构是在不改变程序行为的基础上进行小的改动是代码基本逐渐完善的过程,通常需要一些自动化工具的帮助.好的网站是需要我们对代码进行日臻完美的改善.而搜索引擎优化(seo)是网站重构的主要驱动之一,跟图片相比搜索引擎更看重文本:跟后端文本相比更看重前端文本,他们更看重标题或元标签.作者希望通过更多的文本内容取代如图片.flash等可以做好SEO.我个人觉得看完了这本书对做 SEO是非常有帮助的百度百科对重构

网页前端开发：微博CSS3适用细节初探

浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新,那就是css3的支持了!上次,加菲猫已经给我们演示了夸张的css3动画.而这次,我们从细节入手,看看css3遇到weibo,会给人什么期待 . 当然在这之前,得先了解下拜访weibo.com的各位大侠的神器占比: PS:(数据来自新浪微博“产品数据分析后台”的2012年1月份浏览器占比) 图标中可以

ResourceTree 重构网页

热门专题