核心思想：结构和样式分离 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_思路总览的更多相关文章

  1. 什么是响应式Web设计？怎样进行？

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  2. web设计之无懈可击

    无懈可击的web设计旨在尽可能地考虑页面元素在各个情况下都能够呈现最好的效果. 1. 思路总览 2. 灵活的文字 3. 可伸缩的导航栏 4. 可扩展的行 5. 自由的框式组件 6. 图片/标题/说明文 ...

  3. 为什么Web 设计会‘死’？

    高质量的Web 模板,成熟的Design Pattern,人工智能的引用,移动技术的冲击是否标志着Web Design 结束的时代已经到来? Web Design 最终也未避免与“死亡”这个词的关联, ...

  4. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

  5. 学习之响应式Web设计---一个实例

    周末闲来无事,做了一个响应式设计的例子.当然,由此并不能窥见响应式设计真谛之一斑.但,对于初次接触响应设计,对于响应式设计的概念依旧模糊不清的同学来说,或许是个启蒙! 闲语暂且不表,进入正题,这里没有 ...

  6. Web设计快速入门

    在基本顺利完成功能的基础上,就需要考虑美观的问题了,在眼球经济的当下,一个面向用户的产品,如果没有好的UI,那么它就是不合格的.这部分内容算是初出茅庐,会持续更新. "一个人的外貌决定我是否 ...

  7. 什么是响应式web设计

    什么是响应式web设计 现在开发一个产品,基本上都会需要兼顾 PC端和 移动端. 一般有两种思路: 1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码. 2.一个网站能够兼容 ...

  8. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  9. 外媒速递：十大最佳心理学概念助你提升Web设计效果

    外媒速递是核子可乐精选的近日国外媒体的精彩文章推荐,希望大家喜欢! 本期给大家推荐的是帮助你提升Web设计效果的十大最佳心理学概念.改善企业云环境协作效率的九款卓越工具.选择移动应用开发工具时要考虑的 ...

随机推荐

  1. 深入理解 Kafka 副本机制

    一.Kafka集群 二.副本机制         2.1 分区和副本         2.2 ISR机制         2.3 不完全的首领选举         2.4 最少同步副本         ...

  2. 高并发 Nginx+Lua OpenResty系列（5）——Lua开发库Redis

    Redis客户端 lua-resty-redis是为基于cosocket API的ngx_lua提供的Lua redis客户端,通过它可以完成Redis的操作.默认安装OpenResty时已经自带了该 ...

  3. wireshark和nmap

    原创博客,转载请注出处! 关于Wireshark和Nmap实验报告 Wireshark部分 一.捕获三次握手报并分析 如上图所示,简述三次握手流程: Step1.客户端由56780号端口向服务器443 ...

  4. 最全java多线程总结3——了解阻塞队列和线程安全集合不

      看了前两篇你肯定已经理解了 java 并发编程的低层构建.然而,在实际编程中,应该经可能的远离低层结构,毕竟太底层的东西用起来是比较容易出错的,特别是并发编程,既难以调试,也难以发现问题,我们还是 ...

  5. CI框架注意

    1.在ci框架中,如果想继承自己写的控制器,从而不继承CI_Controller,可以在application/core中定义控制器,从而就可以在controllers中的控制器继承. 2.在ci框架 ...

  6. 经典Java笔试面试题

    面向对象编程(OOP) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和灵活性. 增加代码 ...

  7. 【Linux】一步一步学Linux——VMware虚拟机三种网络模式详解(07)

    目录 00. 目录 01. 虚拟网络连接组件 02. 常见网络连接配置 03. 桥接模式 04. NAT 模式 05. 仅主机模式 06. 自定义模式 07. 附录 00. 目录 @ 01. 虚拟网络 ...

  8. HDU 3949：XOR（高斯消元+线性基）

    题目链接 题意 给出n个数,问这些数的某些数xor后第k小的是谁. 思路 高斯消元求线性基. 学习地址 把每个数都拆成二进制,然后进行高斯消元,如果这个数字这一位(列)有1,那么让其他数都去异或它,消 ...

  9. BZOJ 1001：[BeiJing2006]狼抓兔子（最小割）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1001 题意:中文. 思路:很明显是最小割,转化为最大流做.一开始看那么多点,但还是试了一下,居然过了 ...

  10. Oracle Goldengate是如何保证数据有序和确保数据不丢失的？

    工作中一直在用Oracle 的中间件Oracle GondenGate 是如何保证消息的有序和不丢失呢? Oracle GoldenGate逻辑架构 首先,先看一下Oracle GoldenGate ...