`
大同视野
  • 浏览: 8931 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

十天学会DIV+CSS(WEB标准)

5.c.c
阅读更多

第三天 二列和三列布局

今天学习《十天学会web标准(div+css)》的二列和三列布局，将涉及到以下内容和知识点

  • 二列自适应宽度
  • 二列固定宽度
  • 二列固定宽度居中
  • xhtml的块级元素(div)和内联元素(span)
  • float属性
  • 三列自适应宽度
  • 三列固定宽度
  • 三列固定宽度居中
  • IE6的3像素bug

一、两列自适应宽度

下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下：

<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

按照如图所示的创建方法，把两个div都创建出来，或手工写出代码。div创建完成后，开始创建css样式表，代码如下：

#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

先创建#side的样式，为了便于查看，设置了背景色。注意，side的浮动设置为向左浮动；

然后创建#main样式，注意这里设置#main的左边距为120px。预览结果如下：

当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变。这里设置margin-left:120px;正好让出#side占去的120px宽度，如果这里设置为122px的话，中间将出现2px的空隙，大家可以试一下。

 


标准之路www.aa25.cn 提示：可以先修改部分代码后再运行

 

二、两列固定宽度

有了前面的基础，两列固定宽度就容易多了，只需要把#main的宽度由百分比改为固定值，如下图：

三、两列固定宽度居中

两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：

<div id="content">
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</div>

操作方法：在源代码里选中这两个div的代码后，点击工具栏上插入div按钮，填写id后确定，得到如上的代码

下面就需要设置#content的样式了，我们知道，#side的宽度为120px，#main宽度为350px，那么#content的宽度应该为这两者之和，然后设置#content居中，那么整体就居中了：

 


标准之路www.aa25.cn 提示：可以先修改部分代码后再运行

 

四、xhtml的块级元素(div)和内联元素(span)

块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

从上图的例子可以看出，块级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。这就是块级元素和内联元素，正因为有了这些元素，才使我们的网页变得丰富多彩。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

五、float属性

回到我们的例子当中，理解了块级元素和内联元素，对理解浮动就容易多了。float是个重点，希望大家都能理解。上例中用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

想必大家都用过word排过版，当中有个图文混排功能，如下图：

这个功能非常类似于css中的浮动，下面我们用css来实现这一功能：

<div id="side"><img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>
<div id="main"> 标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</div>

创建完以上代码后，在浏览器中预览会显示如下结果：

下面用css让side浮动，再看看效果

body { font-size:18px; line-height:200%; }
#side { float:left;}

大家看看，是不是和word的效果已经很像相了，但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。

body { font-size:18px; line-height:200%; }
#side { float:left; width:202px;}

细心的朋友已经发现，上例中#main的div还定义了margin-left:120px;而这里没有定义，但它多出的文字却跑到了图片(#side)的下方，是不是设置margin-left:后，它就不会跑到#side的正文呢？如果你能想到这一点，你的确是太聪明了，事实确实是这样，在css样式表中加上下面一行

#main { margin-left:202px;}

这就是如何应用浮动实现两列布局的原理。那么三列呢？

六、三列自适应宽度

三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下

<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

增加以下css样式：

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

把原来#main样式的width:70%去掉，然后设置左右外边距各120px，让出左右列的宽度

#main { background: #99FFFF; height: 300px; margin:0 120px; }

预览一下效果如下：

也许预览出来的效果和我的不一样，别急，还有一项设置，默认body是有外边距的，所以这里还得设置body的外边距为0；点击css面板上的新建按钮，然后在新建面板中选择：标签（重定义标签外观），然后选择body，设置body的边界为0即可。

 


标准之路www.aa25.cn 提示：可以先修改部分代码后再运行

 

七、三列固定宽度

三列固定宽度可以在三列自适应基础上添加一个父div，并设置这个div的宽度即可，如下，添加一个id为content的父容器。

在源代码里选中这三个div，然后点击工具栏上的“插入div标签”按钮，这时弹出的窗口插入项会默认为：在选定的内容旁换行，输入id为content，然后给这个div定义个宽度

三列固定宽度出来了，要想实现三列固定宽度居中就更方便了，只需设置#content {margin:0 auto;}即可

 


标准之路www.aa25.cn 提示：可以先修改部分代码后再运行

 

八、IE6的3像素bug

3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下：

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px;}
#main { background: #99FFFF; height: 300px;}

html代码如下：

<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

下面看看IE6和IE7中的显示效果：

从截图中明显看出，IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
#main { background: #99FFFF; height: 300px; }

看看，是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。

Copyright 2007-2010 Inc. aa25.cn All rights reserved.
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第四天 纵向导航菜单及二级弹出菜单今天我们开始学习《十天学会web标准(div+css)》的纵向导航菜单及二级弹出菜单，包含以下内容和知识点：
纵向列表
标签的默认样式
css派生选择器
css选择器的分组
纵向二级列表
相对定位和绝对定位
一、纵向列表
纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作
先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。
<div id="menu">
<ul>
<li>首页</li>
<li>网页版式布局</li>
<li>div+css教程</li>
<li>div+css实例</li>
<li>常用代码</li>
<li>站长杂谈</li>
<li>技术文档</li>
<li>资源下载</li>
<li>图片素材</li>
</ul>
</div>
从预览的效果上看，四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的，下面我们需要创建样式表把标签的默认样式给清除掉
生成的css代码如下：
<style type="text/css">
#menu ul { list-style: none; margin: 0px; padding: 0px; }
</style>
下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性
body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等
接下来定义li的背景色为浅灰色及下边框和内边距
这些属性设置完后，一个简单的纵向列表菜单初具模型了。因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。
要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，我这里输入个#，是个虚拟链接，不指向任何页面。
创建a的样式后，下面我们增加个交互效果，当鼠标划过链接文字时，让文字颜色变成红色，这时就需要用到a:hover这个伪类了
这里的a:hover属于伪类，在下一章节时会详细讲解，或者参看http://www.aa25.cn/div_css/882.shtml，这里只要知道这个写法是定义鼠标划过时的样式就可以了
源代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border: 1px solid #CCC; }
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
</style>
</head></p>
<p><body>
<div id="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版式布局</a></li>
<li><a href="#">div+css教程</a></li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
 
二、标签的默认样式
大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }
这里选择器类型选择复合内容，我用的是dw最新cs5版本，比之前章节用的cs3版本中更合理了，把ID和伪类分开了。然后在选择器名称中输入我们常用的带默认样式的标签，中间以英文逗号分隔
下面对img标签进行重定义，清除图片有链接时默认的边框
下边设置全局ul标签默认的圆点为无
这样就很简单把常用标签的默认样式给清除掉了，如果需要边距的话再重新定义，也避免了各个浏览器对标签默认样式解析差异造成页面显示不一样的问题。有关标签的默认样式更详细的讲解，请参看http://www.aa25.cn/div_css/881.shtml
三、css派生选择器
CSS初学者不知道使用子选择器是影响他们效率的原因之一。派生选择器可以帮助你节约大量的class定义。我上边的例子中应用了些派生选择器如下的css代码
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
#menu ul和#menu ul li即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。
四、css选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的，p段落、div分区、span都是20像素字体。
h1,h2,h3,h4,h5,h6 {
color: green;
}
p,div,span{
font-size:20px;
}
五、纵向二级列表
二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后自动消失，我们接着上边的例子进行修改，代码如下：
<div id="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
接下来修改css样式表，先修改#menu ul li，给其增加一个 position:relative;属性
然后定义ID为menu下ul下里内的ul样式如下：
定义display:none后，默认状态下将隐藏
定义#menu ul li ul的position: absolute; left: 100px; top: 0px;，那么它将以相对于它父元素li的上为0，左为100的位置显示。最后我们设置当鼠标划过后显示下级菜单的样式
#menu ul li:hover ul这个样式比较难理解，它的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block，指的是鼠标划过时显示这块内容，这也实现我们今天想要的效果。其中的:hover和前边说的链接一样，同属于伪类，但有一点注意，目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现，我们定义一个类.current （自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。所以需要加上JS和样式#menu ul li.current ul { display:block;}。
#menu ul li.current ul { display:block;}
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li")
for (i=0; i<allli.length; i++) {
node = allli[i];
node.onmouseover=function() {
this.className+=" current";
}
node.onmouseout=function() {
this.className=this.className.replace(" current", "");
}
}
}
}
window.onload=startList;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li.current ul { display:block;}
#menu ul li:hover ul { display:block;}
</style>
</head></p>
<p><body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
 
最终显示效果如下：
上节课讲解块级元素和内联元素时提到display，今天用到了display:block;和display:none;值为none时表示将这个元素隐藏，为block时表示将它的隐藏状态改为显示状态详细介绍请参考css手册
六、相对定位和绝对定位
定位标签：position
包含属性：relative（相对） absolute（绝对）
1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右
更详细关于相对定位和绝对定位的介绍请参考http://www.aa25.cn/div_css/899.shtml
本节讲解的知识点较多也较重要，希望大家认真学习，认真动手做一遍，加深印象。
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第五天 超链接伪类今天我们开始学习《十天学会web标准(div+css)》超链接伪类，包含以下内容和知识点：
链接的四种样式
将链接转换为块状
用css制作按钮
首字下沉
一、超链接的四种样式
本来计划这节课放到第九章中讲解，但下边的章节都涉及到了，所以提前来学习一下，上节课讲解的内容比较多，这节课就少讲些，只要理解了伪类，就轻松多了。
超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比如第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。伪类使得用户体验大大提高，比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。首先插入两个带超链接的内容：
<p><a href="#">这里是链接</a></p>
<p><a href="10.html">这里也是链接</a></p>
从上图中可以看出，插入的超链接默认是蓝色来下划线的，这是标签的默认样式所致，下来我们在css样式中定义
设置完a:link的样式后，下面分别设置a:visited ，a:hover ，a:active的样式
生成的源代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a:link { color: #06F; text-decoration: none; }
a:visited { color: #999; text-decoration: line-through; }
a:hover { color: #F00; text-decoration: underline; }
a:active { color: #F0F; }
</style>
</head></p>
<p><body>
<p><a href="#">这里是链接</a></p>
<p><a href="10.html">这里也是链接</a></p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
注意：四种状态的顺序一定不能颠倒，否则有些不生效
二、将链接转换为块级元素
链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }
这样设置的结果是全局a都执行这个样式显示，下面设置一下鼠标划过时 的状态，其它几种状态设置方法相同
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }
a:hover { color: #FFF; text-decoration: none; background: #333; }
</style>
</head></p>
<p><body>
<p><a href="#">这里是链接</a></p>
<p><a href="10.html">这里也是链接</a></p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
三、用css制作按钮
学会了把超链接转换为块级元素，想制作个css按钮简直太简单了，只需在上一步的基础上增加一个按钮的背景图片即可实现。下面以制作淘宝网首页的免费注册按钮来讲解，设置最常用的默认样式和鼠标移上时的样式，如下图
首先需要准备默认状态和鼠标划过状态的图片如下：
修改之前的html如下，然后重新定义css样式：
<p><a href="#">免费注册</a></p>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(images/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(images/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}
</style>
</head></p>
<p><body>
<p><a href="#">免费注册</a></p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
本例中运用到了背景图片，有关背景图片的详细运用将在下一节中讲解，你也可以查看css样式表手册，首先了解下或者学习如下视频教程http://www.aa25.cn/div_css/895.shtml
四、首字下沉
首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：
:first-letter
在页面中添加如下一段内容，只用设置样式就可以实现首字下沉了：
<p>标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p>
为了便于观察效果，我们设置p的样式如下：
p { width: 400px; line-height: 1.5; font-size: 14px; }
然后设置p:first-letter的样式
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
p { width: 400px; line-height: 1.5; font-size: 14px; }
p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }
</style>
</head></p>
<p><body>
<p>标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第六天　html列表今天我们开始学习《十天学会web标准(div+css)》的html列表，包含以下内容和知识点：
ul无序和ol有序列表
改变项目符号样式或用图片定义项目符号
横向图文列表
浮动后父容器高度自适应
IE6的双倍边距bug
一、ul无序和ol有序列表
无序列表是web标准布局中最常用的样式，代码如下：
<div id="layout">
<ul>
<li><a title="第五天 超链接伪类" href="/div_css/906.shtml" target="_blank">第五天 超链接伪类</a></li>
<li><a title="第四天 纵向导航菜单" href="/div_css/905.shtml" target="_blank">第四天 纵向导航菜单</a></li>
<li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>
<li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>
<li><a title="第一天　XHTML CSS基础知识" href="/div_css/902.shtml" target="_blank">第一天　XHTML CSS基础知识</a></li>
</ul>
</div>
这就是有无序列表，是以ul包含li的形式，默认每行前的符号是圆点，可以通过样式表改为无、方块，空心圆等。有序列表是以ol包含li的形式，是以数字为项目符号的，无序列表也可以用css定义显示成有序列表，代码及显示效果如下：
<div id="layout">
<ol>
<li><a title="第五天 超链接伪类" href="/div_css/906.shtml" target="_blank">第五天 超链接伪类</a></li>
<li><a title="第四天 纵向导航菜单" href="/div_css/905.shtml" target="_blank">第四天 纵向导航菜单</a></li>
<li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>
<li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>
<li><a title="第一天　XHTML CSS基础知识" href="/div_css/902.shtml" target="_blank">第一天　XHTML CSS基础知识</a></li>
</ol>
</div>
 
 
 
二、改变项目符号样式或用图片定义项目符号
刚才说了项目符号默认是圆点，可以通过样式表改为其它形式，下面实际操作一下：
从样式表编辑器中可以看到，有好多种形式，包括改为ol默认那样以数字有序列表显示。另外项目符号还可以以图像形式，如下图：
这种形式对图像控制不是很灵活，所以实际应用当中一般用背景图片来实现，在上例基础上将项目符号设置为 list-style: none;，然后

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#layout ul { list-style: none; }
#layout ul li { background: url(images/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; }
</style>
</head></p>
<p><body>
<div id="layout">
<ul>
<li><a title="第五天 超链接伪类" href="/div_css/906.shtml" target="_blank">第五天 超链接伪类</a></li>
<li><a title="第四天 纵向导航菜单" href="/div_css/905.shtml" target="_blank">第四天 纵向导航菜单</a></li>
<li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>
<li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>
<li><a title="第一天　XHTML CSS基础知识" href="/div_css/902.shtml" target="_blank">第一天　XHTML CSS基础知识</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
三、 横向图文列表
横向图文列表是在上一步的基础上增加图片并让列表横向排列，最终实现效果如下：
 先插入如下的html代码，插入过程就不再截图了，如果不会的话请学习前边章节
<div id="layout">
<ul>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亚</a></li>
</ul>
</div>
接下来添加css样式，这里用到一个很重要的css属性：float，这个属性在第三天的教程当中已详细讲解过，这里不太赘述。先添加如下全局样式：
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
然后让每个li元素浮动起来，这样就实现了横向排列
根据上节课的内容，把a转换为块级元素后可以设置宽高并增大点击区域
下面设置a下图片的样式
为了获得更好的交互效果，这里增加鼠标划过时的样式，注意这里选择器写法，如果前些章节你都弄懂了，这个应该不难理解。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>
</head></p>
<p><body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
四、 浮动后父容器高度自适应
当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。为了便于查看效果，把刚才实例中的#layout增加一个边框和内边距：
#layout { width:400px; border:2px solid #ccc; padding:2px;}
看到没，它没有被内容元素给撑高，要解决这个问题，需要使用以下样式
overflow:auto; zoom:1;
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写（此样式不能通过W3C验证）。有关高度自适应的教程请参考：http://www.aa25.cn/div_css/888.shtml http://www.aa25.cn/div_css/373.shtml
这就是所谓的css hack，之前讲解3px bug时忘记说css hack是个什么东东了，现在补充一下：
由于不同的浏览器，比如IE 6,IE 7,IE8,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。这里的overflow:auto; zoom:1;就是所谓的css hack，这种形式是应用我们常用的代码来解决不兼容问题，也会用到添加一些特殊符号的形式，它本身没有意义，只是针对不同浏览器是否对它识别来实现的，具体用到的进修再讲。
五、IE6的双倍边距bug
这又是IE6一个著名的bug，也是我们经常遇到的。如上例，当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置为20，而在IE6下却显示40px，解决这个问题只需应用一个样式，大家记住就可以了
display:inline;
增加以上样式后，在IE6下和其它浏览器下显示效果就一样了。双倍边距bug视频教程请参看http://www.aa25.cn/div_css/886.shtml

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout { width:390px; border:2px solid #ccc; padding-bottom:20px; overflow:auto; zoom:1;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>
</head></p>
<p><body>
<div id="layout">
<ul>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
<li><a href="#"><img src="images/2010-08/17/pic.jpg" width="68" height="54" />三亚</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第七天　横向导航菜单今天我们开始学习《十天学会web标准(div+css)》的html列表，包含以下内容和知识点：
横向列表菜单
用图片美化的横向导航
css Sprites
一、横向列表菜单
前边学习过纵向导航菜单，又学习了float属性，那么要实现横向导航菜单是不是很简单了，只需要把li横向排列就可实现了。把第四节的代码拿过来直接用，修改后的代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式布局</a></li>
<li><a href="#">div+css教程</a></li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。以前许多朋友提问怎么让它水平居中，其实很简单，首先导航的宽度是固定的，然后设置margin:0 auto;即可实现了
为了用户体验更加友好，还是把a转换成块级元素，也可以给a设置背景色或背景图片来更加美观了，另外再设置鼠标放上时的样式。
#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left;}
#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}
#menu ul li a:hover { background:#333; color:#fff;}
学到这里，常用的样式大部分都涉及到了，也许许多你还记不住，但至少混个脸熟。为了提高效率，建议大家还是手写代码，如果你还不能手写代码，就参考上边的样式，自己在css编辑器里设置吧，不再大量截图了。
经过上边的修改，现在的用户检验是不是更加友好了呢。
这里的#menu ul li a本来是可以不加float:left的，但IE6下在li没有设置宽度，#menu ul li a设置display:block的情况下，将会显示错乱，所以需要在a上增加float:left来修正。万恶的IE6，怎么就淘汰不掉呢
二、 用图片美化的横向导航
背景图片也是网页制作当中最常用的样式之一，运用好背景图片，可以使你的页面更加出色，更加人性化和更快的加载速度。下面还是用以前视频教程中的实例进行讲解，或者直接去看视频教程http://www.aa25.cn/div_css/895.shtml。显示效果如下：
用到三张图片，分别为当前状态，鼠标放上时样式，和默认样式用的图片：
 
下面修改css样式，只截图了一张，设置方法相同：
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(images/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(images/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(images/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
为了让用户知道当前所处的页面，做了一个当前页面的状态，把ID添加到相应的a上。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(images/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(images/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(images/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a></li>
<li><a href="#">web教程</a></li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
三、 CSS Sprites技术
CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。
讲CSS Sprites之前，先把背景图片给搞清楚
#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }
css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和上下，第一个参数表示距左多少px，第二个参数表示距上多少，这和padding的简写方式是不 一样，一定不要弄混。另外再强调一点css中值为0可以不带单位，其它数值都必须带单位（line-height值为多少倍时，zoom，z-index除外）；no-repeat表示背景图片向哪个方向重复，此时为不重复。
还需说明一点的是定位图片位置的参数是以图片的左上角为原点的，理解了这些，CSS Sprites技术就基本上懂了，就是靠背景图片定位来实现的。把三张背景图片整合到一张上，如下图：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(images/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(images/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;}
#menu ul li a#current { background:url(images/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a></li>
<li><a href="#">web教程</a></li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
CSS Sprites详细的讲解请参考视频教程：http://www.aa25.cn/div_css/896.shtml
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第八天　下拉及多级弹出菜单今天我们开始学习《十天学会web标准(div+css)》的下拉及多级弹出菜单，包含以下内容和知识点：
带下拉子菜单的导航菜单
绝对定位和浮动的区别和运用
css自适应宽度滑动门菜单
一、带下拉子菜单的导航菜单
下拉菜单在一些企业网站应用尤为广泛，它存在使用方便，占用空间小等特点。之前纵向导航教程中已使用过二级导航，今天制作下横向导航菜单的二级菜单，方法和纵向一样，只不过由纵向改变为横向而已，下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。
先在html代码增加二级菜单的代码：
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
增加完代码后，在浏览器里预览一下：
是不是一看头都大了，怎么变成这样了。别懵，我们分析一下错乱的原因。首先我们看下“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列，所以我们先把二级菜单的背景和浮动清除掉，增加以下css代码：
#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}
现在预览看下，二级菜单是不是已经归位了，但鼠标划过时还继承了一级菜单的样式，所以也改为最终效果上的黑色背景白色文字，还有下拉菜单的灰色边框和灰色背景也一并加上，修改并增加如下代码：
#menu ul li ul { border:1px solid #ccc;}
#menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
第一行设置二级菜单的灰色边框；为了美观，我们把下拉菜单的宽度设置成和一级菜单宽度相同，第二行的width:85px再加上第一行上设置的边框左右各1px后正好是87px，和一级菜单宽度相同。margin:0是为了清除掉继承一级菜单中margin-left:2px；最后一行设置鼠标划过时的样式。
再预览一下，是不是基本的样式已实现了。
下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加如下代码：
#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}
注意第二行的写法，#menu ul li:hover ul这个样比较难理解，它的意思是定义当鼠标划过#menu下ul下li时，li下的ul的样式（有点饶舌），这里设置为display:block，意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示， 这就实现了我们想要的效果。目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现。我们定义一个类.sfhover（自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。所以增加如下代码：
#menu ul li.sfhover ul { display:block;}
认真跟着教程制作的朋友可能已经发现，现在应用的JS和纵向导航时应用的不样，但最终实现的效果是一样的。同理css在布局网站时，也是可以多种方法的，正所谓条条大道通罗马，希望大家举一反三，加深前面教程的掌握。JS部分本例不做讲解，如果你想弄清楚JS是如何实现的，请学习js相关内容。到这里，本例就基本完成了，还有一个问题是当前导航下有内容的话，如果二级菜单显示，将会把下边的内容挤跑，所以需要给#menu ul li ul增加position:absolute;属性，当其绝对定位后，它将脱离原来文档流，不再占据空间，因此也不会再把下边内容挤跑了（欲更多了解绝对定位，请查看之前教程或http://www.aa25.cn/div_css/899.shtml）。完整的预览代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(images/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(images/2010-06/27/nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(images/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
二、绝对定位和浮动的区别和运用
学习到现在，定位和浮动也都涉及到了，但有些朋友可能还在迷惑，两者都可以分栏布局，到底什么时候用浮动，什么时候用定位呢？
当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。
而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。
一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。有关定位的视频教程请参看：http://www.aa25.cn/div_css/899.shtml
三、 css自适应宽度滑动门菜单
CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽，就拿上边的实例来说，是按4个字的宽度来设计的，如果其中一项为5个字或更多，就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化，这就是css自适应宽度菜单。下面我们讲一下自适应宽度按钮，和菜单原理是一样，因为自适应宽度菜单在《新手常见问题》中已经讲过了，如果学会自适应按钮，你还不会制作自适应菜单的话，请阅读http://www.aa25.cn/div_css/898.shtml。
你是否还记得在第五章时学习的css按钮实例（如下图），当时只做了一个按钮，它这里是三个按钮，而且宽度不一样，今天我们还以这个按钮为基础，制作宽度自应适应的按钮。
那么它的实现原来是什么？我们看下边一张图。要想实现自适应宽度，需要在文字上增加一个辅助标签，如span，分别在a上和span上设置背景，一个左侧对齐，一个右侧对齐，如下的原理图，
四条辅助线内为一个按钮元素，绿色部分为span，然后定义它的背景图片靠右侧对齐，而左侧的部分为a的背景图片，定义靠左侧对齐。当文字多时，会把span撑开，这实现了自适应宽度的按钮了。这里需要一张如下的图片，它的宽度要宽于你所应用的最宽宽度，这样才能显示正常，同时根据以前学习的css Sprites技术，把背景图片和鼠标经过图片放到一张图片上。
拿第五章css按钮的例子代码进行修改，先改为背景图片使用上图，再增加两个字数不等按钮，并在文字上增加span标签

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(images/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(images/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;}
</style>
</head>
<body>
<p><a href="#"><span>免费注册</span></a><a href="#"><span>登录</span></a><a href="#"><span>在淘宝网上开店</span></a></p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
预览显示效果如下所示，因背景图片比较长，所以右侧显示不太友好，下一步就需要把a的宽度给去掉，设置span的背景，使右侧显示正常，另外把三个按钮横向排列
在a上增加如下代码：
float:left; margin:5px;
横向排列，并增加5px的外边距，现在看下效果吧。为了美观，下一步需要a的左侧增加填充，使文字不死贴左侧，同理span右侧需要增加一个同样的填充。
a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }
a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;}
a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;}
a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;}
对比以上代码，可能你已经发现，原来a顶部的3px给去掉了，把高度改为37px了，行高也改为37px了，为什么这么做，大家动手试下就明白了。然后设置a下span的背景图片，span默认是内联元素，所以需先转换为块级元素；另外需增加鼠标经过时span的样式。显示效果如下，对比一下实例图，是不是实现了这样的效果。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(images/2010-08/17/091722_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }
a span { display:block; background: url(images/2010-08/17/091722_btn_bg.gif) no-repeat right 0px; padding-right:20px;}
a:hover { background: url(images/2010-08/17/091722_btn_bg.gif) no-repeat 0px -37px;}
a:hover span{ background: url(images/2010-08/17/091722_btn_bg.gif) no-repeat right -37px;}
</style>
</head>
<body>
<p><a href="#"><span>免费注册</span></a><a href="#"><span>登录</span></a><a href="#"><span>在淘宝网上开店</span></a></p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第九天　CSS表单设计今天我们开始学习《十天学会web标准(div+css)》的css表单设计，包含以下内容和知识点：
改变文本框和文本域样式
用图片美化按钮
改变下拉列表样式
用label标签提升用户体验
一、改变文本框和文本域样式
如果前边几章学习的比较扎实的话，本节教程就相当容易了。下边先说一下文本框，文本框和文本域都是可以用css进行美化的。比如改变边框精细，颜色，添加背景色、背景图像等。请看下边的实例：
.text1 { border:1px solid #f60; color:#03C;}
.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}
.text3 { border:2px solid #C3C; height:20px; background:url(icon9.gif) right 3px no-repeat;}
.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(bg_9.gif) 0 0 no-repeat;}
这四个样式表分别对应第2、3、4、5行表单，第一行是文本框的默认样式；第二行为设置边框和字体颜色的样式；第三行为设置边框、宽度、高度、字体大小、行高的样式；第四行设置边框和增加背景色和背景图片；第五行为增加一个gif动画的背景图片，看起来是不是生动许多，具体步骤不再赘述。下面我们看一下文本域的样式设置：
.area { border:1px solid #F90; overflow:auto; background:#fff url(bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}
上图中第一个为默认的文本域样式，第二个为设置边框、宽度为百分比、高度和景图片。overflow:auto定义当内容不超过现在文本域高度时不出现滚动条。好了，下面运行一下代码看看两者的效果吧

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.text1 { border:1px solid #f60; color:#03C;}
.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}
.text3 { border:2px solid #C3C; height:20px; background:#ffeeff url(images/2010-08/28/icon9.gif) right 3px no-repeat;}
.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(images/2010-08/28/bg_9.gif) 0 0 no-repeat;}
.area { border:1px solid #F90; overflow:auto; background:#fff url(images/2010-08/28/bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}
</style>
</head>
<body>
<p>
<input type="text" name="textfield" id="textfield" />
这是默认样式
</p>
<p>
<input name="textfield2" type="text" class="text1" id="textfield2" value="我是蓝色的" />
这是改变边框的样式和文字颜色
</p>
<p>
<input name="textfield3" type="text" class="text2" id="textfield3" value="看我大吧" />
这是改变边框并设置高宽和字体大小的样式
</p>
<p>
<input class="text3" type="text" name="textfield4" id="textfield4" />
这是增加背景图片实例，也可放左侧
</p>
<p>
<input class="text4" type="text" name="textfield5" id="textfield5" />
这是增加了一个背景图片为gif动画
</p>
<p>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>
<textarea class="area" name="textarea2" id="textarea2" cols="45" rows="5"></textarea>
</p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
二、用图片美化按钮
按钮也是网页中经常见的元素，但默认的样式有时候和页面整体效果不协调，需要把它美化一下，它的样式设置和文本框如出一辙，没有什么特别之处。下面以三个实例来说明一下：
.btn02 { background:#fff url(btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}
.btn04 { background:url(btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}
.btn07 { background:url(submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}
.btn08 { background:url(submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}
.btn09 { background:url(images/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}
图中的按钮，前两个为固定宽度，但宽度可以根据需要随意调整；中间两个为自适应宽度，根据字数多少去适应；这四个样式都是采用一个背景图片横向循环实现，所以宽度不受限制，最后一个完全采用背景图片，这样宽度就得固定死了，要不会影响美观。需要注意的是这种方式需要去掉按钮边框。
采用以上的按钮有一个好处是当css样式表没有加载上时，将会显示为默认按钮样式，这样用户可以清楚地知道这是个按钮，正常加载后，会使按钮更加美观。它和我们第五天讲的css按钮有所不同，那里的按钮实际还是个链接，而这里的是按钮元素。注：不同浏览器下显示效果略有不同。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.btn02 { background:#fff url(images/2010-08/28/btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}
.btn04 { background:url(images/2010-08/28/btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}
.btn07 { background:url(images/2010-08/28/submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}
.btn08 { background:url(images/2010-08/28/submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}
.btn09 { background:url(images/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}
</style>
</head>
<body>
<p>
<input name="button" type="submit" class="btn02" id="button" value="提交" />
</p>
<p>
<input name="button2" type="submit" class="btn04" id="button2" value="提交" />
</p>
<p>
<input name="button" type="submit" class="btn07" id="button" value="提交" />
</p>
<p>
<input name="button2" type="submit" class="btn08" id="button2" value="看看我的宽度有多宽" />
</p>
<p>
<input name="button" type="submit" class="btn09" id="button" value="免费注册" />
</p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
三、改变下拉列表样式
下拉列表（菜单）是大家最头疼的一个元素，因其对许多样式不生效，故而在页面中显示很丑陋，而且在IE6下总在最上层，造成许多弹出层不能把其遮挡（可恶的IE6呀），使页面的用户检验大打折扣，所以一些设计师想出了许多办法来改变这种情况。
IE6下对下拉列表的背景和宽度样式生效，其它绝大部分不生效，IE8下增加了对边框和高度的支持。但这样似乎离我们要求还很远，所以不得不寻求其它的办法了。先看下面三个图，同一代码分别在IE6、FF、IE8下显示的差异吧。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.select { border:1px solid #f60; background:#FF9; height:30px;}
.tip { width:50px; border:1px solid #ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px;}
</style>
</head>
<body>
<p>请选择项目：</p>
<p>
<select name="select" id="select" class="select">
<option>请选择----------------</option>
<option>标准之路</option>
</select>
</p>
<div class="tip">看看谁能把我挡着</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
在三个浏览器下显示都不尽相同，所以最好是寻求其它的办法或者使用默认样式了。基中IE6下被遮挡可以把浮动层用iframe，因下拉列表不会跑到iframe上边。有更高美化需求的可以用div模拟来代替下拉列表，但这种方法实现起来麻烦，由于时间关系，本节不过多的介绍这种方法，感兴趣的朋友可以参考http://www.aa25.cn/css_example/541.shtml，进一步的学习。
四、用label标签提升用户体验
label标签常常被大家忽略了，合理利用会使页面的用户体验得到提升，我们可以对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了
如上图，当鼠标点击姓名文字时，光标就会定位到后边的文本框上了；点击男女文字也会选中相应的选项；同理，复选框和文本域也是一样的。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css"></p>
<p></style>
</head>
<body>
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" />
</p>
<p>性别：
<input type="radio" name="sex" id="male" value="radio" /><label for="male">男</label>
<input type="radio" name="sex" id="female" value="radio2" /><label for="female">女</label></p>
<p>爱好：
<input type="checkbox" name="music" id="music" /><label for="music">听音乐</label>
<input type="checkbox" name="web" id="web" /><label for="web">上网</label>
<input type="checkbox" name="book" id="book" /><label for="book">看书</label></p>
<p>
<label for="content">简历：</label>
<textarea name="content" id="content" cols="45" rows="5"></textarea>
</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第十天　div+css网页标准布局实例教程（一）今天学习《十天学会web标准(div+css)》的最后一个章节，本章节把前面学习的零碎内容串联起来，组织成一个网站，将根据本人这些年来的从业经验，从建立站点到一个完整的div+css网页的完成，整个流程下来，希望能对各位有所帮助。由于本节内容较多，将分三部分来讲解。
建立站点
结构分析
搭建框架
切割效果图
布局页面——头部和导航
布局页面——侧边栏
布局页面——主体部分
底部和细节调整
相对路径和相对于根目录路径
一、建立站点
前面的课程都是零碎讲解一些相关知识，那么要做一个网站，首先需要建立一个站点。那么什么是站点，为什么要建立一个站点呢？因为网站不同于其它文件，比如一个图片，放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的，所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道，需要先建立一个工程，把原始的视频文件、图片素材分类放好，也是这个道理。下面以在D盘建立一个jiaocheng文件夹为例，在dreamweaver(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
保存后，一个站点就建立起来了，我用的是DW cs5版本，不同版本界面有所不同。如果要连接FTP，需要设置服务器选项（后面会涉及到）。站点建立好后，我们先建立一个images和css文件夹，分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的；在dw建立需要在文件面板列表的根目录上点击右键，选择新建文件夹后更改名字即可。
二、结构分析
创建完站点后，就需要对页面结构进行分析了，根据效果图，分析页面分为几大块，该怎么布局更合理。下面这个图是我做的一个企业网站的模板，虽然不怎么好看，但目的是把前边学的东西全都给串起来，让大家掌握各种情况的处理方法，先看下效果图及在网页中显示的样式：
在浏览器中打开效果图预览
从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示，看明白了这点，下边的框架就好搭建了。整体框架结果图如下：
三、搭建框架
首先在dw里新建一个html文件：
点击创建后会自动生成如下代码的一个html文件，保存为index.html并把无标题文档改为：主页。强调一点，许多同学喜欢把第一行代码删除掉，认为没用，其实这句话的作用大着呢，它标明以何种形式解析文档，如果删除可能会引起样式表失效或其它意想不到的问题。接下来需要插入以上各个块的标签了，以插入header的标签为例，其它的插入方法类同。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页</title>
</head>
<body>
</body>
</html>
按照上图的方法依次插入标签，或者直接在代码视图中手工输入，代码如下：（注意main和side在maincontent里包含着呢）
<div id="header">此处显示 id "header" 的内容</div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div id="maincontent">
  <div id="main">此处显示 id "main" 的内容</div>
  <div id="side">此处显示 id "side" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。增加后的代码如下：
<div id="container">
<div id="header">此处显示 id "header" 的内容</div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div id="maincontent">
  <div id="main">此处显示 id "main" 的内容</div>
  <div id="side">此处显示 id "side" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</div>
html框架代码写完后，下边就需要设置css样式表了。先测量下效果图的整体宽度，然后设置container也是这个宽度并居中。说起测量效果图宽度，方法有多种，可以直接查看图片尺寸。如果测量其中某一块的宽度，可以使用测量软件，也可以在ps下测量。本人一般在ps下测量，因为效果图在ps下制作的，所以用ps测量也比较方便。方法是首选项里把ps的单位改为像素，然后用选区选中要测量的部分，在信息面板中就显示出当前选区的宽高了（如果你实在不知道怎么改单位，怎么选区怎么查看的，就要补习一下ps啦）。
测量后得知：整体宽度为900px，main部的宽度为664px，side宽度为228px。把这三个基本的宽度测量后，下面就可以写css代码了。由于本实例是按照实际当中应用来做的，所以css样式表就最好写在单独文件里了，不要再写在文件内部了，这样可以利用代码的重用性，减少很多劳动强度。下面就新建一个css样式表文件：在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中并命名为layout.css
保存后先设置全局的样式，而后写每一块单独的样式，全局样式如下：
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
全局的样式定义完后，下面定义以上几大块的样式，先设置下#containerr的样式如下：
#container { width:900px; margin:0 auto;}
预览下index.html，发现并没有改变，这是为什么呢？因为刚定义的样式表没有和html文件关联，所以设置的样式当然不能对它生效了，还记得第一天课时讲的几种样式并联方式吗？下面我操作一遍：在css面板中点击附加样式表按钮，然后在弹出的窗口中选择刚才创建的样式表文件，确定，ok了，预览一下，是不是整体已经居中了呢。
如果已经是宽度为900px并居中，说明样式和文件关联好了。这就是为什么要定义一个站点了，因为许多文件要关联在一起才能构成一个完整的网页，所以要把它们放在一起，才能让这个页面找到和它相关的文件在哪里。下面设置内部几大块的样式，为了便于观察，我们把部分块设置了背景色。代码如下：
/*body*/
#container { width:900px; margin:0 auto;}

/*header*/
#header { height:70px; background:#CCFFCC; margin-bottom:8px;}
#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}
 
/*main*/
#maincontent { margin-bottom:8px;}
#main { float:left; width:664px; height:500px; background:#FFFF99;}
#side { float:right; width:228px; height:500px; background:#FFCC99;}
 
/*footer*/
#footer { height:70px; background:#CCFFCC;}
现在预览一下：在IE6下#maincontent的底部外边距并没有生效，而在IE8下，#footer干脆跑到#maincontent的下边了，这又是怎么回事呢？如果前边几天你都认真学的话，那么这个问题已经不是问题了。这就是之前我们讲的，如果一个容器内的元素都浮动的话，那么它的高度将不会去适应内部元素的高度。解决办法是在#maincontent增加 overflow:autol; zoom:1;，这样就可以让它自动适应内部元素的高度了。
现在再预览一下，是不是都正常了。为了更加保险，建议在header、nav、maincontent、footer之间增加如下一句代码并设置css样式如下，它的作用是清除浮动。
<div class="clearfloat"></div>
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页</title>
<link href="images/2010-09/16/layout.css" rel="stylesheet" type="text/css" />
</head></p>
<p><body>
<div id="container">
<div id="header">此处显示 id "header" 的内容</div>
<div class="clearfloat"></div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div class="clearfloat"></div>
<div id="maincontent">
<div id="main">此处显示 id "main" 的内容</div>
<div id="side">此处显示 id "side" 的内容</div>
</div>
<div class="clearfloat"></div>
<div id="footer">此处显示 id "footer" 的内容</div>
</div>
</body>
</html>
 标准之路www.aa25.cn 提示：可以先修改部分代码后再运行
四、切割效果图
基本框架搭建完毕后，下一步就是要分析每一块该怎么切图了。切图方法有多种，可以使用ps或fireworks自带的切片工具，也可以用QQ的截屏或者创建新文件，把需要的部分复制过来保存都可以，关键看个人喜好了。
用ps的切片工具的话，把需要切割的区域用切片工具切分，如果要设置图片的名称，请使用切片选择工具，然后在切片上双击，会弹出如下窗口，填写名字后确定即可。
切割完后，需要保存图片了，选择文件——存储为web和设备所用格式，在弹出的窗口中点击选中切片，然后在右侧可以设置当前切片的图片格式。这里有个技巧，一般小型色彩单一的图片，采用gif格式，照片类大型图片采用jpg，这样生成的图片既能保证质量，图片体积又小，详细了解可参看：http://www.aa25.cn/div_css/547.shtml
设置完图片的格式后，就可以存储了，这里选择到images的上一级目录就行了，ps会自动创建images目录并把图片文件放入，如果已存在，直接放入。在格式处选择仅限图像，如果选择html和图像，ps会自动生成一个表格式的网页，这个页面不是我们需要的，就不让它生成了；还有一个需要注意的地方就是选择所有用户切片，这样只把我们手动切割的图片保存下来，其它的就不保存了。保存后的图片如下所示，其中hot_bg.gif这张图片切割时没有隐藏上边的文字，一会儿在ps里再处理一下把文字抹掉。
目前所切的图片只是一部分，并没有把整个页面所需的图片全都切割下来，比如导航部分所用背景图片可以放到一张图片上，下面就用新建文件，然后用QQ截屏，粘贴过去的方法来创建。
分析一下上图的导航部分：1、两端的圆角；2、鼠标划过状态和当前栏目状态宽度应该随着字数的多少而改变；3、二级导航有鼠标划过时的状态。分析完之后，就需要把需要的图片整合到一张图片上了，整合的结果如下图，这个根据自己的需要进行整合。其实完全可以把其它一些小图标都整合在一张，但那样操作起来比较麻烦，所以我们还是归一下类，把相关的图标整合到一起。
接下来整合侧边栏的背景图片，分析发现侧边栏应用同样的样式，只不过高度有所不同，而且是四角都是圆角，所以只用一个通用的就可以满足所有侧边栏块的需求了。那么怎么制作这个通用的背景呢？从下图我们发现，标题的高度都是一样的，只不过是下边的内容高度不同而已，那么我们把下边内容的背景制作的足够长，超过可能出现的最大高度就可以满足需求了。
整合后的效果如上图，如果你现在还不明白为什么要这么做，那么一会儿写完样式表你就明白了。下面把三个图标也给切出来，如下图：
这些完事后，还有联系我们的图片和修饰小图标了。联系我们的图片如下，这里的图片和小图标要背景透明，这样才不会遮盖下面的背景。
（接下一篇）
点击此处下载实例源代码及psd源文件
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第十天　div+css网页标准布局实例教程（二）（接上一篇，本节教程文字较多，比较枯燥，如果前边知识学习牢固，可以直接下载源代码查看，哪个地方不明白，再回过头来看哪一部分）
五、布局页面——头部和导航
有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header">
<div id="logo">此处显示 id "logo" 的内容</div>
<div id="search">此处显示 id "search" 的内容</div>
</div>
先在header里插入以上两块元素。然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：
<div id="header">
<div id="logo"><img src="images/logo.gif" width="181" height="45" /></div>
<div id="search">
<form id="form1" name="form1" method="post" action="">
搜索产品
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="查询" />
</form>
</div>
</div>
接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？
#logo { float:left; margin-top:18px;}
#search { float:right; margin-top:30px;}
这两项的位置已经差不多了。预览你会发现，搜索框和按钮跟效果图中的不一样，这是因为我们还没对它设置样式，接下来把文本框增加一个class为inp_srh样式，按钮增加btn_srh的样式，然后定义这两个样式的属性。
#search { float:right; height:24px; margin-top:30px; color:#444;}
.inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}
.btn_srh { width:58px; height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}
#search * { vertical-align:middle;}
我们给search增加了高度和文字颜色，这点不用多解释，但高度为什么是24px，是为了照顾 IE6，大家去掉测试下就知道了；
inp_srh的宽度和高度并不是实际效果图中的宽高，是因为默认情况下文本框带有内边距造成的。另外就是padding的值也会算到总宽度上的；
btn_srh就是应用背景图像来实现的，说明一点这里的border的值为none指的是无边框，cursor定义鼠标样式为手形，之前许多朋友用hand，但这个通不过w3c认证。text-indent:-999em这个属性许多朋友可能不理解是干什么用的了，它的作用相当于word中的首行缩进，这里设置成-999，意思是向左侧缩进-999em，这样是不是就看不到文字啦，所以它的作用是将按钮上的文字隐藏，当然也可以在html代码中插入空格代替文字，但这样做有点不太好，在不支持css的设备上查看时，用户不知道这个按钮是干什么的了。所以建议采用这种形式；
有必要解释下最后一行，它的特殊之处在样式名和大括号之间加了一个*号，这里兼容所用的，属于css hack部分内容，是定义这些元素都垂直居中对齐。css hack本身就是无意思的东西，所以不做过多解释，知道当需要垂直居中对齐时就采用这种写法就行了，但是一定不要滥用，这个属性也是有缺陷的，当有英文和中文同时出现时，英文会靠上显示的。有关css hack更多的内容，请参考http://www.aa25.cn/special/css_hack/index.shtml
这些设置完后，把最初搭建框架时设置的header的背景色和底部外边距给去掉吧。
#header { height:71px;}
至此，头部的样式就完成了，下边该制作导航了。分析一下，导航分为一级导航和二级导航，所以我需要在nav下再插入nav_main和nav_son两个块元素。
<div id="nav">
<div id="nav_l"></div>
<div id="nav_r"></div>
<div class="nav_main">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#" id="nav_current"><span>企业新闻</span></a></li>
<li><a href="#"><span>企业简介</span></a></li>
<li><a href="#"><span>产品展厅</span></a></li>
<li><a href="#"><span>企业历史</span></a></li>
<li><a href="#"><span>招商加盟</span></a></li>
<li><a href="#"><span>网上下单</span></a></li>
<li><a href="#"><span>联系我们</span></a></li>
</ul>
</div>
<div class="nav_son">
<ul>
<li><a href="#">企业动态</a></li>
<li><a href="#">领导活动</a></li>
<li><a href="#">产品资讯</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</div>
</div>
先设置nav的高度及背景图片样式。
#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}
完了之后该一级菜单和二级菜单的样式了
.nav_main { height:36px; overflow:hidden;}
.nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
.nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
.nav_main ul li a span { display:block; padding-right:20px;}
.nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat;}
.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat;}
.nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}
.nav_son { height:30px;}
.nav_son ul li { float:left; margin-top:4px;}
.nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}
.nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat;}
这些样式的作用就不多讲了，以前的课程当中已详细讲解过了，只不过本例使用了双导航菜单而已。现在在浏览器下预览一下吧，看看效果怎么样，是不是和效果图差不多了，但还有最后一步就是两端的圆角没实现，实现圆角的方法也不复杂，只需再增加两行代码和两个样式即可。在nav下nav_main之前增加如下两行代码：
<div id="nav_l"></div>
<div id="nav_r"></div>
然后用样式表定义一个左侧的圆角，一个右侧的圆角。css样式如下：
#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
#nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}
六、布局页面——侧边栏
主体部分涉及side和main两部分，的内容比较多，但都不难，本节教程没有增加什么新的知识点，学起来并不吃力。主体部分先从侧边栏说起，讲解如何切图时已经说过，侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码
<div class="side_box">
<h2><strong>产品</strong>导购</h2>
<div class="side_con">此处显示 class "side_con" 的内容</div>
</div>
这里的标题采用h2标签，没必要再用个div，还有“产品导购”中“产品”二字是红色字体，这里用strong标签，这样可以省去很多没必要的定义，所以在页面布局当中一定要合理利用每一个标签。讲到这里，有必要说一下第一节教程中讲的为什么不能叫div+css而应该叫xhtml+css了，因为div只是xhtml中的一个标签，叫div+css会让许多朋友误认为遇到块级元素就得用div，造成了div的滥用，而合理利用每个标签，才是web标准设计的一个准则。回过头来定义侧边栏的样式如下：
#side { float:right; width:228px;}
.side_box { margin-bottom:8px;}
.side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;}
.side_box h2 strong { color:#f30;}
.side_con { padding:10px; background:url(../images/side_bg.gif) 0 bottom no-repeat;}
预览一下效果吧，是不是整体效果出来了，下边就需要定义里边各个部分了。
先看下产品导购部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片，但这样麻烦一点，每个都需要设置，而且还得定位，有个更简便的方法是定义ul的背景图片，因为在切图标时，每个图标之间的间距是按照效果图的间距来切的。
<div class="side_box">
<h2><strong>产品</strong>导购</h2>
<div class="side_con product">
<ul>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li class="product3"><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
</ul>
</div>
</div>
细心的用户已发现，这里的class后跟了两个样式名称，说明一个元素是可以定义多个样式的，中间用空格分开。也可以把product样式定义在ul上。
说到可以定义多个样式，强调一点：许多新手朋友常常大量使用，如一个块元素需要设置边框，绿色文字和灰色背景所以就在css里定义：
.border { border:1px solid #f60;}
.color { color:#080;}
.bg { background:#ccc;}
然后在块元素上增加：
<div class="border color bg">此处显示新 Div 标签的内容</div>
其实这是一个非常不好的写法，这样表面看似达到了代码重用性，但实际当中，当需要把其中一个元素的的边框改为2px，怎么改？如果把.border的边框改了，那么所有应用这一样式的元素都改了。如果再在代码中增加一个样式，那么又得去改html代码，和代码和结构分离的理念相违背了。一个好的代码布局，不管以后怎么改风格，只用改样式表，而不用去改html代码，这才真正做到两者分离了。
扯远了，不过这点很重要，新手很容易犯这个毛病。回到刚才的问题上，给第三个li定义了一个product3样式，然后在样式表中定义它的底部边框为无，因为前边定义li的底边框为1px的虚线，而最后一个不需要，所以单独定义个样式把它取消掉，这里的product根据需要自己定义的名称，一般用能表达这块内容意思的简洁英文来表示，或者用拼音。有关样式命名上请参考：http://www.aa25.cn/web_w3c/248.shtml。“产品导购”的样式定义如下：
.product { padding:0px 10px;}
.product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;}
.product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;}
.product ul li strong { display:block; height:24px; color:#333;}
.product ul li a { color:#777;}
.product ul li a:hover { text-decoration:underline;}
.product ul li.product3 { border-bottom:none;}
“产品导购”完成后，下边该“使用问答”了。“使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。所以这部分采用dl、dt、dd的形式来完成。
<div class="side_con ask">
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
</div>
 
.ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;}
.ask dl dt { height:22px; overflow:hidden; font-weight:bold; background:url(../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}
.ask dl dt a { color:#666;}
.ask dl dd { color:#666; background:url(../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}
“使用问答”完成后，侧边栏就剩下“联系我们”了，这个更简单，直接插入图片就行了，然后调整一下位置就可以了。
<div class="side_box">
<h2><strong>联系</strong>我们</h2>
<div class="side_con contact"><a href="#"><img src="images/tel.gif" width="222" height="112" /></a></div>
</div>
 
.contact { padding:2px;}
七、布局页面——主体部分
主体部分可以分三大部分，顶部是幻灯和热点新闻，中间是图片列表，下边是左右两块，先来布局主体部分的顶部。顶部实际上还是个左右两列布局，没什么复杂之处，就不再贴代码了，本节结尾会提供实例的源代码。讲解一点：热点新闻列表中的日期，是用一个span标签写在了内容的前边，然后把span向右浮动就实现了，“个人登录”和“商户登录”的实现方法也是如此。
之前许多朋友问，像标准之路主页的幻灯是怎么实现的？其实实很简单，只要你动动手，就知道怎么做的了。但许多同学遇到个问题不去考虑靠自己能力能否解决，而是上来就问，这是一个很不好的学习态度？先找找办法，如果实在解决不了，再来问也不迟。方法是查看标准之路主页源代码，找到幻灯部分，你会发现有如下一段js代码，而且代码中有几个设置参数的地方，那么要想在自己网站实现这样的功能，直接把这部分代码插入到自己网站相应位置，修改参数中的大小为自己的大小、图片地址为自己的图片地址，还有就是下载swf文件，并改为相应正确的地址。如果你有html基础的话，这些一点都不难，还是那句话，一定要多动手，多动脑。
把如上一段代码拷贝到本例的幻灯图片位置，下载实现幻灯的swf文件到本地images文件夹下，地址为：http://www.aa25.cn/v3/images/indexpic.swf，接下来修改/v3/images/indexpic.swf为images/indexpic.swf；修改swf_width和swf_height的值为269和210；files的值为图片路径，links为图片的链接地址，texts为标题名称，中间也是用|分隔，这样就实现了幻灯图片展示了。
幻灯实现后，接下来该中间部分图片列表了，和第六天学习的横向图文列表是一样的。唯一区别就是多了一个标题。在index_top下插入如下代码：
<div id="index_pic">
<h2><span></span></h2>
<ul>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
</ul>
</div>
 
#index_pic { border:1px solid #dbdbdb; margin-bottom:8px;}
#index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb;}
#index_pic h2 span { display:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;}
#index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;}
#index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;}
#index_pic ul li a { display:block;}
#index_pic ul li img { margin-bottom:3px;}
这次没做鼠标划过时边框效果，相对之前的简单一点，需要了解鼠标划过改变边框效果的请学习http://www.aa25.cn/div_css/907.shtml。本例中“热门产品”的图标采用了背景图片，也可以采用一个图片直接插入，但从用户体验的角度来讲，这些图片还是以背景图片插入为好，因为背景图片在整个页面加载过程中后来加载的。
图片列表完了之后，主体部分就剩下“企业历史”和“招商加盟”两块了。这两块也是应用左右浮动的方式实现。这两块的代码就不贴出来了，一会儿看实例。强调一点是这里的more:hover的写法，因为more直接加在a上，所以鼠标进过的样式就不用再写a了，或者写成a.more:hover。
八、底部和细节调整
底部比较简单，灰色背景部分可以用h类标签完成，也可以用dl、dt、dd来完成，再或者其它标签也可以，其它的就不再赘述。
底部完成后，最后的步骤是要做一些细节调整，比如该对齐的地方是否对齐，图片的alt属性是否都加上了，在各种浏览器下是否显示一样等等。至此整个前台页面算制作完成了下面的任务就是该用程序来读取数据库里的内容了，来完成整个站点的制作。
浏览器兼容问题一直是让新手朋友头疼的地方，其实只要掌握几个常用浏览器的特性后，不需要过多的css hack就可以解决问题的。本例中使用的css hack大致有：
zoom=1：用来解决自适应高度时IE6的兼容问题（这个属性通不过w3c认证）；
display:inline：解决IE6双倍边距bug问题；
*：在样式名和属性中间加*，这个常用在需要垂直居中时使用；
IE6 3像素bug：在布局时采用左右都浮动的办法避免了这个问题；
另外还有一些做法也是为了解决兼容问题而写的，比如固定高度，就是因为各浏览器之间解释差异，为了使显示效果尽可能一样而采用的折中办法。总之遵循一点，css hack能少用尽量少用，这样便于以后维护。
完成这样一个布局方法有多种，本例中所讲解的方法，只是本人的观点，不一定是最好的方法，希望大家通过本本例的学习能做到举一反三，掌握更多的方法。
本侧是左宽右窄型的布局，如果想把两个调换个位置，太简单不过了，只需把#main和#side的向左向右浮动调换一下就实现，这是表格布局所不及的。所以不管#main和#side在html代码中是谁先谁后，而让它们显示在哪里完全是css来完成的。这里建议#main的代码写在#side前边，因为这要在页面加载的过程中会先加载main部分，用户首先看到的是主要内容，搜索引擎收录时也会先找到main部分的内容。
点击此处下载实例源代码及psd源文件
九、相对路径和相对于根目录路径
上边的例子学完后，你会发现在html中插入的图片路径是images/pic4.gif，而在css中插入的图片路径是这样的../images/nav_bg.gif，后者比前者多出了../，这是什么意思呢？
这就是相对路径和绝对路径，../表示返回上一级，因为css文件在css文件夹里，图片在images文件夹下，那么layout.css就需要返回上一级找到images文件夹才能找到相应的图片。直接文件夹名或是./开头表示和当前平级，因为index.html和images文件夹平级。不管是带../还是不带，这种写法都叫相对路径；另一种叫相对于根目录路径，它的写法必须以/开始，意思是从根目录开始一级一级向下查找，不管在哪里，要使用pic4.gif这个图片，路径都必须是/images/pic4.gif；还有一种写法叫绝对路径，是以http://加域名开始的，这个不多多说了。
使用相对路径时，当根目录放到一个二级目录下时，文件仍然可以正常访问，而使用相对于根目录路径时，其中一个页面放到其它位置时，照样能关联么相关的图片和其它文件，比如：本例如果用相对于根目录路径的话，把index.html放到一个文件夹下后，还是可以正常访问的。总之两种方法各有优劣，根据你的需要采用一种合适的方法。相对路径和相对于根目录路径是可以相互更改的，在站点管理——编辑——高级设置的本地信息里有链接相对于，如下图，默认为文档（就是所说的相对路径），也可以改为站点根目录，相对路径一般为直接目录名，需要返回上级时用../，向上返回两级时用../../；相对于根目录路径始终以/开头，不管该文件现在在哪一级，它都是以根目录开始向下找。
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)
标准之路首页 CSS版式布局 DIV+CSS教程 DIV+CSS实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 第十天　div+css网页标准布局实例教程（三）前边两节学完后，前台工作基本上完成了，下边的任务该程序员添加程序了。为什么说是基本完成呢？因为要做的工作还很多，不但要把首页做出来，其它的列表页详细页等页面也得做。还要配合程序员把整个网站完成，这样才能呈现给用户。应部分同学的要求，讲解一下程序怎么添加的，这样和程序员配合起来也更默契，还有怎么连接FTP上传下载，后期出现问题怎么调试等等。添加程序部分只需要了解就行了，连接ftp上传下载，页面调试查找问题这部分一定要掌握哟。
创建服务器环境
建立数据库
本地和远程服务器连接
php读取数据
页面调试及浏览器兼容 
一、创建服务器环境
程序语言有多种，常用的有asp、php、jsp等，之前做的html页面，可以直接在浏览器上运行，因为html是客户端语言，而这些是服务器端语言，也就说你所看到的页面是经过服务器加工之后传输过来的，不管使用哪种语言环境，最终目的就是把数据库的数据读取出来展示到网页上。不同的语言有不同的运行环境，要想运行这些语言，首先要创建一个适应他们的环境，下边以php为例，讲解一下php环境的搭建。
点击下载：WampServer 5 集成环境
下载wamp安装完成后，php运行所需的 Apache、 MySQL、PHP 5等都具备了，安装完成后需要启动WampSeaver，启动后会在托盘区显示一图标（如上图），当它正常运行后，说明服务器环境已经创建成功了。接下来打开如上图中的php.ini文件，找到short_open_tag，把值改为On，作用是开启短标签支持，以免后边教程中使用短标签时报错。有关软件的安装，及服务器环境问题本站不做过多介绍，如想详细了解，请百度相关文章，asp环境的搭建更简单了，如想知道，也请百度。
二、建立数据库
php的作用是从数据库读取数据，下面我们就先创建一个数据库，并录入部分数据。点击如上图的phpMyAdmin，然后会在浏览器中打开数据库。创建一个名为：jiaocheng的数据库和news的表
设置表结构如下：
注意将ID字段设置为主键并在额外中选择auto_increment选项。表结构创建完后，选择插入，插入一条数据：
依次插入更多条数据，为后面程序调用做准备，选择性将某些数据插入形象图片，以便在幻灯处调用。
三、本地和远程服务器连接
只有本地和远程服务器连接后，才能把我们做的页面上传到服务器上来运行。连接的前提是你知道服务器的地址及网管给你分配的用户名和密码，有了这些后，在dw的站点——管理站点中，选中jiaocheng，然后编辑，在弹出的对话框中选择服务器选项，然后填写ftp地址，用户名和密码，如果一切正常应该可以顺利连接了，点击测试按钮一下吧，如果无法连接，就需要查找问题了（下面的截图是dw cs5的界面，其它版本略有不同）。
刚才我们在自己电脑上创建了服务器环境，那么这里的连接就用本地网络了。
设置完后，在文件面板站点上点击右键，选择上传，将文件上传到服务器文件夹中。
完了之后打开浏览器，在地址栏中输入http://localhost/index.html，就可以访问，或者直接在dw中点击地球图标，也可以直接打开浏览器预览。如果能正常打开页面，说明本地和服务器连接成功，修改完文件后，把文件上传到服务器上就可以了。如果是协同办公，修改文件之前一定要先下载，这样才能保证本地的文件为最新，如果你上次修改完之后，别人又修改了，你没下载，直接修改本地的文件又上传了，那么别人的修改将被覆盖掉，所以一定要养成好习惯，修改前先下载。
四、php读取数据
以上的工作都完成后，下面就该用程序读取数据了。首先需要创建一个数据库连接文件，让php程序可以访问数据库，这样才能读取里边的数据，在根目录下创建一个inc文件夹，并创建一个conn.php文件，然后打开文件，在源代码里插入如下代码：
<?
$conn = mysql_connect ("localhost","root","") or die ("数据库连接出错" . mysql_error());
mysql_select_db ("jiaocheng",$conn);
mysql_query("set names 'gbk'");
?>
 
之所以单独创建一下文件，是因为后边很多页面都要用，这样只需包含这个页面即可，不用每个页面再写这段代码了。数据库连接文件创建好后，下面就该在index.html调用了。注意：这里要将后缀改为php才行，如果还是html的话，那么它将直接输出，不会经过服务器加工。接下来打开index.php，在源代码的最顶部插入如下代码，把conn.php文件包含进来：
<?
include("inc/conn.php");
?>
记得要把inc文件夹上传到服务器上哟。下面就先做“热门新闻”列表吧，把原来做的#news_list下的ul列表改为如下形式：
<ul>
<?
$sql="select * from news order by id desc limit 0,6";
$query=mysql_query($sql);
while($row=mysql_fetch_array($query)){
?>
<li><span><?=$row['add_time']?></span><a href="#"><?=$row['title']?></a></li>
<? }?>
</ul>
第一句是创建一个sql查询语句，表示查询news表以id的倒序排列且只查询前6条，接下来循环读取出来。上传预览一下吧，是不是变形了，一方面标题太长了，另一方面日期应该只显示月和日，日期通过程序只取月日两位，处理标题有两种方法，一种是用程序截取，一种是css超出隐藏。下面先把日期给改了，把<?=$row['add_time']?>替换为：<?=date('m-d',strtotime($row['add_time']))?>
把日期改短后，显示正常了，但为了防止以后出现长标题把页面撑乱，让程序员注意截取一下标题或者你用css来实现，css超出隐藏的话可以给li定义高度和overflow:hidden属性。得了，从数据库中读取数据出来，就这么简单，下面说一下幻灯部分的实现吧。
和上边的读取方法一样，只不过用if判断一下$pic是否为空，来解决开头没有|的问题。上传上再预览一下吧，看看是不是显示出来了呢？是吧，已经显示出来了，打开源代码看看，刚才我们添加的程序部分并没有显示出来，取而代之的是数据库中的数据，这就是程序的奇妙之处。
好了，有关程序部分就讲这么多了，相信你也该明白是怎么回事了，剩下的你可以自己对照着制作个试试，如果你想学习程序的话，给大家推荐以前我学过的教程，asp的话可以学习fif小组的asp视频教程，在百度里搜索：fif asp，就出来了，第一个结果便是网易学院的fif视频教程；如果你对php感兴趣的话，建议去php100中文网，听听张恩民老师讲解的php系列教程，相信很快你也会成为一个程序高手的。
五、页面调试及浏览器兼容
在和程序员配合完成网站的过程中或网站上线后，常常会出现一些小问题，比如页面撑开，显示错乱等，这时候就需要查找问题出在哪里了。查找这些问题，希望大家装上火狐浏览器（因为它是相对标准的浏览器，这样显得你更专业一些，嘿嘿，最主要是有调试用的插件），装上之后还需要装两个插件：web developer，firebug
插件的下载请点击上图中的获取附加组件，然后输入关键字搜索到后下载安装即可。
web developer作用很强大，如下图所示可以查看当前页面所用到的图片，包括css中的背景图片，具体使用教程请参看：http://www.aa25.cn/div_css/255.shtml
firebug这是个更好的一个插件，使用时点击浏览器右下角的萤火虫图标或者按F12，会启用这个插件，如需查看某一部分代码，点击插件上的查看页面元素按钮后，鼠标移到网页上，会出现一个相应的框，当框选中需要查看源代码的元素后点击，在插件区域就显示出当前区域的代码及样式了，可以禁用某些样式，还可以添加新的样式来查找问题所在。
如上图，先点1中的查看页面元素按钮，然后鼠标移动到2的地方，将会出现图中所示的蓝色线框，然后点击鼠标，会在插件中选中3位置的代码并在4位置出现对该区域生效的所有样式，即是上边框选部分的代码和样式，当鼠标移动到圈4位置时，会出现一个禁止图标，点击后禁用当前样式，这样便于查找问题所在，另外还可以在后边双击插入新的样式。
另外，如果你装的是IE8浏览器，同样具备类似的功能，打开浏览器后，按F12键，即可打开该功能，使用方法和火狐的firebug类似。
希望大家多多研究，对查找问题能起到事半功倍的效果。不过这些修改只停留在浏览器层面，不会对你本地和服务器上的文件做任何改动，查找到哪里出问题后，及时在dw里将出错的地方改过来。
学会了怎么调试页面后，兼容问题也是一个不容忽视的问题，现在浏览器市场鱼龙混杂，别的不说，IE的6/7/8版本兼容就够让人头疼了，现在又出了个IE9，还有火狐、chome、opera、Safari等等，而且标准不统一，一片混乱的状况。从下图中标准之路网站的访问情况来看，目前IE6仍然占最大比重，而IE6恰恰也是让设计者最为头疼的浏览器，bug太多了。鉴于这种混乱情况，目前只用考虑兼容最常用的IE6/7/8和firefox就可以了，其它使用人数很少的浏览器可以暂不考虑。只要我们掌握了各个浏览器的特性，避免一些使它解析错误的写法，还是不用太多的css hack就可以使页面在各个浏览器下显示基本一致，所以这个需要大家的多观察，多实践，多总结。
因IE浏览器的特殊性，一台电脑同时只能装一个版本的IE浏览器，不过呢有高人提供了IE Tester，把IE的几个版本集成到一块，专门供测试兼容使用。大家可以下载安装一下，测试下页面在各个浏览器下的显示效果。
Copyright 2007-2010 Inc. aa25.cn All rights reserved.
文章出处：标准之路(http://www.aa25.cn)

<script src="js/article.js" type="text/javascript"></script>

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics