CSS教程之CSS网页结构进门教程2：一列自顺应宽度

显示全部楼层 · 发表于 2015-1-16 10:39:01

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

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

x

最后你还得知道，你所用的工具，你可能认为Dreamweaver很好，没错，它的确不错，但你要认识到，当你熟练使用了这门技术，你就可以在任何文本编辑器中编写网页，甚至在记事本中。

本站2010年9月新增《十天学会web尺度（div+CSS）》系列教程，接待进修！
自顺应结构是网页计划中罕见的结构情势，自顺应的结构可以依据扫瞄器窗口的巨细，主动改动其宽度和高度值，是一种十分天真的结构情势，优秀的自顺应结构网站对分歧分辩率的显现器都能供应最好的显现效果。实践上div默许形态的占有整行的空间，即是宽度为100%的自顺应结构的体现情势，一列自顺应结构必要我们做的事情也十分复杂，只必要将宽度由流动值改成百分比值的情势便可

#layout{
border:2pxsolid#A9C9E2;
background-color:#E8F5FE;
height:200px;
width:80%;
}

CSS在年夜部分用数值作为参数的款式属性都供应了百分比，width宽度属性也不破例，在这里我们将宽度由一列流动宽度的300px，改成80%，从下边的预览效果中能够看到，div的宽度已变成了扫瞄器宽度的80%的值。自顺应的上风就是当扩展或减少扫瞄器窗口巨细时，其宽度还将保持在与扫瞄器以后宽度的比例。
<!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="layout">一列自顺应宽度(AA25.CN)</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
详细操纵步骤请参考：CSS网页结构进门教程1：一列流动宽度
只用在设置宽度时由本来的300px，改成80%便可。

登录/注册后可看大图

大大增加协同工作的难度，很多没学过div的程序员对于美工出的div页面束手无措，稍微改错了，可能整个站点就惨不忍睹了。当然，如果你是一个全才，可以搞定一切，也可能不会。

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

[DIV+CSS] CSS教程之CSS网页结构进门教程2：一列自顺应宽度

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

相关帖子