码迷,mamicode.com
首页 > Web开发 > 详细

web设计_1_思路总览

时间:2015-07-13 23:41:12      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:

核心思想:结构和样式分离 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;
}

web设计_1_思路总览

标签:

原文地址:http://www.cnblogs.com/Peng2014/p/4644052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!