当前位置:首页 > DIV+CSS教程 > 正文

CSS网页布局入门教程2:一列自适应宽度

作者:不详 来源:source 【 】 浏览: 添加日期:2007-06-28 我要评论(42)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

自适应布局是网页设计中常见的布局形式,自适应的布局能够根据浏览器窗口的大小,自动改变其宽度和高度值,是一种非常灵活的布局形式,良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上div默认状态的占据整行的空间,便是宽度为100%的自适应布局的表现形式,一列自适应布局需要我们做的工作也非常简单,只需要将宽度由固定值改为百分比值的形式即可

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

CSS在大部分用数值作为参数的样式属性都提供了百分比,width宽度属性也不例外,在这里我们将宽度由一列固定宽度的300px,改为80%,从下边的预览效果中可以看到,div的宽度已经变为了浏览器宽度的80%的值。自适应的优势就是当扩大或缩小浏览器窗口大小时,其宽度还将维持在与浏览器当前宽度的比例。


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

具体操作步骤请参考:CSS网页布局入门教程1:一列固定宽度
只用在设置宽度时由原来的300px,改为80%即可。
 

〖栏目所有文章〗Tags: 标签地图

所属专题:入门教程

更多评论(42)..网友评价

youndwang(125.34.*.*) 发表于:2013-06-11 13:07:47
有个这个网站我学做网页不愁了。
huangyh2610(219.232.*.*) 发表于:2010-12-29 12:33:34
建议老大架个论坛
管理员回复:天朝对这块管理比较严格,再加上本人没时间管理,帮不会上论坛
keen10(121.33.*.*) 发表于:2010-08-21 00:35:22
学习了,先感谢一下
管理员回复:不客气,欢迎常来
加强CSS(58.61.*.*) 发表于:2010-08-16 14:44:53
怎么运行代码没有用了。
管理员回复:不支持ff
xjz1314(59.41.*.*) 发表于:2010-03-22 23:40:02
我是个初学者,很感激有这样的一个网站,可以让我学到网页制作技巧~
不倒翁(121.204.*.*) 发表于:2010-02-23 12:03:20
谢谢LZ了,我现在有家的感觉了。
管理员回复:不客气,常来哟
学无止境(119.1.*.*) 发表于:2010-02-22 15:59:43
呵呵第一到你的站,不错,终于找到家了,期待弄一个交流论坛什么的. 另QQ群我加不进去呵呵,谢谢管管们了.
管理员回复:QQ群由网友们提供,一个加不进去请多试几个。国家对论坛这块管理的比较严格,所以不打算开,但会增加一些互动方式
www.838383.cn(58.242.*.*) 发表于:2010-02-11 11:42:42
html网页太大,打开速度太慢,试着学CSS+DIV
管理员回复:欢迎学习

【视频教程】新手常见问题

Copyright ®2013-2018 www.51itstudy.com online services. All rights reserved.

意见反馈 E-mail: kefu@51itstudy.com

声明:本网站尊重并保护知识产权,根据《信息网络 传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在24小时内通本站,我们会及时删除!

    

粤ICP备14015648号-3