2011年12月29日：DIV里的
padding应用注意，比如总宽500=width:50px+padding-left:450px 第一篇
（1）XHTML和HTML之间的区别之一是：XHTML总是要求结束标记，而HTML严格要求结束标记。
（2）XHTML有三种可能的DOCTYPE声明：
◇
严格的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
◇
过渡的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
◇
框架集的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
（3）
link和@import都可以多次使用（
关于这两者的区别请见：）。
DIV+CSS规划页面结构如下：
<div id=header></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=search></div>
<div id=shop></div>
<div id=footer></div>
一、
float : none | left | right
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边
EG：
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}
position : static | absolute | fixed | relative
static : 默认值。无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
EG：
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div> </div>
#wrap{ position:relative;/*相对定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}
区别：float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！
二、
三行两列：
#header{width: 700px;margin-right: auto; margin-left: auto;}
#bodycenter{width: 700px; margin-right: auto; margin-left: auto;}
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right; width: 420px;}
#footer{width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }
三、
提示：margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
四、
（1）background:url(logo.gif) no-repeat;
背景图片，不填充
（2）<div class="zxwz_content">
<ul>
<li>·2点半播报：横盘整理</li>
</ul>
</div>
.zxwz_content ul{ padding:0px; margin:0px; line-height:25px;}
.zxwz_content ul li{ padding-left:16px;display:block;width:164px; list-style:none;
border-bottom:#ccc dashed 1px; }
2008-3-25晚
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
a.Red:link,a.Red:visited,a.Red:active,a.Red:hover{color:Red;text-decoration: none;}
<div id=header></div>
<div id=menu></div>
<div id=footer></div>
#header,#menu,#footer{width:860px;margin:5px 0px 0px 2px;}
<div class=headl></div>
<div class=headc></div>
<div class=headr></div>
.headl,.headc,.headr{width:280px;padding-left:20px;float:left;}
background:url(logo.gif) left top no-repeat -30px -20px;//背景图片为logo.gif;就一张独立,靠左,置顶,不填充;离左上角为x轴为-30px,y轴-20px;
BORDER-bottom:#DBDBDB 1px solid;//下边框
BORDER-bottom:#DBDBDB 1px dotted;//下虚线
dashed、solid、dotted阴影线、实线、虚线、双线
overflow:hidden;//使用它可防止框架被撑破
以列表的形式显示信息:<ul></ul>、<li></li>、<ol></ol>
list-style:none取消列表前点
display:block;
margin、border和clear
clear:both /*清除左、右浮动*/；clear:left/right
margin:auto; /*层居中*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
img{border:none;}
button{border:none;}
h1, h2, h3, h4, h5, h6 {margin:0;padding:0; font-size:12px; font-weight:normal;}
*{padding:0; margin:0;}
vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数
baseline | sub | super | top | text-top | middle | bottom | text-bottom |
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
top：和本行位置最高元素对齐。
bottom：和本行位置最低元素对齐。
2008年4月1日 星期二
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
样式表通用的：
body{margin:0;padding:0;font-family: 宋体;font-size: 12px;color: #333333;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
ul,li,ol{list-style:none;}
button,img{border:none;}
a:link,a:visited,a:active{color: #333333;text-decoration: none;}
a:hover {color: #FF0000;text-decoration: underline;}
a.red:link,a.red:visited,a.red:active{color:red;text-decoration: none;}
a.red:hover {color:red;text-decoration: underline;}
/*链接，已访问，活动*/
/*变换图像（鼠标在上面），none为始终无，不写为始终有，underline为仅在变换图像时显示下划线，还有隐藏*/
2009年1月8日 周四
