dreamweaver一列自适应宽度

时间:2012-11-10 21:17 来源:未知 作者:云南新华电脑学院 点击:
一列自适应宽度 自适应宽度是相对于浏览器而言,盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时,它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看: #layout { height: 300px; backgroun
一列自适应宽度
自适应宽度是相对于浏览器而言,盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时,它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看: #layout { height: 300px; background: #99FFcc;}

有些朋友可能要问了,那为什么还有那么宽的白边呢?这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时,body,h1-h6,ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项:body {margin:0;},就可以把body默认的外边距去掉,这时再预览一下,白边就没了。 body { margin: 0px; }
#layout { height: 300px; background: #99FFcc;}

这里的选择器类型是新手朋友容易迷糊的地方,类:是指定义一个class,可以多个对象引用;标签:指对默认的html标签进行重新定义,如可以定义body{margin:0},意思是 将body的外边距设置为0,h2{color:#f00}是将所有h2标签的文字颜色设置为红色;它把ID和伪类放到一块了,是一个设置不合理的地方,在cs4版本中已经分开了。ID是以#开始,id只能作用于一个对象,不能作用于多个对象,优先级高于class,这是id和class的区别。伪类会在第九节时详细讲解


如果我们需要按浏览器的80%显示,那么设置宽度为80%,当改变浏览器窗口大小时,盒模型的宽度也会跟着改变。

完整代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0;}
#layout { height: 300px; width: 80%; background: #99FFcc; }
</style>
</head>
<body>
<div id="layout">此处显示 id "layout" 的内容</div>
</body>
</html>

分享到:
云南新华电脑学校专业职业规划师为你提供更多帮助

相关文章

发表评论
评价:
验证码: 点击我更换图片
咨询中心
咨询电话:0871-68211888,QQ:800068988

在线咨询 预约报名
新华云课堂
电话咨询 顶部