最近在工作中重构一个老系统，烂的地方有很多，但是对于后台的页面模板（我指的是 JSP、FreeMarker、Velocity 这样的后台模板，JavaScript 前端模板不在此讨论范围内），却是我要说的部分...你可以很轻易地找到怎样重构 Java 类和方法的材料，你的 Java 代码可以写得很优雅；去搜搜 “重构”，到处是怎样重构你的 Java 代码、C++代码，我们也能找到许多前端设计师对于页面结构的重构，...但是重构的范围远非至此。...后台业务逻辑写得再好，一个 jsp、ftl 模板页面还是可能写上几千行，业务逻辑耦合在呈现代码里面，看起来一团糟，对这部分的重构，既不属于传统的 Java 代码的重构，也不属于前端工程师的范畴，就这样姥姥不疼...子页面划分 在页面模板重构上，这大概是我们最常用和最基础的办法。
了解页面重构吗？ 正文 HTML5学堂：在HTML5的职业发展当中，存在着一种职位叫做“页面重构师”，这种职位到底是什么？又和我们的HTML5开发工程师、WEB前端开发工程师有什么区别呢？...我们今天就来揭开这个名词的神秘面纱~ 何为页面重构 页面重构，简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑...所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS” ? 为何要了解页面重构 一方面，页面重构是前端面临的一种职位；另一方面，也是在一些公司面试中会问到的问题。...主要是对静态页面制作方面的要求，不过，重构需要一些PS技巧或设计理论，在设计师没有时间检查页面时也能输出比较高质量的页面。...（主要是各个公司对页面重构的定义不尽相同，大公司的页面重构师也是很不错的选择，而小公司通常就是简单的静态页面制作-也未必追求什么质量） 关于可能会问到的前端面试题：页面重构和前端的关系？
CSS模块的注释——页面重构中的模块化设计（六） 由 Ghostzhang 发表于 2010-07-20 14:07 从前面的内容我们已经知道，样式是可以分成各个模块去写的，如何表示各个模块的作用及它们之间的关系呢...CSS的注释是不二的选择。 与普通的注释不同，模块的注释需要一些更详细的内容，比如：功能说明、模块版本、关联信息等等。...像 《基类、扩展类──页面重构中的模块化设计（五）》 中例子的注释，显然是比较简单的。为了减少不必要的沟通，我们可以使用较为固定的格式去完成这个注释。
我的页面重构经验 由 Ghostzhang 发表于 2006-03-23 10:19 前两天跟群里的『白菜』兄谈到了学习web标准中遇到的问题，觉得很值得写一下，是我对标准的一些理解，希望对在学习web...现在学习web标准的人越来越多，对于刚接触标准的人来说，我想大多数人的第一个印象就是用DIV+CSS制作页面，使用DIV来布局的确是标准的一个主要的特点，但标准并不只是用DIV+CSS布局，看过w3cn...DIV+CSS制作的所谓”用标准制作”的页面，一查看源文件，都是 …… …… …… ……，这样的页面在不支持样式表文件的浏览器中就是一堆没有分隔的文字...在IE中打开刚刚制作的页面就清楚了，也许你已经看到，整个页面的布局乱了。因为浏览器对CSS样式的兼容问题，使到我们现在还要做这一步。...我们不能为了通过验证而做页面，验证只是一种手段，让你知道页面是否符合基本的规范，但能通过验证，并不就是说你的页面达到标准，只能表示没有语法错误，象最开始提到的用DIV+CSS布局的页面，也是可以通过验证的
从字面上，页面重构就是要把曾经因为种种原因，开发出来的，但是对已经不适应现代社会发展的页面进行重写。7前年的表单布局，各种IE6的bug，再到后来的DIV泛滥。...而今，我认为页面重构被赋予了新的使命。...分离、复用、持续维护 分离是指行为、样式、结构分离，最简单的例子就是HTML文档、JS、CSS分开文件。 复用是在分离的层面上，把可以重复使用的东西，放在一起，一次定义，多次使用。...比如CSS里面设置一个.fl专门用来放置浮动的，需要的时候只需要给该HTML标签添加class=”fl”即可。...持续维护，这里有两层含义： 重构对象通常是已经在提供服务的页面，任何重构的操作，都必须保证页面的可用性，防止因为重构的失误导致服务终止。
写给应聘页面重构的同学 由 Ghostzhang 发表于 2009-03-10 18:25 当“ 页面重构工程师 ”这个职位的面试官也蛮长一段时间了，跟前两年比起来，总的来说来应聘的同学能力在很大程度上有了提高...经过这两年的时间，也可以看出WEB标准在国内已经被很多学习页面制作的同学认可并学习、使用。越来越多公司也开始设立页面重构的职位，要求也越来越高。...这也从某方面反映出页面重构这个职位越来越得到重视，也是一种改变。...首先简单说明下我面试的范围，以明确下面所总结的范围：到目前为止，我主要是从事“页面重构工程师”这个职位的技术初试，所谓初试就是第一次的筛选，主要是技术，也就是职位所需能力的面试。...页面性能 主要还是连接数、文件大小，说虽然都懂，做就总没注意。 图片类型 什么是内容图？什么是装饰图？
页面重构中的语义化 由 Ghostzhang 发表于 2009-07-10 18:15 在想什么是“模块化”的时候，HTML部分的模块化也让我烦恼了一段时间，其中引出了另一个问题，就是“语义化”，本文想与大家探讨的内容...我一直使用的方法是，将页面样式去掉，看页面是否以一种文档格式显示，并且是容易阅读的。使用这个方式可以让你对“语义化”的理解在短时间内有所提升。...我们经常使用隐藏的文字将内容放到页面上，这种做法我们一般也称之为“语义化”；选择要使用什么标签，我们也称之为“语义化”。...外行看热闹，内行看门道 ，我们写的页面并不是所有人都会去看源代码的，那我们为什么还要注意那么多东西呢？...这个需要做页面的同学先明白一个问题：我们是为了什么而做页面的？正如前面所说，我们是内容的传播者，我们尽可能的让更多的用户更容易的从互联网获取信息。那么，表现上不需要的标签就是多余的吗？
页面重构中的设计模式 由 Ghostzhang 发表于 2014-07-02 02:40 查了下最开始的创建日期，竟然是2011年12月19日，这文章断断续续写了快3年，终于了算比较完整了，但可能相对还是写得有些简单了...本地下载PDF 页面重构中的设计模式 from Ghost Zhang 以前写过的系列文章《 前言——页面重构中的设计模式 》，可以帮助理解，但需要注意的是，因为这期间有些想法上的变法，可能一些细节会不太一样
页面重构中的组件制作要点 由 Ghostzhang 发表于 2009-10-20 17:23 在写完前面“模块化”相关的文章后，感觉试图用“模块化”本身去讲什么是“模块化”真是不容易讲得清。...在《页面重构中的模块化思维》中提到了“模块化”的应用是十分广的，而且大家已经对它有了自己的理解，想要重新认识“模块化”是不太容易的，因此决定换一个名。...一个组件效果的实现，需要的支持可能是不同的，组件强调的是“效果的完整”，要保证效果完整，就需要HTML、CSS、前端脚本甚至后台脚本等的配合。...特别是对于CSS，就是常说的全站公共样式，包括reset。 确保同一组件在同一底层环境中的效果完整。 组件中的定义需要注意受组件外继承定义的影响。...（有多种步骤，3~5步） 有多个步骤同在一个页面的情况 <!
前言——页面重构中的设计模式 由 Ghostzhang 发表于 2012-11-09 02:56 前不久开始写《页面重构中的设计模式》，本想着内容应该是蛮多的，可是到约9000字的时候，发现写不下去了...在开始下面的内容之前，可以先了解下我对模块化的理解，不然后面的内容可能会看得云里雾里的： 页面重构中的模块化思维 页面重构中的组件制作要点 样式的作用域──页面重构中的模块化设计（一） 栏目级作用域──...页面重构中的模块化设计（二） 继承──页面重构中的模块化设计（三） 模块化的核心思想──页面重构中的模块化设计（四） 基类、扩展类──页面重构中的模块化设计（五） CSS模块的注释——页面重构中的模块化设计...这也许是页面重构在业内被大多数程序员同学所不屑的根本原因吧，当然对于习惯了编程思维的开发同学来说，CSS还是有一定难度的。 你一定想说，less、sass不就是让CSS可以定义变量了吗？...在很长一段时间里，我都是把HTML和CSS放在一起去考虑的，因为在重构里HTML和CSS就是不可分开的关系，但它们之间有着不同的特性，侧重的点有所不同。
页面重构中的模块化思维 由 Ghostzhang 发表于 2009-06-21 21:24 更新于 2021-12-10 14:45 最近被“模块化”缠身，又是文章又是 PPT 的，被逼着想了很多相关的东西...整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。...不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？ 什么是模块化？ 对“模块化”的解释，在 CNKI 中就有 28 种。...最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。 先看一下百度词条是怎么解释“ 模块化 ”的： 模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。...CSS 引入的三种方式 类名 为了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都使用原类名后加“_n”，Tab
原始而传统的前端页面重构工作流程 这里说的是我一开始前端相关工作时的最原始的工作流程，有部分可能你也在经历，有部分你经历过去了。 首先拿到设计稿或者是与客户沟通好设计需求。...用好浏览器 浏览器的兼容性测试 既然是前端工程师，又是偏向页面重构的，注定与浏览器脱不了干系。...IETester 用来模拟早期 IE 浏览器的渲染模式，来快速检测页面兼容性问题。 虚拟机，VMware 或者 VirtualBox（推荐） 都是可以的。...不过不要使用这个来调试，因为它的页面宽度增加了滚动条的宽度，而且分辨率一闪而过，不如 Firefox 的响应式设计视图更加准确。 2，LiveReload 插件，帮助你无刷新的查看页面效果。...回顾前端页面重构的开发流程 介绍完了这些工具和方法，下面再来回顾一下改进版的开发流程： 使用准备好的框架模板做初始化，直接复制过来，观看并思考 PSD ，抽出可复用模块，马上开始写代码。
css重构之旅 >前言： 今年我大一,马上就要大二了。从高三毕业暑假到大学的这一年马上过去，马上迎来大二生活.学习前端也有将近一年了。...Author"content=""> css...移动端重构页面布局8大方法：http://www.divcss5.com/html5/h20001.shtml 昨天晚上读了张鑫旭的CSS流体(自适应)布局下宽度分离原则、页面重构的三无准则获益匪浅，...这个作品可以帮你仔细分析下几种页面重构布局的差异： http://wow.techbrood.com/fiddle/fork?...id=25477； 总结 页面重构的方法和技巧有很多，自己应该保持一个谦卑的心，在重构的道路路上走下去。 ? 一千张，我还差好多好多； ?
css中设置div元素居中显示的四种方法 一、先确定div的基本样式 二、具体实现方法 第一种：利用子绝父相和margin: auto实现 第二种：利用子绝父相和过渡动画tranform实现 第三种：同样是利用子绝父相和...css结构： css"> *{ margin: 0; height: 0; } .warp{ width: 500px; height: 500px; background-color...注意：calc()函数，CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
一.代码 <...3.8K30页面变灰css代码--页面变灰--> css"> body * { /* -webkit-filter; grayscale(100%); */ -moz-filter: grayscale...grayscale=1); filter: gray; } 发表时间：2022-12-01 本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接86810用 CSS 隐藏页面元素用 CSS 隐藏页面元素有许多种方法。...CSS .hide { opacity : 0 ; } 如果你打算使用 opacity 属性在读屏软件中隐藏元素，很不幸，你并不能如愿。...CSS .hide { visibility : hidden ; } 如果一个元素的 visibility 被设置为 hidden，同时想要显示它的某个子孙元素...下面是采用这种办法的 CSS： CSS .hide { position : absolute ; top : -9999px ;...polygon ( 0px 0px , 0px 0px , 0px 0px , 0px 0px ) ; } 结论 我们看了 5 种不同的通过 CSS1.6K10HTML+CSS登录页面第一步:构建HTML框架 简介：本文用最通俗的语言，一步步教会大家CSS构建登录页面。 首先构建HTML框架，包含用户名，密码，记住密码，注册这几个功能。...注册 运行结果： 第二步：CSS渲染 2.1先渲染form框架 简介：先构造大框架15710html css制作404页面,CSS3绘制404页面本来不想上传效果图的, 弄了弄发现css写css代码会被注释掉, 诶 申请个js权限去 一款纯css3实现的漂亮的404页面 之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意...404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: … html5和css3打造一款创意404页面 之前和网友分享一款HTML5...可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h … jQuery+...效果图如下: 代码如下: … CSS3绘制六边形 因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,...利用HTML5+CSS3绘制HTML5 … CSS3制作404立体字体 CSS3制作404立体字体页面效果 鼠标移动上去,背景色变白.1.8K20点击加载更多
--页面变灰--> css"> body * { /* -webkit-filter; grayscale(100%); */ -moz-filter: grayscale...grayscale=1); filter: gray; } 发表时间：2022-12-01 本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接
用 CSS 隐藏页面元素有许多种方法。...CSS .hide { opacity : 0 ; } 如果你打算使用 opacity 属性在读屏软件中隐藏元素，很不幸，你并不能如愿。...CSS .hide { visibility : hidden ; } 如果一个元素的 visibility 被设置为 hidden，同时想要显示它的某个子孙元素...下面是采用这种办法的 CSS： CSS .hide { position : absolute ; top : -9999px ;...polygon ( 0px 0px , 0px 0px , 0px 0px , 0px 0px ) ; } 结论 我们看了 5 种不同的通过 CSS
第一步:构建HTML框架 简介：本文用最通俗的语言，一步步教会大家CSS构建登录页面。 首先构建HTML框架，包含用户名，密码，记住密码，注册这几个功能。...注册 运行结果： 第二步：CSS渲染 2.1先渲染form框架 简介：先构造大框架
本来不想上传效果图的, 弄了弄发现css写css代码会被注释掉, 诶 申请个js权限去 一款纯css3实现的漂亮的404页面 之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意...404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: … html5和css3打造一款创意404页面 之前和网友分享一款HTML5...可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h … jQuery+...效果图如下: 代码如下: … CSS3绘制六边形 因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,...利用HTML5+CSS3绘制HTML5 … CSS3制作404立体字体 CSS3制作404立体字体页面效果 鼠标移动上去,背景色变白.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
