〓〓 DIV+CSS 学习（入门）教程〓〓（内容更新）|口- 技术交流 - 若水UEBBS.COM社区—〖石家庄经济学院论坛〗

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看楼主更多操作楼层直达

0 发表于: 2006-07-26

前言：

今后将陆续转载部分精品学习教程和发一些自己学习中的经验在这里

希望和大家一起学习一起进步

不论什么样 web2.0的标准已经到来，越来越多的网站开始基于div＋css的网页设计当中。

希望提供这些内容给需要的人

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)
边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)
背景的属性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);

评价一下你浏览此帖子的感受

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 1 发表于: 2006-07-26

初学CSS和标准建站的一些CSS常用技巧 /*无所不能的CSS的*通配选择符*/

* {

margin:0;
padding:0;}

/*此定义解释:margin:0;padding:0;在CSS最上面先用 * 一次性统一制定，可以避开CSS的"盒模型"考虑问猓?迸龅叫枰?乇?
指定margin或padding值的时候在分别另外指定，后面的值将覆盖前面的值。*/

/*CSS中容易被忽视的Outlines 轮廓属性*/
问题：为什么加了<a>标签的<img>全部自动加上了蓝色的边缘？
因为每个默认<img>的boarder值不为0，可以将boarder设置为0，可以解决问题。

img{
boarder:0;
display:block;
}/*此定义解释:boarder:0;可以避免带链接的图片边缘出现蓝色边框。display:block；将图片以块级元素显示*/

/*其他还有非常容易<form>,<select>,<input>,影响布局的标签，都可以先将其margin和padding都预先设置为0*/

form{margin:0;padding:0;}
select{margin:0;padding:0;}
input{margin:0;padding:0;}

body{
margin:0px;
font: normal 12px "宋体", Verdana, Arial, Helvetica,sans-serif;
text-align:center;
color:#000;
line-height:140%;}

#top_box
{width:760px;height:63px;
margin:auto;
padding-top:10px;
text-align:left;
}

