版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、DIV+CSS常见布局,主要内容,1 单列版式 2 双列版式 3 三列版式,DIV+CSS常见布局,DIV+CSS布局看起来像是把页面划分成若干个区域,如果还划分区域,根据内容的排列方式,常见的页面布局有如下三个: 1、单列版式 2、双列版式 3、三列版式,单列版式是最简单的布局版式,网页内容在一栏中显示,如下图:,1、单列版式,单列版式分为: 单列固定宽度版式 各个区域宽度是固定的 单列自适应宽度版式 各个区域宽度会随着包含框的宽度自适应(将宽度设置为百分比),网页内容部分源代码,如下图:,1、单列版式,1、单列版式,CSS部分源代码,如下图:,双列版式是网页中最常用的布局版式,如下图:,2
2、、双列版式,双列版式分为: 双列固定宽度版式 各个区域宽度是固定的 双列自适应宽度版式 各个区域宽度会随着包含框的宽度自适应(将宽度设置为百分比) 双列兼容宽度版式 一栏宽度固定,一栏宽度自适应,2、双列版式(双列固定宽度版式),双列固定宽度版式,网页内容部分源代码,如下图:,2、双列版式(双列固定宽度版式),CSS部分源代码,如下图:,2、双列版式(双列自适应宽度版式),双列自适应宽度版式,网页内容部分源代码,如下图:,CSS部分源代码,如下图:,2、双列版式(双列自适应宽度版式),双列兼容宽度版式,网页内容部分源代码,如下图:,2、双列版式(双列兼容宽度版式),CSS部分源代码,如下图:,
3、左侧浮动,右侧采用margin-left,2、双列版式(双列兼容宽度版式),三列版式是企业网站和商用网站中最常用的布局版式,如下图:,3、三列版式,三列版式分为: 三列固定宽度版式 各个区域宽度是固定的 三列自适应宽度版式 各个区域宽度会随着包含框的宽度自适应(将宽度设置为百分比) 三列兼容宽度版式 双列固定,一列宽度自适应 一列固定,双列宽度自适应,3、三列版式(三列固定宽度版式),三列固定宽度版式,网页内容部分源代码,如下图:,CSS部分源代码,如下图:,3、三列版式(三列固定宽度版式),三列自适应宽度版式,网页内容部分源代码,如下图:,3、三列版式(三列自适应宽度版式),CSS部分源代码
4、,如下图:,3、三列版式(三列自适应宽度版式),三列兼容宽度版式,双列固定,一列宽度自适应(副栏、次栏固定宽度,主栏宽度自适应) 方法一:网页内容部分源代码,如下图:,3、三列版式(三列兼容宽度版式双列固定,一列宽度自适应),CSS部分源代码,如下图:,左右两侧绝对定位,中间采用margin-left,margin-right,3、三列版式(三列兼容宽度版式双列固定,一列宽度自适应),三列兼容宽度版式,双列固定,一列宽度自适应(副栏、次栏固定宽度,主栏宽度自适应) 方法二:网页内容部分源代码,如下图:,3、三列版式(三列兼容宽度版式双列固定,一列宽度自适应),CSS部分源代码,如下图:,左右两
5、侧浮动,中间采用margin-left,margin-right,3、三列版式(三列兼容宽度版式双列固定,一列宽度自适应),三列兼容宽度版式,一列固定,双列宽度自适应(副栏固定宽度,次栏、栏宽度自适应) 方法一:网页内容部分源代码,如下图:,3、三列版式(三列兼容宽度版式一列固定,双列宽度自适应),CSS部分源代码,如下图:,左右两侧绝对定位,中间采用margin-left,margin-right。 左侧宽度固定,右侧宽度百分比。,3、三列版式(三列兼容宽度版式一列固定,双列宽度自适应),三列兼容宽度版式,一列固定,双列宽度自适应(副栏固定宽度,次栏、栏宽度自适应) 方法二:网页内容部分源代码,如下图:,3、三列版式(三列兼容宽度版式一列固定,双列宽度自适应),CSS部分源代码,如下图:,3
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 房地产企业战略合作伙伴培训
- 新课程的心得体会5篇
- 2023-2024学年黑龙江省黑河市中考英语全真模拟试题含答案
- 抗菌药物在肿瘤治疗中的应用
- 2023-2024学年河南省周口市第十八初级中学十校联考最后英语试题含答案
- 中医医院感染管理领导力发展
- 2023-2024学年河南省平顶山市宝丰县观音堂初级中学中考英语考前最后一卷含答案
- 小学850跑教学计划8篇
- 糖尿病夏季:低血糖的应对策略
- 脂肪与糖尿病:预防策略
- 全国各地的业余中继台联络频率
- 公路工程工程量清单计量规则word版
- 首发纽约苏富比2016年最新拍卖成交记录!!!
- 爱华音响系列原版PDF格式维修手册集之一
- 酒精浓度与温度换算表
- CCAA QMS审核员申请人审核表现报告 见证评价人姓名 见证评价人编号
- 水利工程表格大全(最新)
- 关于10KV电力线路的标志
- 建筑工地事故整改报告
- 部编六年级下册语文必背日积月累、课文内容练习卷
- 浅论开展多规合一工作的难点和解决办法
评论
0/150
提交评论