CSS网页布局入门教程.docVIP

CSS网页布局入门教程1：一列固定宽度 文章出处：标准之路(/div_css/261.shtml) 一列固定宽度是基础中的基础，所以这节作为入门的第一节。 我们给div使用了layout作为id名称，为了便于查看，使用了background-color: #E8F5FE;将div的背景色设置成浅蓝色，用border: 2px solid #A9C9E2;将边框设置成天蓝色。背景色和边框的属性将会在以后的教程中讲解。 由于是固定宽度布局，因此我们直接设置了宽度属性width: 300px;与高度属性height: 200px; !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title一列固定宽度——AA25.CN/title style type=text/css !-- #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 300px; } -- /style /head body div id=layout一列固定宽度(AA25.CN)/div /body /html 下面讲解一下具体的步骤，因为本系列为入门级教程，所以采用dreaweaver可视化开发，让您少去手工写代码（但起码能看懂每句的意思），同时教程中尽量配图，做到简洁易懂。如果您对CSS了解较多，本步骤可略过。 1、打开dreamweaver（以8.0为例），选择文件——新建 如图，注意选择好文档类型，建议选择XHTML 1.0 Transitional类型，有关文档类型更多知识，请参考：选择合适的Doctype，解决CSS失效问题 选择工具栏的“插入div标签”工具，在对话框的ID框中写入id的名称#layout，然后在CSS面板中新建CSS样式，或者直接点击下边的新建css样式按钮，创建成功后会自动插入id名称，点击确定即可看到div标签已经插入到页面中了（如果刚插入的div为未选中状态，在css面板中新建时则需手动输入ID名：#layout）。 注意：此处选择器内请输入你要定义的id名称 CSS样式设置如下： 注：红线框内的部分为本例中需要设置的部分。 CSS网页布局入门教程2：一列自适应宽度 文章出处：标准之路(/div_css/262.shtml) 自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度和高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上div默认状态的占据整行的空间，便是宽度为100%的自适应布局的表现形式，一列自适应布局需要我们做的工作也非常简单，只需要将宽度由固定值改为百分比值的形式即可 #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 80%; } CSS在大部分用数值作为参数的样式属性都提供了百分比，width宽度属性也不例外，在这里我们将宽度由一列固定宽度的300px，改为80%，从下边的预览效果中可以看到，div的宽度已经变为了浏览器宽度的80%的值。自适应的优势就是当扩大或缩小浏览器窗口大小时，其宽度还将维持在与浏览器当前宽度的比例。 具体操作步骤请参考：CSS网页布局入门教程1：一列固定宽度 只用在设置宽度时由原来的300px，改为80%即可。 CSS网页布局入门教程3：一列固定宽度居中 文章出处：标准之路(/div_css/263.shtml) 页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中，我们使用表格的align=center属性来实现。div本身也支持align=center属性，也可以让div呈现居中状态，但css布局是为了实现表现和内容的分离，而align对齐属性是一种样式代码，书写在XHTML的div属性之中，有违背分享原则（分离可以使你的网站更加利于管理），因此应当用css实现内容的居中，我们以固定宽度一列布局代码为例，为其增加居中的css样式： #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE