web color知识积累: 颜色
PS web样式
19类网站配色方案
综合配色手册
设计师谈网页配色
其他色彩文档
标志设计
color辅助小工具：
ColorKey
TakeColor
网页流行色选取器
在线工具：
颜色对照（按色彩名称分）
颜色对照（按色彩性格分）
<option value="image/001.gif">笑的表情</option>
<meta http-equiv="Refresh" content="3;url=guest.php"> //3秒内刷新页面网页设计注意用到 200908:
网页站常见错误，注意 200908:
<a>别忘了写<a href="http:/" >
分大小写Array
<input type="button" οnclick="counttime()"
<input type="submit" οnclick="counttime()" 这是错的，要看清type的类型制作网页时插入的图片均应采用相对路径来标记。 [W1]
escape 编码 加密
unescape 解除编码
document.write(unescape(escape( '<html><><>fdsfsdfsdfsdf<><><</html>' )));
//这样就可以加密 输出的内容居中
body {
text-align:center;
}
Margin: 0 auto ;通过css控制表格隔行变色
tr{background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#9BD1FA")}
<TD οnmοuseοver="this.style.borderWidth='0.5cm';
this.style.borderColor='blue';
this.style.borderStyle='solid'">
cell.style.border = "none ";滑过 效果 ：
css方法
a.bottom:hover {
background-color: #efefef
}js方法 DEMO
内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。
BODY{font-size:10pt}
.s3 {font-size:80%}
<p class = "s3">这段文字大小是10pt的80%。</p>
HTML相对路径:
../ 表示源文件所在目录的上一级目录，../../ 表示源文件所在目录的上上级目录，以此类推
引用下级目录的文件，直接写下级目录文件的路径即可
轮廓相关属性：
Outline-color
Outline-style
Outline-width
三个常用属性：
Display:适用于cs1 cs2用于设置目标对象的光标以及目标对象的显示与隐藏。这个属性的常用值是none，用于设置对象隐藏，一旦此对象隐藏，其占用的页面空间也会释放，如果没有这属性设定值，其目标对象会显示出来。
Visibility:适用于css2 ，用于设置对象是否显示。与display属性不同，通过此属性隐藏某个xhtml元素后，此元素占用的页面空间依然会被保留。此属性的两个常用值是：visible,hidden，分别用于控制目标对象的显示和隐藏。
Cursor:适用于css2，用于设置目标对象上光标的形状。此属性的值可以是多个，多个值可用英语逗号（，）分隔。此属性的常用值有auto/crosshair/default/hand/move/help/text/wait/url(url)等，分别对应于自动光标、十字光标、客户端光标、手形光标、十字箭头光标、帮助光标（带问号的）、文本光标、沙漏光标和自定义光标。
浏览器兼容性:
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown/9; // 所有IE浏览器
+color:red; // IE7
_color:green; // IE6
}检查浏览器类别
IE
document.all IE上每个可编程元素
navigator.appName == " "
NS
document.layers NS上每个层的集合
navigator.appName == "Netscape"
IE中<div> <span>
NS中增加了<layer> (用于绝对定位) <ilayer>（用于相对定位）
<dib id=layer1 style ="left:200">
在IE中使用layer1.style.left 引用left样式属性
在NS中使用document.layer1.left
解决方法：
在程序中定义一个变量，根据浏览器不同，为这个变量赋予不同的设置不同的设置值
var block;
if(ns) block = document.layer1;
if(ie) block = layer1.style;
层对象的visibility属性有三个设置值
1 inherit ,元素的可见性与父元素的可见性相同
2 visible或show,显示元素，在IE中为hidden,.在NS中为show
3 hidden或hide，隐藏元素，在IE中为hidden，在NS中为hide
层的定位：
CSS-P的top,left,width,height等属性指定了层的位置和大小，在IE和NS中设置这些值的方式完全一样，但读取这些属性时的返回值不太一样。在IE中，这些属性值的返回结果并不是整数，总是在数值的后面加"px".另外，在一些情况下，IE无法读这些属性的初始值，返回结果总是为空。为些IE专门定义了pixelTop,pixelLeft,pixelWidth,pixelHeight等几个整数类型的CSS属性。要读取一个名为block的对象的left属性，使用parseInt(block.left)
对于NS中的其它可编程元素，例如图像，如果位于层的外面，其引用语法为:
document.images["图像名"]
如果定义在层的内部，其引用语法变为:
document.layers.layer1.document.images["图像名"]
无论图像位于层内或层外，其在IE中的语法都为：documetnt.images["图像名"]
IE中所有元素，无论是位于层外或层内，都共用一个坐标系，各个层中的元素的绝对坐标都是相对同一个坐标原点来度量的
在NS中，每个层都有一个独立的坐标系，各个层中的元素的绝对坐标都是相对于各自的坐标原点来度量的
JS文件的命名不超过8个字符
<input type=image src=>
list-style:none
margin:0
padding:0
float: left
background-attachment:
新闻列表前的小图标用list-style-image来实现 [W1]
各浏览器透明度区别,见下
css缩写总结 （background font list-style border margin）
个性图标:
<link rel="SHORTCUT ICON" href="http://127.0.0.1/favicon.ico"> [W2]
<link rel="BOOKMARK" href="http://127.0.0.1/favicon.ico"> 加快图片显示：[W3]
加快网页加载速度
用HTML代码指定图表大小。比如这个代码：
<img src="graphic1.jpg" height="240" Width="65">
onMouseOver 切换查看大图
<a href="" onm ouseOver="enlarge('p32.jpg');">
<img />
</a>
链接时留白，如：
传说中的 链接 在这里。
滑过显亮 8.5.2 缺少的点击空间
Robot.txt 来告诉搜索引擎不要搜索哪些东西等 放在网站根目录下 [W4]
#Disallow directory /tupian/
user-agent:*
Disallow:/tupian/
Disallow:/*.png$
运用with(window.document.body.style) 不建议用 好像效率低的
{
borderWidth="10";
borderStyle="solid";
borderColor="red";
}
CSS：
css缩写总结
CSS学习代码集合: 实例
双色文字 图片隐藏 选项卡导航栏 一张图完成的导航 圆角
无图片实现圆角框
开头常规]：
body{
margin:0; [W5]
padding:0;
}
a{
text-decoration:none;
}
clear: both; 清除清除
具有继承inherit的CSS属性汇总:(最典型的就是 color 这个属性)
/*常用*/
02. color:;
03. text-indent:;
04. text-align:;
05. line-height:;
06. list-style-type:;
07. list-style-image:;
08. list-style-position:;
09. list-style:;
10. cursor:;
/*不常用*/
13. direction:;
14. text-transform:;
15. word-spacing:;
16. white-space:;
17. letter-spacing:;
18. caption-side:;
19. border-spacing:;
20. empty-cells:;
21. border-collapse:;
22. speak-header:;
23. page-break-inside:;
24. page:;
25. orphans:;
26. widows:;
27. volume:;
28. speak:;
29. azimuth:;
30. quotes:;
IE常见私有属性-Scrollbar
IE常见私有属性-zoom
CSS选择器：
类型/标签选择器
CLASS
ID
通用选择器 *｛ ｝
派生选择器 div span { } [W6]
子选择器 div > span { } [W7] //span 必须位于div的直接子元素
包含选择器 div span //span 不管是位于div的几层子元素，都起作用
属性选择器 *[href] { } [W8]
邻近选择器 li+li{ } [W9]
div[id] {} //对有id属性的Div元素定义
div[id=xx] //对id属性为xx的div元素
组合选择器
关联选择器P EM{} 其优先权比 EM{} 大
Css的优先级：
ID选择器 》 class选择器 》 HTML选择器
内联样式表 》 嵌入样式表 》 链接样式表
伪类可以与CSS类配合使用：
a.red:visited { }
<a class="red" herf=" " > </a>
CSS高级语法：
伪类
伪元素
p:first-child //第一个P元素
p>i:first-child //P元素的第一个i元素
p:first-child i { } //第一个P元素的所有i元素
p:first-line{ } //伪元素，首行
p:first-letter{ } //伪元素，首字母
p.artide:first-letter{ } //伪元素 + CSS类
p:before
{
content: url(images/quote.gif);
}
p:after
{
content: '《end》';
} [W10]
语言伪类
:lang(de)
{
quotes:'《' '》' '/2039' '/203A'
} IE7 不支持lang伪类
选择器的组合 ：
h1,h2,h3
{
color:Marron; [W11]
}选择器合并：
总体优先权（优先级） [W12]
从上到下 从总体到局部
ID选择器》类选择器》标签选择器
内联样式》嵌入样式》连接样式
2009CSS浏览器兼容问题总结
CSS hack: !import (IE6不支持、firefox IE7都支持)
.test {
background-color: black; /* firefox, opera, ie8 */
[;background-color: green;] /* safari, chrome */
*background-color: blue; /* ie7 */
_background-color: red; /* ie6 */
}
各浏览器透明度区别：
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/
filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/
opacity: .3; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/让网页在ie及火狐下都能正常显示 margin:
把所有的元素的边界设置为0
*{
margin: 0px;
}margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”>
相应的css为 #imFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
FF/IE8/IE6的hack书写顺序为： Firefox、IE8、IE6
区别FF/IE8/IE6： left:-62px;*left:-84px;_left:714px;
区别IE8/IE6： top:470px;_top:474px;
区别FF与IE所有浏览器（包括IE5/6/7/8/）： left:160px; left:144px/9;
body元素：
leftmargin body与浏览器左边界距离
topmargin
XHTML代码规范：
区分大小写 属性要加" "
正确嵌套所有元素 <br/> <img src='...jpg' />
特殊字符用编码表示 [W13]
XHTML 中doctype html head body title 是强制性的
XHTML 用id属性代替name属性
重要的兼容性提示：应该在"/>" 前加一个额外的空格
推荐使用外部链接来调用脚本：
<script language = "javascript" type="text/javascript" src="scripts/menu.js" > </script>
DOCTYPE 选择 [W14]
过渡的 严格的 框架的
css链接：css导入 引入
<link rel="stylesheet" herf="css文件路径" type="text/css">
@import 可以放在样式文件中，但要放在本身的CSS之前
@import url(css1.css);css导入普通用法：
<style type="text/css">
li {list-style:none;}
</style>js导入：
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> [W15]js导入普通用法：
<script type="text/javascript"> </script>
编写xml文件时，注意编码形式。
如果 是GB2312，此文件存储是应为ANSI编码
如果 是utf-8，此文件存储时编码应为utf-8
meta [W16] 必需的属性:
属性 | 值 | 描述 | DTD |
some_text | 定义与 http-equiv 或 name 属性相关的元信息 | STF |
meta 可选的属性:
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.[W17]
属性 | 值 | 描述 | DTD |
· content-type · expires · refresh · set-cookie | 把 content 属性关联到 HTTP 头部。 | STF | |
· author (作者) · description(网站主要内容) · keywords · generator · revised · others · roobs (搜索机器人向导) · copyright (版权) | 把 content 属性关联到一个名称。 | STF | |
some_text | 定义用于翻译 content 属性值的格式。 | STF |
xmlns [W18]
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns:math="http://www.w3.org/1999/Math/MathMl"> [W19]
不可继承属性：(display visibility )
display:none [W20] block
visibility:hidden [W21] visible
临时隐藏内容：
text-indent: -999px ;
水平：
text-align:center
margin-left:auto
margin-right:auto
[W22] 垂直：
top: 50%
margin-top:-50px
定义单元格间边框是否合并：
border-collapse: separate(默认分开) collapse(合并)
max-height: auto|..px
min-height:
段首缩进：
text-indent: 4em （4个字符）
首字符下沉与大写：
选择符： }
p:first-letter{font-size:18px;
color:red;
float:left;
text-transform:uppercase;
}间隔与空白：
letter-spacing:10px 字母与字母间 文字与文字之间
word-spacing: 单词与单词之间
white-space: normal (忽略多余的空白) 不可继承
pre (不忽略多余的空白)
nowrap (文本保持同一行)
文本大小写转换：
text-transfaorm:
图文混排：
<p> <img > </p>
img{float:right ; margin : 10px ; }
行高，行距：
font-family:"宋体","黑体"
font: bold 24px "宋体"
font: bold 24px/48px [W23] 宋体"
超链接的正确使用顺序：
：link 访问前
：hover 滑过
：visited 访问后
：active 被激活时
表单也可以被修饰：
.text {}
.textreea{}
.submit{}
clip: auto| rect (数值) [W24]
overflow: hidden|scrool [W25]
定义虚线：
style = "border-bottom:#ac 1px dashed;"
#links a:hover {filer:none } /*取消CSS注释*/
{background: url(banner.gif) top center} /*50% 0%*/
{background: url(banner.gif) center} /*50% 50% */background:transparent 透明无颜色
div
span [W26]
CSS table-layout 属性：
automatic （默认） 列宽度由单元格内容设定
fixed 列宽由表格宽度和列宽度设定
color 文本颜色
document.all.oDiv //引用图层oDiv
document.all.oDiv.style.display=”" //图层设置为可视
document.all.oDiv.style.display=”none” //图层设置为隐藏
<script language=”JavaScript”>
<!--
var myVariable = “Hello there”;
var newVariable =
myVariable.bold().italics().fontcolor(“blue”).fontsize
(“24pt”);
document.write(newVariable);
// -->
仅IE支持:
shu标滑过
模湖 filter:blur(add=ture,direction=135,strength=200)
投影 filter:dropshadow(color=gray,offx=5,offy=5.positive=0)
阴影 filter:shadow(color=gray,direction=225)
透明色 (指定对象中哪个为透明色)
发光 filter:glow(color=red,strength=10)
Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片 filter:xray
区域定位:
position:
absolute 以网页左上角为基准
relative 以上一个元素的位置
static 以HTML的默认位置
overflow-x
overflow-y
.InfoContainer li{
display:list-item;
list-style-image:url(images/recruitment_sml_logo.jpg);
color:#666666;
font-size:11px;
padding-bottom:10px;
}
Shortcut Icon 就是在网址列前面出现的Icon
<SCRIPT LANGUAGE="JavaScript">
<!--
Image1= new Image(100,50)
Image1.src = "image1.gif"
Image2 = new Image(100,50)
Image2.src = "image2.gif"
Image3 = new Image(100,50)
Image3.src = "image3.gif"
// -->
</SCRIPT>
例1、禁止所有搜索引擎访问网站的任何部分
User-agent: *
Disallow: /
例2、允许所有的robot访问
User-agent: *
Disallow:
（或者也可以建一个空文件 "/robots.txt" file）
例3、禁止某个搜索引擎的访问
User-agent: BadBot
Disallow: /
例4、允许某个搜索引擎的访问
User-agent: baiduspider
Disallow:
User-agent: *
Disallow: /
例5、一个简单例子
在这个例子中，该网站有三个目录对搜索引擎的访问做了限制，即搜索引擎不会访问这三个目录。
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /joe/
margin 两个块元素的左右 一下分界
左右是两个块元素的数值相加] 上下是拿上边元素的margin
派生自<div>的所有<span>标记
限制在父元素的直接子元素上
页面上所有设置了href属性的元素
在无序列表中，需要突出另一个列表项，现对其后的所有项使用另一个样式，此时就可以使用邻近选择器
在目标元素的前面或后面插入内容
把h1,h2,h3标记的文本内容都...
选择器越具体优先级就越高，也就是
.classA .classB .classC{font-size: 25px;}
.classB .classC{font-size:18px}
.classC { font-size: 12px; }
这里.classA .classB .classC的优先级最高，.classC的优先级最低；
在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；
标有”!important”的规则有最高优先级。
如：
<img src="abc &def " />
<img src="abc & def " />
1．过渡的
一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2．严格的
一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如<br/>等。严格的DTD的写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3．框架的
一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。
注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。
( language="javascript" )
虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
在文档中定义一个或多个可供选择的命名空间
就可以在 div 中使用该前缀了，就像这样：
<math:div>x3/X<div>
空间已经消失
空间还存在的
.等价于：
body{margin: 0 auto}
这里的48px是指行高
只有在position的值设定为absolute 时 ，该属性才能正常使用
hidden 不显示超出对象尺寸内容
scrool 只显示滚动条
一行的块
HTML:
<frameset></frameset> 布局 scrolling 滚动条
<frameset cols="30%,*">
<frame>
<frameset rows="60%,*">
<frame>
<frame>
</frameset>
</frameset>
<frame src="UntitledFrame-17.html" scrolling="yes" name="main">
<a href="http://www.baidu.com" target="main">32132132</a>DIV不能套在<p>里
<p></p>相当于两个<br> <p>也可以单个使用
<nobr>强制不换行
<blockquote>缩进显示
<pre>原始版面
CSS布局 进阶：DIV
固定宽度设计与流体设计 [W1] ch09_eg01 ch09_eg02
最好 采用流体设计和固定宽度设计的混合技术
具有较高分辨率显示器的用户倾向于在他们所浏览窗口的边缘留有较大的空余空间，显示更多的桌面或者其他正在运行的应用程序。因此，当用户具有更高分辨率的屏幕时，他们的浏览器窗口将很少占用整个屏幕。
Web UI 设计(网页设计)命名规范
1. Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2.
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3. Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5. Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.
组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap
布局设计：
9.1.6 创建站点地图
在创建站点地图时，该层次结构图将决定导航的内容--请记住，站点最多只能分为7个部分。在一个页面上应当尽可能地避免具有超过10个主要链接。
在站点的分部中，副标题和链接的数量可以超过7个，并且子导航或次要导航有时在页面中的出现位置与主要导航不同。
1. 顶部导航 非常流行的方法
2. 左导航 较为少见的选择
3. 顶部和左导航 结合使用顶部导航和左导航，其中顶部导航用于主要导航，左导航用于次要导航或者子导航。图9-9给出了这样的示例，该示例来源于eBay.com，它的顶部实际上具有两个导航集，左边的子导航取决于用户所在的部分。
4. 底部导航 通常应当避免将主要导航链接放置在页面的底部，因为如果不使用框架(框架将使页面的编写变得复杂--建议仅在内容确实需要框架时才使用它们)或者CSS定位特性(CSS定位特性仅被最新的浏览器支持)，则无法保证它们在页面加载时可见。
但是，通常将重要性较低的链接放置在页面的底部--例如，到版权声明、隐私政策以及条款和条件的链接。这些是您可能希望在每一个页面上都包含的项，但是又不希望它们占用页面初次加载时的宝贵屏幕空间。
5. 右导航 少会发现 通常右边的列用于额外的内容或到站点其他部分的链接，这些对于用户的导航来说并不重要。例如，电子商务商铺可能会在右边的列中包含一系列到相关产品或者添加到商铺的最新项的链接；这些都是为站点用户添加的额外功能，对于导航来说不是必须的功能。
主页面不应当仅介绍公司市场营销部门希望介绍的每周或每月营销成绩。主页面不应当只是他们的广告栏，而必须也能够解决站点主要访问者的需求。例如，市场营 销部门可能希望推出一款新产品，而访问站点的大多数顾客希望找到一种较早的、更可靠的产品。如果这些用户无法在站点中找到他们想要的信息，则市场营销部门 无法最大化推广他们的产品。在用户的需求和公司的需求之间进行平衡非常重要--并且用户应当具有更高的优先级。
因为访问者趋向于浏览页面而不是阅读所有内容，所以所有题头和链接名都应当以重要的关键字开头，这样有助于用户理解该部分或链接的作用。
注意：
补充说明一下，曾经多次有客户要求我创建flash动画，用于在用户到达站点的主页面之前播放。但是，这些所谓的醒目页面通常不被赞成使用，无论动画多么令人印象深刻，因为它们阻碍用户查看希望看到的内容。
内容页面是大多数站点的主要部分；在新闻站点中，内容页面可以包含一些文章；在电子商务站点中，内容页面可以包含每一件产品的细节。内容页面显示内容的方式应当使用户容易阅读信息。
本章前面已经提到，如果具有多个产品或服务，则为每一项所提供的信息应当一致。如果处理的是衣服，访问者应当能够快速并方便地了解这款衣服具有的不同颜色 和大小。可以通过将类似的信息放置在每个页面的相同位置来实现该操作。根据这种思想，实际上仅需要设计一个文章页面或者产品页面，所有其他页面应当遵循该 模板。
不能使页面太拥挤；清晰的表示能够使用户将注意力集中于内容。即使有大量的信息需要填充在页面上，也需要确保不同元素之间存在足够的空间。
图像应当与产品、服务或正在讨论的主题相关，如果它们是左对齐或者右对齐，并且文本环绕在它们周围，则通常看上去更加美观。在图像和它们周围的文本之间也应当存在间隔(可以使用CSS中的padding特性或margin特性进行设置)。
注意：
应当避免在任何商业站点上使用剪贴画或GIF动画，但是如果需要的话，可以在个人站点上使用它们。虽然跳舞的猫第一眼看上去非常可爱，但是如果它与尝试向用户展现的主题无关，则将会转移站点的实际目标。
当需要展现大量文本时，确保页面中的文本行不要太宽。
确保所有文本被划分为适当的副标题，并且尽可能使用非常短的段落编写专门用于Web的版本。
设计人员希望创建的一种最常见的效果是具有多列的布局--例如，页面左边的一个窄列用于导航，紧跟的第二列包含页面的主要内容(并且有时右边也存在多列)。
专业设计人员趋向于使用网格来布局页面--网格由一系列的行和列组成，它们定义了页面的形状和内容的位置。例如，图9-10给出了一个页面如何划分为多行和多列(使用一些粗黑线隔开每一行和每一列)。
这些行和列可以具有不同的高度和宽度，但毫无疑问地是存在一个网格。页眉包含多个行(广告、标题和搜索栏、导航以及热点主题/版本)。然后在页面主体的开 始部分存在另外两行(第一行显示日期，第二行是标题/故事提要)。在此之后，页面主体具有两列的布局；主列用于放置文章，第二列用于放置广告。
9.4.1 单列布局 ch9_eg03
9.4.2 双列布局 ch11_eg04
9.4.3 3列布局 ch9_eg05
9.4.4 牺牲列 [W2]
利用百分比值指定页面的比例
有时设计中的第三列(右边的列)也称为牺牲列
单元格向左打通的栏数
单元格向下打通的栏数 HTML几种常用的字符及代码表： < < > > & & " " 空格 onBlur() 失去焦点 onFocus() 得到焦点
表单控件分组 框架分组 锚点连接 邮件连接
单元格向左打通的栏数
单元格向下打通的栏数 HTML几种常用的字符及代码表： < < > > & & " " 空格 onBlur() 失去焦点 onFocus() 得到焦点
<form name=" " method="post">
<dl>
<dt>传说中的标题</dt>
<dd>传说中的标题注解1<input type= /> </dd>
<dd>传说中的标题注解2 <input type= /></dd>
</dl>
</form>
<table>
<th> </th> <th> </th>
<tr>
<td> </td>
<td> </td>
</tr>
<table>
<td colspan=2> </td> 单元格向左打通的栏数
<td rowspan=2> </td> 单元格向下打通的栏数
标签：Web,color,前端,元素,页面,导航,选择器,属性 From： https://blog.51cto.com/u_15012132/7025874