CSS网页布局入门教程1Word下载.docx
《CSS网页布局入门教程1Word下载.docx》由会员分享，可在线阅读，更多相关《CSS网页布局入门教程1Word下载.docx（54页珍藏版）》请在冰豆网上搜索。
纵向导航菜单39
第十三章CSS网页布局入门教程13：
下拉及多级弹出式菜单43
第十四章CSS网页布局入门教程14：
纵向下拉及多级弹出式菜单49
第十五章DIV+CSS网页布局技巧实例1：
设置网页整体居中的代码53
第十六章DIV+CSS网页布局技巧实例2：
设置容器中的内容垂直居中54
第十七章DIV+CSS网页布局技巧实例3：
设置层的透明度55
第十八章DIV+CSS网页布局技巧实例4：
使用css缩写56
颜色56
盒尺寸56
边框（border）57
背景（Backgrounds）57
字体（fonts）58
列表（lists）58
第十九章DIV+CSS网页布局技巧实例5：
明确定义单位，除非值为059
第二十章DIV+CSS网页布局技巧实例6：
区分大小写59
第二十一章DIV+CSS网页布局技巧实例7：
取消class和id前的元素限定59
第二十二章DIV+CSS网页布局技巧实例8：
元素属性的默认值59
第二十三章DIV+CSS网页布局技巧实例9：
不需要重复定义可继承的值60
第二十四章DIV+CSS网页布局技巧实例10：
最近优先原则61
第二十五章DIV+CSS网页布局技巧实例11：
多重class定义61
第二十六章DIV+CSS网页布局技巧实例12：
使用子选择器62
第二十七章DIV+CSS网页布局技巧实例17：
横向居中（centering）63
第二十八章DIV+CSS网页布局技巧实例18：
导入（Import）和隐藏CSS63
第二十九章DIV+CSS网页布局技巧实例19：
用csshack针对IE的优化64
第三十章DIV+CSS网页布局技巧实例20：
调试技巧：
层有多大？
64
第三十一章DIV+CSS网页布局技巧实例21：
CSS代码书写样式65
第一章CSS网页布局入门教程1：
一列固定宽度
本系列教程为入门级教程，适合初学者学习，由最简单的知识一点一点进阶。
主要以实例为主，很少部分理论，这样更适应初学者快速掌握。
因本人也正在学习，难免有一些错误或疏漏地方，望各位给予指正。
本教程参考《CSS网站布局实录》一书，在此向作者表示感谢。
要想学好DIV+CSS，首先要有一定的HTML和CSS知识，如果这些你还不了解，建议你先去补习这一课，再来学习本教程。
另外还要抛弃传统表格布局的思维模式，至于为什么，在你学习本教程中慢慢就会体会到。
如果这些你都准备好了，那么开始吧！
一列固定宽度是基础中的基础，所以这节做为入门的第一节。
我们给div使用了layout作为id名称，为了便于查看，使用了background-color:
#E8F5FE;
将div的背景色设置成浅蓝色，用border:
1pxsolid#A9C9E2;
将边框设置成天蓝色。
背景色和边框的属性将会在以后的教程中讲解。
由于是固定宽度布局，因此我们直接设置了宽度属性width:
300px;
与高度属性height:
200px;
最终效果请点击“运行此代码”按钮查看。
HTML代码---[WWW.AA25.CN]
提示：
您可以先修改部分代码再运行WWW.AA25.CN
下面讲解一下具体的步骤，因为本系列为入门级教程，所以采用dreaweaver可视化开发，让您少去手工写代码（但起码能看懂每句的意思），同时教程中尽量配图，做到简洁易懂。
如果您对CSS了解较多，本步骤可略过。
1、打开dreamweaver（以8.0为例），选择文件——新建
如图，注意选择好文档类型，建议选择XHTML1.0Transitional类型，有关文档类型更多知识，请参考：
选择合适的Doctype，解决CSS失效问题
选择工具栏的插入div标签工具，在对话框的ID框，可以先写入id的名称，然后在CSS面板中新建CSS样式，或者直接点击下边的新建css样式按钮，创建成功后会自动插入id名称，点击确定即可看到div标签已经插入到页面中了。
CSS样式设置如下：
注：
红线框内的部分为本例中需要设置的部分。
怎么样，一列固定宽度，就这么简单！
第二章CSS网页布局入门教程2：
一列自适应宽度
自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度和高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。
实际上div默认状态的占据整行的空间，便是宽度为100%的自适应布局的表现形式，一列自适应布局需要我们做的工作也非常简单，只需要将宽度由固定值改为百分比值的形式即可。
程序代码---[WWW.AA25.CN]
#layout{
border:
background-color:
height:
width:
80%;
}
CSS在大部分用数值作为参数的样式属性都提供了百分比，width宽度属性也不例外，在这里我们将宽度由一列固定宽度的300px，改为80%，从下边的预览效果中可以看到，div的宽度已经变为了浏览器宽度的80%的值。
自适应的优势就是当扩大或缩小浏览器窗口大小时，其宽度还将维持在与浏览器当前宽度的比例。
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
title>
AA25.CN_一列自适应宽度<
/title>
styletype="
text/css"
--
border:
background-color:
height:
width:
-->
/style>
/head>
body>
divid="
layout"
一列自适应宽度（AA25.CN）<
/div>
/body>
/html>
具体操作步骤请参考：
CSS入门教程：
只用在设置宽度时由原来的300px，改为80%即可。
第三章CSS网页布局入门教程3：
一列固定宽度居中
页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中，我们使用表格的align="
center"
属性来实现，。
div本身也支持align="
属性，也可以让div呈现居中状态，但css布局是为了实现表现和内容的分离，而align对齐属性是一种样式代码，书写在XHTML的div属性之中，有违背分享原则（分离可以使你的网站更加利于管理），因此应当css的方法实现内容的居中，我们以固定宽度一列布局代码为例，为其增加居中的css样式：
margin:
0pxauto;
margin属性用于控制对象的上、右、下、左四个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。
除了直接使用数值之外，margin不支持一个值叫auto，auto值是让浏览器自动判断边距，在这里，我们给当前div的左右边距设置为auto，浏览器就会将div的左右边距设为相当，并呈现为居中状态，从而实现了局中效果。
此方法居中对于IE6以下浏览器不支持，后边的CSSHACK部分详细讲解解决办法。
一列固定宽度居中——WWW.AA25.CN<
margin:
一列固定宽度居中（AA25.CN）<
操作步骤和一列固定宽度相同，只是在CSS边框设置项将边界的上、右、下、左分别设置为0、auto、0、auto即可。
第四章CSS网页布局入门教程4：
二列固定宽度
有了一列固定宽度作为基础，二列固定宽度就非常简单，我们知道div用于对某一个区域的标识，而二列的布局，自然需要用到两个div，XHTML代码如下：
left"
左列<
right"
右列<
新的代码结构中使用了两个id，分别为left和right，表示两个div的名称，我们所需要做的是，首先为它们制定宽度，然后让两个div在水平行中并排显示，从而形成二列式的布局，CSS代码如下：
ahref="
target="
_blank"
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd<
/a>
"
//www.w3.org/1999/xhtml<
二列固定宽度——AA25.CN<
#left{
float:
left;
#right{
#F2FDDB;
1pxsolid#A5CF3D;
left与right两个div的代码与前面类似，都使用相同宽高，本例中为了区分，左列和右列分别用了不同的边框和背景色。
而为了实现二列式布局，我们使用了一个全新的属性——float。
float属性是CSS布局中非常重要的一个属性，用于控制的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局，float的可选参数为：
none/left/right。
float使用none值时表示对象不浮动，而使用left时，对象将向左浮动，例如本例中的div使用了float:
left;
之后，右侧的内容将流到当前对象的右侧。
使用right时，对象将向右浮动，如果将left的float值设置为right，将使得left对象浮动到网页右侧，而right对象则由于float:
属性浮动到网页左侧。
这样，在动用了简单的float属性之后，二列固定宽度的而已就能够完整的显示出来。
具体操作步骤如下：
新建页面，插入div可以参考：
CSS网页布局入门教程1：
当插入一个div后，接着插入第二个时，在插入div标签的插入会多出一个选项：
在选定内容旁换行，这样插入就把这个div标签插入到了id为left的div之内，这并不是本例所要的结果，所以我们选择在标签之后，然后在右侧激活的下拉列表中找到<
#left"
，这样我们插入的id为right的div就插入到了left的后边。
如下图所示：
left的css设置如下：
right的设置只有与left的边框和背景色不同而已，可以参照left的自行设置。
第五章CSS网页布局入门教程5：
二列宽度自适应
从二列固定宽度入手，开始尝试二列布局的情况下，左右栏宽度能够做到自适应，从一列自适应布局中我们知道，设定自适应主要通过宽度的百分比值设置，因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计，继续上面的CSS代码，我们得新定义二列的宽度值：
float:
20%;
70%;
左栏宽度设置为宽度20%，右栏宽度设置为宽度的70%，看上去像一个左侧为导航，右侧为内容的常见网页形式。
二列宽度自适应——AA25.CN<
左列——（AA25.CN）<
右列——二列宽度自适应（AA25.CN）<
为什么没有将右栏设置为80%，从而实现整体100%的效果？
这个问题的原因香从对象的其它属性说起，大家应该还记得，为了使布局在预览中更清楚，我们使用了border属性，使得两个对象都具有1px的边框，而在CSS布局中，一个对象的宽度，不仅仅由width值来决定，一个对象的真实宽度是由对象本身的宽、对象的左右边距，以及左右边框，还有内边距这些属性相加而成，因此左面的对象不仅仅是浏览器窗口的20%的宽度，还应该加上左边的边框的宽度。
这样算下来左右栏都超出了自身的百分比宽度，最终的宽度也超过了浏览器窗口的宽度，因此右栏将被挤掉第二行显示，从而推动了左右分栏的效果，因此这里使用了并非100%的宽度之和，而在实际应用之中，可以通过避免边框及边距的使用，而达到左右与浏览器填满的效果。
这样一个有关宽度计算的问题，是CSS布局中相当重要的被称为为盒模型的问题，在以后的教程中会详细讲解，请继续关注本站的教程。
本例的制作过程和CSS网页布局入门教程4：
二列固定宽度一样，只不过在设置宽度时把固定的固定的200px宽度分别换成20%和70%，在此不再赘述。
第六章CSS网页布局入门教程6：
左列固定，右列宽度自适应
在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中实现这样的布局方式是简单可行的，只需在设置左栏的宽度即可，如上例中左右栏都采用了百分比实现了宽度自适应，而我们只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动，代码如下：
这样，左栏将呈现100%的宽度，而右栏将根据浏览器窗口大小自适应。
二列左列固定，右列宽度自适应——AA25.CN<
左列——固定（AA25.CN）<
右列——宽度自适应（AA25.CN）<
二列右列宽度自适应经常在网站在用到，不公是右列，也可以是左列，方法是一样的，只需要改变两个div的编写即可，而这种应用在目前的许多blog都能够经常看到，如pjblog中的许多网友制作的模板就是这种布局的。
制作过程这里不再详细赘述，请参考上一教程：
CSS网页布局入门教程5：
二列宽度自适应，只需将左列的宽度改为200px，右列的宽度和向左浮动去掉即可。
第七章CSS网页布局入门教程7：
二列固定宽度居中
在一列固定宽度之中，我们使用margi:
这样的设置，使一个div得以达到居中显示，而二列分栏中，需要控制的是左分栏的左边与右分栏的右边相等，因此使用margi:
似乎不能够达到宁产的效果，这时就需要进行div的嵌套式设计来完成了，可以使用一个居中的div作为容器，钭二列分栏的两个div旋转在容器中，从而实现二列的显示，结合上面的代码，新的XHTML代码结构如下：
hea
升级会员 