DIV布局小结

          网页设计笔记

    学习使用HTML+CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编辑工具，例如Dreamweaver，它是目前支持CSS标准最完善的工具。
     过渡型代码，可以访问http://www.macromedia.com/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了，同时Dreamweaver里是自动编辑好的。

为所有图片添加alt属性：

    alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，    代码才会被W3C正确性校验通过。如：<img src="logo_unc_120x30.gif" alt="UNC公司标志，点击返回首页">

用CSS定义元素外观：

     我们在写标识时已经养成习惯，当希望字体大点就用<h1>，希望在前面加个点符号就用<li>。我们总是想<h1>的意思是大的<li>的意思是圆点，<b>的意思是“加粗文本”。       而实际上， <h1>能变成你想要的任何样子，通过CSS，<h1>能变成小的字体，<p>文本能够变成巨大的、粗体的，<li>能够变成一张图片等等。我们不能强迫用结构元素实现      表现效果，我们应该使用CSS来确定那些元素的外观。例如，我们可以使原来默认的6级标题可以看起来大小一样：
     h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

用结构化元素代替无意义的垃圾：
     例如：句子一<br /> 句子二<br /> 句子三<br />则可以使用无序代替：
         <ul>
            <li>句子一</li>
            <li>句子二</li>
            <li>句子三</li>
          </ul>
     只是表格仅仅用于其本意：展示数据列表。而不允许使用表格排版和定位。

好书推荐：    《网站重构--用web标准进行设计》
              《CSS权威指南》
              《More Eric Meyer on CSS》

调用样式表：
      页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样：
                 <style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
      外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
                 <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：

        a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
        a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
        a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
        a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
        以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是       “LVHA”。
1.辅助图片一律用背景处理

管可以用<img>直接插在内容中，但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。例如：相册中的     图片、图片新闻中的图片，上面的3d盒模型图片都属于内容的一部分，它们可以用<img>元素直接插在页面里，而其它的类似logo，标题图片，列表前缀图片都必须采用背景       方式或者其他CSS方式显示。
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。

2.100%自适应高度?

为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。
其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。

"display:block;"表示将标签a当作块级元素来显示，使得链接变成一个按钮；
"BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明，"2px 8px"指定图标的位置是距左边2px，距上边8px。这一句也可以拆分写成四句："BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
"#menu li a:hover"定义了当鼠标移动到链接上以后的颜色变化和小图标变化。
使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

css布局中的居中问题：

body {TEXT-ALIGN: center;}使body里边所有的内容居中；
CSS2中的盒模型是关系到我们排版定位的关键，例如<div>就遵循盒模型规范。盒模型定义的margin，background-color，background-image，padding ，content，border，