a:link,a:visited,a:active{color:#000; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:underline;}

/*此定义解释：将所有A标签预先指定样式，也可用在CSS最开始一段代码，统一定义*/

/*有关CSS的其他常见问题及解决办法和分析：*/

/*关于CSS容器与CSS元素的适应问题*/
/*例如有时候我们要在首页动态打印一列十条文章，要放在一个CSS容器DIV内，若每行文字太多，元素很容易破坏容器而使整个布局变坏
下面是解决的办法*/

#nowrap{table-layout:fixed}

<div id="nowrap">文字不折行</div>

等同于<td nowrap>文字不折行<td>

CSS指定宽度文字自动换行显示：

#wrap{word-break:break-all;width:200px;}
<div id="wrap">每200像素宽度文字就自动折行</div>

/*CSS常用缩写规范*/

/*缩写示例：
1.*/

.pop_font{
font: bold 11px "宋体", Verdana, Arial, Helvetica,sans-serif;}

/*缩写示例：
2.*/

.pop_td{
border-right: 1px solid #C1DAD7;}

/*缩写示例：
3.*/

.pic_background{
background: transparent url(/images/bullet1.gif) no-repeat 20px 20px;
padding:2px 0;
margin:2px 0 2px 0;}

/*关于DIV布局中的UL,LI中带ID的CSS属性定义方式:*/

<div id="main">
<ul id="ok1">
<li id="li1">文字1</li>
<li>文字2</li>
</ul>
<ul>
<li>文字3</li>
</ul>
</div>

/*对 "文字1"定义CSS样式：

以下都是正确的指定样式：*/
#li1 {/*指定样式代码*/}
#main li#li1 {/*指定样式代码*/}
#main #ok1 #li1 {/*指定样式代码*/}
#main ul#ok1 li#li1{/*指定样式代码*/}

/*以下都是错误的CSS指定"文字1“的样式：*/

#li{}
#main ul li1{}
li1{}

/*end*/

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 2 发表于: 2006-07-26

CSS的十八般技巧

一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个class"update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class="update"将被使用，因为class比p更近。
八.多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
Item 1
Item 1
Item 1
这段代码的CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码
Item 1
Item 1
Item 1
样式定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：
background:url("images/***.gif") #333;
可以写为
background:url(images/***.gif) #333;
如果你加了引号，反而会引起一些浏览器的错误。
十一.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如：定义所有标题的字体、颜色和margin，你可以这样写：
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }
十二.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。
十三.清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决
十四.横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
你可以这样定义使它横向居中：
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
@import url("main.css");
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
@import "main.css";
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。
十六.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
/* \*/
* html p {
declarations
}
/* */
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
十七.调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
十八.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
selector1,
selector2 {
property:value;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
最后，关闭的大括号}单独写一行。
空格和换行有助与阅读。

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 3 发表于: 2006-07-26

定义标题的最好方法

一个文档标题，最好的定义方法是什么？要回答这个问题，先设想我们要在一个页面上定义文章的标题，通常我们有三个方法来实现这个简单目的：

方法一：有意义吗？
<span class="heading">文章标题</span>
虽然在某些情况下<span>会是一个方便的标签，但它并不能表达出标题的完整含义。采用这个方法的一个好处是，我们可以对它附加一个CSS规则，分配其一个heading class，使其文字象标题一样显示。
.heading { 8qwPk4
font-size: 24px; wit
font-weight: bold; glZjo
color: blue; LF ;gdF%@
}

ok，现在所有的标题都用heading class标记成了大号的粗体字体，并且为蓝色。太棒了！但是这样做对吗？如果有人用一个不支持CSS的浏览器来观看，会怎样呢？
举个例子，如果我们设置的这个外部样式表的规则不被老版本的浏览器支持，会怎样？又或者有视觉障碍的人用屏幕阅读器来阅读这个页面，又会怎样？一个访问者通过这些途径所看到（或听到）的应该和这个页面上正常的文本没有任何区别。

尽管class="heading"为这个标签增加了一点意义，但<span>仍然只是一个普通的标签，可以被大多数浏览器的缺省样式所修改掉。

搜索引擎检索这个页面时会略过<span>标签，就好象它不存在一样，不会对其可能包含的关键字给于一点额外的重视。在后面我们会更多的谈到搜索引擎和标题的关系。

最后，由于<span>标签是一个内嵌元素，我们可能需要把它嵌套在一个额外的块级元素中，比如<p>标签或<div>标签，为的是使它能够形成单独的行，这会进一步被非必要的代码弄乱你的标签。而这些额外增加的标签却是必须的，这样才能使不支持CSS的浏览器显示出没有差别的文本。

方法二:<p>和<b>组合
<p><b>文章标题</b></p>
使用一个段落标签，将会给我们带来块级的显示，<b>会把文本变成粗体。但是用这个方法标记一个重要的标题时，我们面对的是同样无意义的结果。
不象方法A，<b>标签能在可视化的浏览器中把文字显示成粗体——甚至在不支持CSS的浏览器中。但是和<span>标签一样，搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高的优先。

难以设计样式
用普通的<p>和<b>的组合，也带来了另一个缺憾——无法把这个标题设计成不同于其他段落的样式。我们可能想用一个特别的样式来突出标题，来使页面内容更清晰更具结构，但是用这个方法只能使其显示成粗体。

方法三:样式加实质
<h1>文章标题</h1>
恩，多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们，<Hn> 就能为页面内容提供灵活的、可索引的、以及可样式化的结构。
这也是聪明的定义方法，你会发现它很简单。不再需要额外的标签，你可以说，这仅仅比另外两个方法节省了一点点的字节，可以忽略不计，但节省一点是一点。
<h1>一直到<h6>，代表了标题的六个级别，从最重要的（<h1>）到最次要的（<h6>）。他们本身就是块级的，不需要增加其它元素来使其单独成行。简单，有效——就是好工具。

轻松定制样式
因为我们使用<h1>标签是唯一的，而<b>或<p>标签更适合使用在整个页面，所以我们可以用各种各样的CSS方法来样式化。
更重要的是，尽管完全不用样式，一个标题标签也能明显的表示出一个标题！可视化的浏览器把 <h1>显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构，用适当的标题标签来传达意思。

屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白，碰到一个标题标签时该做的事情，正确的处理，比页面上的普通文本更重视的来对待。而使用<span>标签，那些不支持CSS的浏览器就不会特别的对待它。

讨厌的默认样式
以往，由于浏览器默认的缺省值非常的丑陋，设计者们也许会避免完全的使用标题标签。或者，因为缺省值的巨大尺寸而避免使用<h1>或<h2>，取而代之的是用更高数值的标题标签来实现更小的尺寸。

然而，需要重点强调的是，我们可以很简单的用CSS来改变这些标题标签——举个例子，一个< ;h1>并非一定是占满大半屏幕的巨大标版。在后面，我将证明用CSS来样式化标题标签是多么的简单，希望可以帮助你减轻巨大的恐惧。

对搜索引擎友好的
这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面，一个<span>标签或者普通的加粗的段落标签却在意味着次要一点。适当的用<h1>到<h6>标记你的标题，只需要你的一点点努力，然而却让搜索引擎更容易的检索到你的页面，让人们最终能找到它们。
搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到 <title>和<meta>，它们会顺着标题标签往页面下面查找。如果你不使用这些标签，那么包含在里面的关键词将不会被认为是有价值的，从而被忽略掉。
所以只要付出一点点的努力，你就能增加人们基于页面的内容找到你的站点的可能性。听上去不错，不是吗？

关于标题的次序
在范例中，这个特别的标题是页面中最重要的，因为它是文档的标题。因此，我们使用最重要的标题标签，<h1>。顺应W3C的规范，一些人认为跳过数个标题级是个不好的使用。举个例子，想象我们在下面的页面：

<h1>文章标题</h1>
我们接下去的标题（如果不是用另一个<h1>重复的话）应该是<h2>，然后是<h3 >，等等。你也许不应该在<h1>后面跳过一级，直接跟上<h3>。我倾向于同意以上的观点，顺着行文保持级别的连续性，来构造一个排版结构。这样的话，给一个已经存在的页面添加标题和样式就更容易了，你会减少因使用超出的数字而导致的错误。
前面提到的，设计者也许会用<h4>来标签一个页面上最重要的标题，仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住，先结构，后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 4 发表于: 2006-07-26

HTML4标签的默认样式列表

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, object,
select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A" }
:before, :after { white-space: pre-line }
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

--------------------------------------------------------------------------------

同一个页面用多个id有什么影响

在样式表定义一个样式的时候，可以定义id也可以定义class，例如：

ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div>
CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div>
id一个页面只可以使用一次，class可以多次引用。

有网友问，id和class好象没什么区别，我在页面中用了多个id在IE中显示也正常，用多个id有什么影响吗？

回答：第一影响就是不能通过W3的校验。

在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。

id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

web标准希望大家用严格的习惯来写代码，

例如：你可以用<b></b>显示粗体，也可以用<strong></strong>来显示，但W3C 建议大家用<strong>，因为<strong>更有语义

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 5 发表于: 2006-07-26

捷足先登学用CSS：HTML结构化

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。

外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。

开始思考
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。

如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：

标志和站点名称
主页面内容
站点导航(主菜单)
子菜单
搜索框
功能区(例如购物车、收银台)
页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来，类似这样：

<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>

这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。

根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

使用选择器是件美妙的事
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。

另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。

一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.)

良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width="80%" cellpadding="3" border="2" align="left">，现在可以只在HTML中写<table>，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。

亲自实践一下结构化
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：

<div id="navcontainer">
<div id="globalnav">
<ul>a list</ul>
</div>
<div id="subnav">
<ul>another list</ul>
</div>
</div>

嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 6 发表于: 2006-07-26

WEB标准教程第1天:选择什么样的DOCTYPE

第一天

开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码，可以看到第一行就是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

那么这些代码有什么含义？一定要放置吗？

什么是DOCTYPE

上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

我们选择什么样的DOCTYPE

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。

打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。

补充

DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 7 发表于: 2006-07-26

XHTML基础问答

HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本，XHTML和HTML,XML有什么不同，它增加了什么新功能，今天就让我们来初步认识一下XHTML。

　　XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven pemberton回答的关于XHTML的常见基础问题。

　　问：什么是XHTML?

　　答：XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势，就出现了这样一个问题：如果我们有了XML，我们是否依然需要HTML?为了回答这个问题，1998年5月我们在旧金山开了两天的工作会议，会议的结论是：需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。

　　问：为什么XHTML 1.0相对HTML 4.0独立发展?

　　答：并不是这样。XHTML恰恰就是HTML 4.0的重新组织，(确切的说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。) 它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续。

　　问：XHTML 1.0如何实现XML标准?

　　答：XHTML就是一种XML应用。它采用XML的DTD文件格式定义，并运行在支持XML的系统上。这里要感谢XML的Namespaces功能，浏览器制造商不需要再创造新的私有标签(tags)，他们只需要在XHTML代码里包含XML代码片段，或者XML代码里包含XHTML代码片段。

　　问：XHTML 1.0最主要的优势是什么?

　　答：XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。

　　另一个使用XHTML的优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。

　　用XML我们可以重新建立制度，浏览器制造商联合采用"严格的错误防御标准"，如果XML代码不兼容，浏览器拒绝显示页面，这样设计工作在发布前必须修正每一个错误。

　　问：用XHTML，网页设计师会遇到和HTML一样的浏览器兼容性问题吗?

　　答：希望不会。"严格的错误防御标准"将帮助浏览器对代码作出相同的响应，XML的namespaces功能使你可以增加自己的新标签而不需要特别的浏览器支持。现在我们所需要得到保证的就是：所有浏览器开发商一致并且完全遵守我们制定的CSS。写信给你的浏览器制造商，告诉你需要的CSS规范，你甚至可以检测浏览器是否听从你的设计。

　　问：学习XHTML是否很困难?

　　答：一点也不！

　　问：谁可以采用XHTML 1.0设计?

　　答：因为XHTML非常简单易于实现，所以任何会用HTML的人都可以容易地使用XHTML。当使用XML浏览器的人们越来越多，更多的工作会被建议使用XML，那时侯也许都将使用XHTML。

　　问：什么时候XHTML网站会普及?

　　答：好问题。我已经看到一些使用XHTML建立的网站，甚至在XHTML 1.0发布以前。我相信它将会有一个大发展，因为它太容易了。

　　问：我们如何将现有的HTMl转换为XHTML?

　　答：非常简单，因为它们非常相似。在W3C(www.w3c.org)网站上有一个开放原代码(open-source)的软件叫HTML Tidy，可以帮助你直接转换。

　　问：XHTML未来会怎样？

　　答：XHTML1.0仅仅是这个新HTML语言的第一步。新版本将没有向下兼容老浏览器的约束，可以有更多的发展空间。

　　首先，我们将进行一次彻底的清理，删除HTML 4.0中不兼容的元素。

　　其次，我们将XHTML模块化，允许人们在XML应用中使用XHTML模块(比如表格)，减少重复开发。同时也允许开发特别用途的设计，比如电话应用，只要属于XHTML的子集就可以保持兼容，人们可以创造他们自己的HTML。

　　最后，在解决需求方面，我们将开发更多的表单(Forms)功能，允许在客户端执行更多的检测，减少客户机--服务器之间的网络信息传输。总之，更多令人兴奋的功能将会被实现。

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 8 发表于: 2006-07-26

典型的三行二列居中高度自适应布局

--------------------------------------------------------------------------------

这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码：

完整代码

<html>

<head>

<style type="text/css">

body{

background:#999;

text-align:center;

color: #333;

font-family:arial,verdana,sans-serif;

}

#header{

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;

text-align:left;

} #contain{

margin-right: auto;

margin-left: auto;

width: 776px;

} #mainbg{

