标签:
核心思想:结构和样式分离 HTML与CSS
只有充分将页面核心内容和外观设计相分离而获得的灵活性,才能顺利构建出能够满足每个web用户需要的最佳设计方案。
核心要求:灵活性
适应不同的浏览器,适应各种各样的设备和软件。
结构和样式设计方案能够轻松地适应不同的文字大小和内容数量,能够随着这些变化自动扩展或缩小。
并且网站修改内容时,更新及维护代码将会更加轻松,并不会影响设计效果。
例如在准备页面的国际化版本时,使用不同语言表达的内容长度千差万别,此时保证页面设计效果不受影响十分重要。
页面重构:代码服用,模块化布局
首先观察页面布局样式,抽象归纳出公共样式,例如渐变背景,浮动,统一编写类样式,再需要的结构上添加对应的类名
具有相同或形似的布局样式,则先编写相同部分样式,再利用父类命名空间不同各自不同的样式,达到代码服用,模块化布局,
准备工作:兼容HTML5新元素
IE8及更低版本不能识别完全在HTML5中引入的新元素,为了解决这个问题,需要在HTML头部添加以下JavaScript,这是一个简单的
document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,
也不会存在http请求。
注意:需要在页面<head>标签内引用
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
如果觉得担心页面打开速度,可以直接将该js文件写入页面
<!--[if IE]> <script> (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(‘,‘),i=e.length;while(i--){document.createElement(e[i])}})() </script> <![endif]-->
重置样式:
为了是web设计在所有浏览器都达到统一,尽量避免不同浏览器不同的设置造成的影响。
推荐Eric Meyer创建的重置样式表,不建议完全照搬,根据项目需要而添加。
注意:使用HTML5时,要为新元素设置display:block很重要,避免不支持新元素而造成bug.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ‘‘; content: none; } table { border-collapse: collapse; border-spacing: 0; }
标签:
原文地址:http://www.cnblogs.com/Peng2014/p/4644052.html