今天来学习CSS网页结构进门教程7：二列流动宽度居中
增加了开发风险，一个css文件的出错，可能导致整站崩溃，惨不忍睹，大量的访问链接同时调用静态的css文件，可能造成并发错误，调用失败。[*]
[*]
本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
在一列流动宽度当中，我们利用margin:0pxauto;如许的设置，使一个div得以到达居中显现，而二列分栏中，必要把持的是左分栏的右边与右分栏的右侧相称，因而利用margi:0pxauto;仿佛不克不及够到达如许的效果，这时候就必要举行div的嵌套式计划来完成了，可使用一个居中的div作为容器，将二列分栏的两个div安排在容器中，从而完成二列的居中显现，分离下面的代码，新的XHTML代码布局以下：
<!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"><!--#layout{width:404px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;}#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300px;width:200px;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;float:left;height:300px;width:200px;}--></style></head><body><divid="layout"><divid="left">左列</div><divid="right">右列</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
#layout有了居中的属性，天然里边的内容也可以做到居中，这里的成绩在于#layout的宽度界说，将#layout的宽度设定为404px，由于在上一个教程中懂得过，一个工具真实的宽度是由它的各类属性相加而成，而left的宽度为200px，但摆布都有1px的边距，因而实践宽度是202px，right工具一样云云，为了让layout作为容器可以装下它们两个,宽度则变成了left和right的实践宽度和，便设定为了404px，如许，就完成了二列居中显现。
二列宽度居中在实践网站上使用长短常普遍。
课余，我们也思考过为什么要学习并使用div+css，而不是如何实现某个细节。当然我们也不应当为了Div+css而Div+css。这样做毫无意义。而以下两点是我们总结了的它不得不说的好： 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
页:
[1]