width:776px;

padding: 0px;

background: #60A179;

float: left;

}

#right{

float: right;

margin: 2px 0px 2px 0px;

padding:0px;

width: 574px;

background: #ccd2de;

text-align:left;

}

#left{

float: left;

margin: 2px 2px 0px 0px;

padding: 0px;

background: #F2F3F7;

width: 200px;

text-align:left;

}

#footer{

clear:both;

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;}

.text{margin:0px;padding:20px;}

</style>

</head>

<body>

<div id="header">header</div>

<div id="contain">

<div id="mainbg">

<div id="right">

<div

class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

</div>

<div id="left">

<div class="text">left</div>

</div>

</div>

</div>

<div id="footer">footer</div>

</body>

</html>

<head>

<style type="text/css">

body{

background:#999;

text-align:center;

color: #333;

font-family:arial,verdana,sans-serif;

}

#header{

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;

text-align:left;

} #contain{

margin-right: auto;

margin-left: auto;

width: 776px;

} #mainbg{

width:776px;

padding: 0px;

background: #60A179;

float: left;

}

#right{

float: right;

margin: 2px 0px 2px 0px;

padding:0px;

width: 574px;

background: #ccd2de;

text-align:left;

}

#left{

float: left;

margin: 2px 2px 0px 0px;

