CSS网页布局入门教程_第1页
CSS网页布局入门教程_第2页
CSS网页布局入门教程_第3页
CSS网页布局入门教程_第4页
CSS网页布局入门教程_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、CSS网页布局入门教程1：一列固定宽度 文章出处：标准之路(一列固定宽度是基础中的基础，所以这节作为入门的第一节。我们给div使用了layout作为id名称，为了便于查看，使用了background-color: #E8F5FE;将div的背景色设置成浅蓝色，用border: 2px solid #A9C9E2;将边框设置成天蓝色。背景色和边框的属性将会在以后的教程中讲解。由于是固定宽度布局，因此我们直接设置了宽度属性width: 300px;与高度属性height: 200px; <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Trans

2、itional/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><st

3、yle 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可视化开发，

4、让您少去手工写代码（但起码能看懂每句的意思），同时教程中尽量配图，做到简洁易懂。如果您对CSS了解较多，本步骤可略过。1、打开dreamweaver（以8.0为例），选择文件新建如图，注意选择好文档类型，建议选择XHTML 1.0 Transitional类型，有关文档类型更多知识，请参考：选择合适的Doctype，解决CSS失效问题选择工具栏的“插入div标签”工具，在对话框的ID框中写入id的名称#layout，然后在CSS面板中新建CSS样式，或者直接点击下边的新建css样式按钮，创建成功后会自动插入id名称，点击确定即可看到div标签已经插入到页面中了（如果刚插入的div为未选中状态，

5、在css面板中新建时则需手动输入ID名：#layout）。注意：此处选择器内请输入你要定义的id名称 CSS样式设置如下：注：红线框内的部分为本例中需要设置的部分。CSS网页布局入门教程2：一列自适应宽度 文章出处：标准之路(自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度和高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上div默认状态的占据整行的空间，便是宽度为100%的自适应布局的表现形式，一列自适应布局需要我们做的工作也非常简单，只需要将宽度由固定值改为百分比值的形式即可#layout bo

6、rder: 2px solid #A9C9E2;background-color: #E8F5FE;height: 200px;width: 80%;CSS在大部分用数值作为参数的样式属性都提供了百分比，width宽度属性也不例外，在这里我们将宽度由一列固定宽度的300px，改为80%，从下边的预览效果中可以看到，div的宽度已经变为了浏览器宽度的80%的值。自适应的优势就是当扩大或缩小浏览器窗口大小时，其宽度还将维持在与浏览器当前宽度的比例。具体操作步骤请参考：CSS网页布局入门教程1：一列固定宽度只用在设置宽度时由原来的300px，改为80%即可。CSS网页布局入门教程3：一列固定宽度居中

7、文章出处：标准之路(页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中，我们使用表格的align="center"属性来实现。div本身也支持align="center"属性，也可以让div呈现居中状态，但css布局是为了实现表现和内容的分离，而align对齐属性是一种样式代码，书写在XHTML的div属性之中，有违背分享原则（分离可以使你的网站更加利于管理），因此应当用css实现内容的居中，我们以固定宽度一列布局代码为例，为其增加居中的css样式： #layout border: 2px solid #A9C9E2;background-col

8、or: #E8F5FE;height: 200px;width: 300px;margin:0px auto;margin属性用于控制对象的上、右、下、左四个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。除了直接使用数值之外，margin还支持一个值叫auto，auto值是让浏览器自动判断边距，在这里，我们给当前div的左右边距设置为auto，浏览器就会将div的左右边距设为相当，并呈现为居中状态，从而实现了局中效果。注：此方法居中对于IE6以下浏览器不支持。操作步骤和一列固定宽度相同，只是在CSS边框设置项将边界的上、右、下、左分别设置为0、au

9、to、0、auto即可。CSS网页布局入门教程4：二列固定宽度 文章出处：标准之路(有了一列固定宽度作为基础，二列固定宽度就非常简单，我们知道div用于对某一个区域的标识，而二列的布局，自然需要用到两个div，XHTML代码如下： <div id="left">左列</div><div id="right">右列</div>新的代码结构中使用了两个id，分别为left和right，表示两个div的名称，我们所需要做的是，首先设置它们的宽度，然后让两个div在水平行中并排显示，从而形成二列式的布局，CSS代码

10、如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="cn" lang="cn"> <head><meta http-equiv="Content-Type&

11、quot; content="text/html; charset=gb2312" /> <title>二列固定宽度AA25.CN</title><style type="text/css"><!-#left background-color: #E8F5FE;border: 1px solid #A9C9E2;float: left;height: 300px;width: 200px;#right background-color: #F2FDDB;border: 1px solid #A5CF3D;f

12、loat: left;height: 300px;width: 200px;-></style></head><body><div id="left">左列</div><div id="right">右列</div></body></html>left与right两个div的代码与前面类似，都使用相同宽高，本例中为了区分，左列和右列分别用了不同的边框和背景色。而为了实现二列式布局，我们使用了一个全新的属性float。float属性是CSS布局

13、中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局，float的可选参数为：none/left/right。 float使用none值时表示对象不浮动，而使用left时，对象将向左浮动，例如本例中的div使用了float:left;之后，右侧的内容将流到当前对象的右侧。使用right时，对象将向右浮动，如果将#left的float值设置为right，将使得#left对象浮动到网页右侧，而#right对象则由于float:left;属性浮动到网页左侧。这样，在动用了简单的float属性之后，二列固定宽度的而已就能够完整的显示出来。 具体

14、操作步骤如下：新建页面，插入div可以参考：CSS网页布局入门教程1：一列固定宽度当插入一个div后，接着插入第二个时，在插入div标签的插入会多出一个选项：在选定内容旁换行，这样插入就把这个div标签插入到了id为left的div之内，这并不是本例所要的结果，所以我们选择在标签之后，然后在右侧激活的下拉列表中找到<div id="#left">，这样我们插入的id为right的div就插入到了left的后边。如下图所示：left的css设置如下：right的设置只有与left的边框和背景色不同而已，可以参照left的自行设置。CSS网页布局入门教程5：二列宽度

15、自适应 文章出处：标准之路(从二列固定宽度入手，开始尝试二列布局的情况下，左右栏宽度能够做到自适应，从一列自适应布局中我们知道，设定自适应主要通过宽度的百分比值设置，因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计，继续上面的CSS代码，我们得新定义二列的宽度值：#left background-color: #E8F5FE;border: 1px solid #A9C9E2;float: left;height: 300px;width: 20%;#right background-color: #F2FDDB;border: 1px solid #A5CF3D;float: lef

16、t;height: 300px;width: 70%;左栏宽度设置为宽度20%，右栏宽度设置为宽度的70%，看上去像一个左侧为导航，右侧为内容的常见网页形式。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta

17、 http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>二列宽度自适应AA25.CN</title><style type="text/css"><!-#left background-color: #E8F5FE;border: 1px solid #A9C9E2;float: left;height: 300px;width: 20%;#right background-color: #F2FDD

18、B;border: 1px solid #A5CF3D;float: left;height: 300px;width: 70%;-></style></head><body><div id="left">左列(AA25.CN)</div><div id="right">右列二列宽度自适应(AA25.CN)</div></body></html>为什么没有将右栏设置为80%，从而实现整体100%的效果？这个问题的原因还得从对象的其它属性说起，

19、大家应该还记得，为了使布局在预览中更清楚，我们使用了border属性，使得两个对象都具有1px的边框，而在CSS布局中，一个对象的宽度，不仅仅由width值来决定，一个对象的真实宽度是由对象本身的宽、对象的左右边距，以及左右边框，还有内边距这些属性相加而成，因此左面的对象不仅仅是浏览器窗口的20%的宽度，还应该加上左边的边框的宽度。这样算下来左右栏都超出了自身的百分比宽度，最终的宽度也超过了浏览器窗口的宽度，因此右栏将被挤掉第二行显示，从而失去了左右分栏的效果，因此这里使用了并非100%的宽度之和，而在实际应用之中，可以通过避免边框及边距的使用，而达到左右与浏览器填满的效果。这样一个有关宽度计

20、算的问题，是CSS布局中相当重要的被称为为盒模型的问题，在以后的教程中会详细讲解，请继续关注本站的教程。本例的制作过程和CSS网页布局入门教程4：二列固定宽度一样，只不过在设置宽度时把固定的固定的200px宽度分别换成20%和70%，在此不再赘述。CSS网页布局入门教程6：左列固定，右列宽度自适应文章出处：标准之路(#left background-color: #E8F5FE;border: 1px solid #A9C9E2;float: left;height: 300px;width: 200px;#right background-color: #F2FDDB;border: 1px

21、 solid #A5CF3D;height: 300px;这样，左栏将呈现100%的宽度，而右栏将根据浏览器窗口大小自适应。二列右列宽度自适应经常在网站在用到，不仅是右列，也可以是左列，方法是一样的，只需要改变两个div的编写即可，而这种应用在目前的许多blog都能够经常看到，如pjblog中的许多网友制作的模板就是这种布局的。制作过程这里不再详细赘述，请参考上一教程：CSS网页布局入门教程5：二列宽度自适应，只需将左列的宽度改为200px，右列的宽度和向左浮动去掉即可。如还有不明白地方您可以在评论中提问。CSS网页布局入门教程7：二列固定宽度居中文章出处：标准之路(在一列固定宽度之中，我们使

22、用margin:0px auto;这样的设置，使一个div得以达到居中显示，而二列分栏中，需要控制的是左分栏的左边与右分栏的右边相等，因此使用margi:0px auto;似乎不能够达到这样的效果，这时就需要进行div的嵌套式设计来完成了，可以使用一个居中的div作为容器，将二列分栏的两个div放置在容器中，从而实现二列的居中显示，结合上面的代码，新的XHTML代码结构如下：<!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&quo

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论