web设计_1_思路总览
核心思想：结构和样式分离 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_思路总览的更多相关文章
- 什么是响应式Web设计？怎样进行？
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- web设计之无懈可击
无懈可击的web设计旨在尽可能地考虑页面元素在各个情况下都能够呈现最好的效果. 1. 思路总览 2. 灵活的文字 3. 可伸缩的导航栏 4. 可扩展的行 5. 自由的框式组件 6. 图片/标题/说明文 ...
- 为什么Web 设计会‘死’？
高质量的Web 模板,成熟的Design Pattern,人工智能的引用,移动技术的冲击是否标志着Web Design 结束的时代已经到来? Web Design 最终也未避免与“死亡”这个词的关联, ...
- 分享29个超赞的响应式Web设计
原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...
- 学习之响应式Web设计---一个实例
周末闲来无事,做了一个响应式设计的例子.当然,由此并不能窥见响应式设计真谛之一斑.但,对于初次接触响应设计,对于响应式设计的概念依旧模糊不清的同学来说,或许是个启蒙! 闲语暂且不表,进入正题,这里没有 ...
- Web设计快速入门
在基本顺利完成功能的基础上,就需要考虑美观的问题了,在眼球经济的当下,一个面向用户的产品,如果没有好的UI,那么它就是不合格的.这部分内容算是初出茅庐,会持续更新. "一个人的外貌决定我是否 ...
- 什么是响应式web设计
什么是响应式web设计 现在开发一个产品,基本上都会需要兼顾 PC端和 移动端. 一般有两种思路: 1.为每个终端做一个特定的版本,并给2级域名,根据终端环境调用不同的版本代码. 2.一个网站能够兼容 ...
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- 外媒速递：十大最佳心理学概念助你提升Web设计效果
外媒速递是核子可乐精选的近日国外媒体的精彩文章推荐,希望大家喜欢! 本期给大家推荐的是帮助你提升Web设计效果的十大最佳心理学概念.改善企业云环境协作效率的九款卓越工具.选择移动应用开发工具时要考虑的 ...
随机推荐
- 01 Javascript简介（了解）
Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) JavaScript历史背景介绍 布 ...
- 上手更快的网络文件系统 —— oxfs
什么时候需要网络文件系统? 做嵌入式的同学经常会使用 NFS 讲 host 上的某个目录挂载到开发板上,方便 host 上编译构建后能直接在板子上运行,减少手工拷贝操作. 网站开发时,在 host 上 ...
- 中转Webshell 绕过安全狗（二）
前言 在实践中转webshell绕过安全狗(一)中,在服务端和客户端均为php.某大佬提示并分享资源后,打算使用python完成中转.部分代码无耻copy. 客户端 本地127.0.0.1,安装pyt ...
- 点菜网---Java开源生鲜电商平台-商品基础业务架构设计-商品分类(源码可下载)
点菜网---Java开源生鲜电商平台-商品基础业务架构设计-商品分类 (源码可下载) 说明:我们搞过电商的人都可以体会到,搞生鲜电商是最复杂的,为什么复杂呢?我总结了有以下几个业务特性决定的: 1. ...
- denied: requested access to the resource is denied
1.vim /etc/docker/daemon.json 增加一个daemon.json文件 { "insecure-registries":["192.168 ...
- CRISP-DM--数据挖掘标准流程
CRISP-DM--数据挖掘标准流程 在1996年的时候,SPSS,戴姆勒-克莱斯勒和NCR公司发起共同成立了一个兴趣小组,目的是为了建立数据挖掘方法和过程的标准.并在1999年正式提炼出了CRISP ...
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- asyncio系列之sleep()实现
先来看个例子,自己实现的模拟耗时操作 例1 import types import select import time import socket import functools class Fu ...
- iOS组件化开发一pod库包含MRC的文件处理（五）
在做项目的过程中,建立了一个私有pod库,在这个库中存在mrc类文件这个时候如果在使用了arc的工程中引用这个pod的工程中手动设置当然也可以就是费时费力.现在我们来看看如何在私有库配置文件里配置自动 ...
- visual studio code emmet 插件不提示？解决方案
使用visual studio code编辑.vue文件时,emmet插件无法使用, 可以通过以下方试解决: code →首选项 →设置 ,在右侧窗口“用户配置”.“工作区设置”添加以下代码: // ...