padding: 0px;

background: #F2F3F7;

width: 200px;

text-align:left;

}

#footer{

clear:both;

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;}

.text{margin:0px;padding:20px;}

</style>

</head>

<body>

<div id="header">header</div>

<div id="contain">

<div id="mainbg">

<div id="right">

<div

class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

</div>

<div id="left">

<div class="text">left</div>

</div>

</div>

</div>

<div id="footer">footer</div>

</body>

</html>

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 9 发表于: 2006-07-26

首先我们定义body和顶部第一行#header，这里面的关键是body中的text-align:center;和header中的margin-right: auto;margin-left: auto;，通过这两句使得header居中。注：其实定义text-align:center;就已经在IE中实现居中，但在mozilla中无效，需要设置margin:auto;才可以实现mozilla中的居中。
接下来定义中间的两列#right和#left。为了使中间两列也居中，我们在它们外面嵌套一个层#contain，并对contain设置margin:auto;，这样#right和#left就自然居中了。
注意中间两列定义的顺序，我们首先定义#right，通过float: right;让它浮在#contain层的最右边。然后再定义#left，通过float: left;让它浮动在#right层的左面。这和我们以前表格从左到右定义的顺序正好相反。
我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg，这个层是做什么用的呢？这个层就是用来定义#contain的背景的。你肯定会问，为什么不直接在#contain中定义背景，而要多套一层呢？那是因为在#contain中直接定义的背景，在mozilla中将显示不出来，必须定义高度值才可以。如果定义了高度值，#right层就无法实现根据内容的自动伸缩。为了解决背景和高度问题，就必须增加这么一个#mainbg层。窍门在于#mainbh这个层定义float: left;，因为float使层自动有宽和高的属性。(暂且这么理解：)
最后是定义底部的#footer层。这个定义的关键是：clear:both;，这一句话的作用是取消#footer层的浮动继承。否则的话，你会看到#footer紧贴着#header显示，而不是在#right的下面。
主要的层定义完毕，这个布局就ok了。补充一点：你看到我还定义了一个.text{margin:0px;padding:20px;}，这个class的作用是使内容的外围有20px的空白。为什么不直接在#right里定义margin或者padding呢，因为mozilla和IE对css盒模型的解释不一致，直接定义margin/padding会造成mozilla里布局变形。一般采用内部再套一层的做法来解决。

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 10 发表于: 2006-07-26

