CSS网页布局入门教程1.docx
- 文档编号：7450671
- 上传时间：2023-05-11
- 格式：DOCX
- 页数：54
- 大小：615.44KB
CSS网页布局入门教程1.docx
《CSS网页布局入门教程1.docx》由会员分享，可在线阅读，更多相关《CSS网页布局入门教程1.docx（54页珍藏版）》请在冰点文库上搜索。
CSS网页布局入门教程1
以下部分内容取自
第一章CSS网页布局入门教程1：
一列固定宽度2
第二章CSS网页布局入门教程2：
一列自适应宽度6
第三章CSS网页布局入门教程3：
一列固定宽度居中8
第四章CSS网页布局入门教程4：
二列固定宽度11
第五章CSS网页布局入门教程5：
二列宽度自适应15
第六章CSS网页布局入门教程6：
左列固定，右列宽度自适应17
第七章CSS网页布局入门教程7：
二列固定宽度居中19
第八章CSS网页布局入门教程8：
三列浮动中间列宽度自适应21
第九章CSS网页布局入门教程9：
用CSS设计网站导航——横向导航26
第十章CSS网页布局入门教程10：
带当前标识的标签式横向导航32
第十一章CSS网页布局入门教程11：
带当前标识的标签式横向导航图片美化版37
第十二章CSS网页布局入门教程12：
纵向导航菜单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:
1pxsolid#A9C9E2;
background-color:
#E8F5FE;
height:
200px;
width:
80%;
}
CSS在大部分用数值作为参数的样式属性都提供了百分比，width宽度属性也不例外，在这里我们将宽度由一列固定宽度的300px，改为80%，从下边的预览效果中可以看到，div的宽度已经变为了浏览器宽度的80%的值。
自适应的优势就是当扩大或缩小浏览器窗口大小时，其宽度还将维持在与浏览器当前宽度的比例。
HTML代码---[WWW.AA25.CN]
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
--
#layout{
border:
1pxsolid#A9C9E2;
background-color:
#E8F5FE;
height:
200px;
width:
80%;
}
-->