电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

DIV+CSS网页布局初级入门系列教程2

DIV+CSS网页布局初级入门系列教程2_第1页
1/53
DIV+CSS网页布局初级入门系列教程2_第2页
2/53
DIV+CSS网页布局初级入门系列教程2_第3页
3/53
第 三天 二列和三列布局 今天学习《十天学会web 标准(div+css)》的二列和三列布局,将涉及到以下内容和知识点  二列自适应宽度  二列固定宽度  二列固定宽度居中  xhtml 的块级元素(div)和内联元素(span)  float 属性  三列自适应宽度  三列固定宽度  三列固定宽度居中  IE6 的3 像素bug 一 、两列自适应宽度 下面以常见的左列固定右列自适应为例,因为div 为块状元素,默认情况下占据一行的空间,要想让下面的div 跑到右侧,就需要做助css 的浮动来实现。首先创建 html 代码如下:
此处显示 id "side" 的内容
此处显示 id "main" 的内容
按照如图所示的创建方法,把两个 div 都创建出来,或手工写出代码。div 创建完成后,开始创建 css 样式表,代码如下: #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; } 先创建#s ide 的样式,为了便于查看,设置了背景色。注意,s ide 的浮动设置为向左浮动; 然后创建#main 样式,注意这里设置#main 的左边距为120px。预览结果如下: 当我们拖动浏览器窗口变大变小时,#main 的宽度也会跟着改变。这里设置margin-left:120px ;正好让出#side 占去的120px 宽度,如果这里设置为 122px 的话,中间将出现 2px 的空隙,大家可以试一下。
此处显示 id "side" 的内容
此处显示 id "main" 的内容
提示:可以先修改部分代码后再运行 二 、两列固定宽度 有了前面的基础,两列固定宽度就容易多了,只需要把#main 的宽度由百分比改为固定值,如下图: 三 、两...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

DIV+CSS网页布局初级入门系列教程2

确认删除?
VIP
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群
客服邮箱
回到顶部