使用DIV之后,什么时候使用TABLE

关于表格

　　使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"

　　使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,大家可以想象一下EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格,比如公司员工联系表,产品与型号对应表等.

　　那么所谓表格大餐呢,其实意见上升到了一个层次,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.

　　所以,关于那句使用以久的话,应该改为"

　　使用表格作为网页排版,布局页面元素是不合理的,表格是用来显示数据的"。

　　关于其它元素

　　我这里按我的使用经验,把XHTML标准中的一些元素,分为三大类:

　　第一类是我称之为辅助布局设计元素:

　　这里我指的是DIV,SPAN等,这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩.

　　第二类我称为结构化元素或叫信息元素

　　这里指的是TABLE,UL,PRE,CODE类元素是一种信息显示与整理方式,比如TABLE很明显就是用来显示表格信息的,UL是用来显示列化信息的,当需要用表格或列表的时候,用这二种方式来显示是明智的。

　　第三类指的是这样的,完全是为了实现一些功能,如填上关键字的META keyword,还有做链接的A。

　　那么正确的符合标准的设计思路是:

　　使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等

　　使用TABLE,UL等这样的元素来显示页面中需要展示数据

　　当然,DIV也起整理数据的作用,使用DIV的ID属性可以很方便的将一个DIV作为一个你名命的数据块。

　　所以使用WEB标准来制作网站,实际是一个信息合理化整合的一个过程,什么地方该用什么元素还是照用不误,别把表格当布局工具就行。

简单生活
执著追求
别笑我浅溥，天真的以为用一腔真诚就能感动这个冷漠的世界。
也别说我幼稚，竟想用不长的人生去诠释繁杂的红尘。
然而除了真诚，我还能给你什么，的确我真的一无所有!

回复引用

举报顶端

卫

级别: 店掌柜

发帖: 5692

铜板: 103378

人品值: 1520

贡献值: 26

交易币: 0

好评度: 5373

信誉值: 0

金币: 0

所在楼道

只看该作者 11 发表于: 2006-07-26

盒模型bug的解决方法

我们定义一个最基本的层：

boxtest

div.boxtest{border:20px solid #60A179;padding: 30px;background : #ffc;width : 400px;}

标准情况下，这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变成：300-20-30-20-30=200px。

为了弥补这个bug，采用一个技巧：即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读，认为宽就是400px，但而其他符合标准的浏览器会继续阅读，并执行第二个真实值300px。

content

div.content{border:20px solid #60A179;;padding:30px;background: #ffc;width :400px;voice-family : "\"}\"";voice-family :inherit;width : 300px;}

同样，在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值，有更简单的办法解决这个问题： html>body .content { width :300; }