学习下CSS网页结构进门教程5：二列宽度自顺应

只看该作者 · 发表于 2015-1-16 10:39:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

其实DIV+CSS是很简单的一种布局方式，甚至比任何一种编程语言都要简单(虽然它不能算是编程语言)。

本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
从二列流动宽度动手，入手下手实验二列结构的情形下，摆布栏宽度可以做到自顺应，从一列自顺应结构中我们晓得，设定自顺应次要经由过程宽度的百分比值设置，因而在二列宽度自顺应的结构中也一样是对百分比宽度值的计划，持续下面的CSS代码，我们得新界说二列的宽度值：

#left{
background-color:#E8F5FE;
border:1pxsolid#A9C9E2;
float:left;
height:300px;
width:20%;
}
#right{
background-color:#F2FDDB;
border:1pxsolid#A5CF3D;
float:left;
height:300px;
width:70%;
}

左栏宽度设置为宽度20%，右栏宽度设置为宽度的70%，看上往像一个左边为导航，右边为内容的罕见网页情势。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>二列宽度自顺应——AA25.CN</title><styletype="text/css"></style></head><body><divid="left">左列——(AA25.CN)</div><divid="right">右列——二列宽度自顺应(AA25.CN)</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
为何未将右栏设置为80%，从而完成全体100%的效果？
这个成绩的缘故原由还得从工具的别的属性提及，人人应当还记得，为了使结构在预览中更分明，我们利用了border属性，使得两个工具都具有1px的边框，而在CSS结构中，一个工具的宽度，不单单由width值来决意，一个工具的实在宽度是由工具自己的宽、工具的摆布边距，和摆布边框，另有内边距这些属性相加而成，因而左面的工具不单单是扫瞄器窗口的20%的宽度，还应当加上右边的边框的宽度。如许算上去摆布栏都超越了本身的百分比宽度，终极的宽度也凌驾了扫瞄器窗口的宽度，因而右栏将被挤失落第二行显现，从而得到了摆布分栏的效果，因而这里利用了并不是100%的宽度之和，而在实践使用当中，能够经由过程制止边框及边距的利用，而到达摆布与扫瞄器填满的效果。如许一个有关宽度盘算的成绩，是CSS结构中相称主要的被称为为盒模子的成绩，在今后的教程中会具体解说，请持续存眷本站的教程。
本例的制造历程和CSS网页结构进门教程4：二列流动宽度一样，只不外在设置宽度时把流动的流动的200px宽度分离换成20%和70%，在此不再赘述。

通常把清除浮动写成单独的
放在所有浮动div的最下方。

只看该作者 · 发表于 2015-3-24 08:42:19

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-3-17 11:08:31

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-10 21:05:43

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-1 15:55:06

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-10 21:19:31

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-2-4 21:45:31

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-1-26 20:50:48

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-1-18 07:45:44

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 学习下CSS网页结构进门教程5：二列宽度自顺应

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子