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

自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度和高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上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%即可。

赞 (0)

相关推荐

  • iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过

    废话不多说,贴上代码,也算是自己的一个代码存储. 复制代码 代码如下: var temp_iframe var content = document.getElementById('right'); //id为 right的DOM容器中,进行创建iframe和宽高自适应 var c = 0; function append(filename) { var the_iframe = "helpfile" + c; temp_iframe = document.createElement(

  • div+css实现自适应宽度按钮

    div+css实现自适应宽度按钮

    先来看张图片: 原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形.再通过hover标签去滑动图片.而你只需要一张图片: ok,看看代码吧. CSS: 复制代码 代码如下: *{margin:0; padding:0;}   body{padding:10px; font-size:12px;}   h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}   a{background:url(1.

  • javascript自适应宽度的瀑布流实现思路

    javascript自适应宽度的瀑布流实现思路

    这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和

  • 左侧固定宽度，右侧自适应宽度的CSS布局

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修改). 于是自己写了个简单的左右两列的布局,没用到什么hack,很简单,只是练手用用. css代码:left和right都贴住左侧.设置left在right上面(z-index):在right内加个放内容的层(content):设置content距离right的左侧为200px,即刚巧等于left的

  • 固定右栏宽度, 左栏内容先出现同时自适应宽度的布局

    工作原理 #wrapper必须触发hasLayout,不然有时里面的内容会浮得怪怪的,我直接用float的,可以用其他方式.其实如果只是要做到这个例子要的效果连#wrapper都可以不要.#left定义100%宽度并利用margin:0 0 0 -200px把左边整块放在偏移入左边200px处,再利用#innerLeft的margin:0 0 0 200px再把内容撑出来,#right只是简单的浮动,#innerRight米多大作用,只是习惯性保留着,除了可以让我们的控制更简单点,还可以为下次改

  • CSS网页布局入门教程6：左列固定，右列宽度自适应

    在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 3

  • CSS网页布局入门教程5：二列宽度自适应

    从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 300px;      w

  • CSS网页布局入门教程4：二列固定宽度

    CSS网页布局入门教程4：二列固定宽度

    有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 复制代码 代码如下: <div id="left">左列</div>  <div id="right">右列</div> 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示

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

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

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

  • CSS网页布局入门教程1：一列固定宽度

    CSS网页布局入门教程1：一列固定宽度

    本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固

  • CSS网页布局入门教程8：三列浮动中间列宽度自适应

    CSS网页布局入门教程8：三列浮动中间列宽度自适应

    使用浮动定位方式,从一列到多列的固定宽度及自适应,基本上可以简单完成,包括三列的固定宽度.而在这里给我们提出了一个新的要求,希望有一个三列式布局,基中左栏要求固定宽度,并居左显示,右栏要求固定宽度并居右显示,而中间栏需要在左栏和右栏的中间,根据左右栏的间距变化自动适应.这给布局提出了一个新的要求,而且单纯使用float属性与百分比属性并不能够实现,CSS目前还不支持百分比的计算精确到考虑左栏和右栏的占位,如果对中间栏使用100%宽度的话,它将使用浏览器窗口的宽度,而非左栏与右栏的中间间距,因此我

  • CSS网页布局入门教程3：一列固定宽度居中

    CSS网页布局入门教程3：一列固定宽度居中

    页面整体居中是网页设计中最普遍应用的形式,在传统表格布局中,我们使用表格的align="center"属性来实现,.div本身也支持align="center"属性,也可以让div呈现居中状态,但css布局是为了实现表现和内容的分离,而align对齐属性是一种样式代码,书写在XHTML的div属性之中,有违背分享原则(分离可以使你的网站更加利于管理),因此应当css的方法实现内容的居中,我们以固定宽度一列布局代码为例,为其增加居中的css样式: 复制代码 代码如下:

  • CSS网页布局入门教程7：二列固定宽度居中

    在一列固定宽度之中,我们使用margi:0px auto;这样的设置,使一个div得以达到居中显示,而二列分栏中,需要控制的是左分栏的左边与右分栏的右边相等,因此使用margi:0px auto;似乎不能够达到宁产的效果,这时就需要进行div的嵌套式设计来完成了,可以使用一个居中的div作为容器,钭二列分栏的两个div旋转在容器中,从而实现二列的显示,结合上面的代码,新的XHTML代码结构如下: 二列固定宽度居中--AA25.CN 左列 右列 [Ctrl+A 全选 注:如需引入外部Js需刷新才能

  • CSS网页布局入门教程9：用CSS设计网站导航——横向导航

    网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具.网站导航从形式上主要由横向导航.纵向导航.下拉及多级菜单导航第三种形式. 横向导航 作为门户网站的设计而言,主导航一般采用横向导航.由于门户网站下方文字较多,且每个频道均有一同的样式区分,因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择,国内大部分门户均采用这种形式. 纵向导航 目前在门户网站的设计中已经不再流行,纵向导航更倾向于表达产品分类. 下拉导航 主要用于功能复杂的网站.在有些网站上也

  • CSS网页布局入门教程13：下拉及多级弹出式菜单

    下拉及弹出式菜单是网站设计中常用导航形式,这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容,并能对内容进行合理的分类显示,是一种非常优秀的导航形式.  早期的下拉或弹出式菜单通过隐藏的layer或div来实现内容的隐藏,通过JavaScript脚本来响应用户的操作,目前也采用JavaScript+div或其它元素的形式来制作此类导航,不同的是整个导航都将使用符合标准的css布局来打造,不再使用表格来制作菜单,下拉式菜单是上面提到的横向导航与纵向导航的结合,而且通过css对于属性的众多支持,

随机推荐