当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-09-06

    本文导语:  自适应布局是网页设计中常见的布局形式,自适应的布局能够根据浏览器窗口的大小,自动改变其宽度和高度值,是一种非常灵活的布局形式,良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上div...

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

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


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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

只用在设置宽度时由原来的300px,改为80%即可。


    
 
 

您可能感兴趣的文章:

  • 非常漂亮的Div+CSS布局入门教程第1/5页
  • CSS网页布局入门教程1:一列固定宽度
  • CSS网页布局入门教程3:一列固定宽度居中
  • CSS网页布局入门教程6:左列固定,右列宽度自适应
  • CSS网页布局入门教程7:二列固定宽度居中
  • CSS网页布局入门教程5:二列宽度自适应
  • CSS入门教程篇
  • CSS网页布局入门教程4:二列固定宽度
  • CSS网页布局入门教程14:纵向下拉及多级弹出式菜单
  • CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
  • CSS网页布局入门教程12:纵向导航菜单
  • 使用CSS框架布局的缺点和优点小结 iis7站长之家
  • CSS网页布局入门教程10:带当前标识的标签式横向导航
  • CSS网页布局入门教程9:用CSS设计网站导航——横向导航
  • CSS网页布局入门教程13:下拉及多级弹出式菜单
  • CSS控制图片大小-适应宽度
  • 左侧固定宽度,右侧自适应宽度的CSS布局
  • div+css实现自适应宽度按钮
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • CSS网页布局框架 Elastic
  • CSS布局中可以用javascript判断浏览器版本
  • DIV+CSS布局教程大全与pdf电子书 下载
  • css网页布局中注意的几个问题小结
  • DIV+CSS布局的网站对网站SEO的影响分析
  • CSS整体布局声明的一些使用技巧
  • 用CSS实现表单form布局
  • css布局网页水平居中常用方法
  • div+CSS网页布局的意义与副作用原因小结第1/2页
  • CSS顶级技巧大放送,div+css布局必知
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • DIV CSS网页布局 最小高度(min-height)的妙用
  • 用CSS floats创建三栏页布局
  • 布局用CSS+DIV的优点总结
  • div+css布局必了解的列表元素ul ol li dl dt dd详解
  • div+css布局必须要知道的css条件注释理论及实践第1/2页
  • DIV+CSS网页另类上下布局的实例代码
  • 使用CSS框架布局的缺点和优点小结
  • 做网页中需要掌握的八个CSS布局技巧
  • div+css页面布局的五个小技巧
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3