Web前端-HeadFirst笔记-CH11-两栏实现方案&CSS表格
来源:互联网 发布:js 时间控件选择星期 编辑:程序博客网 时间:2024/05/21 06:41
两栏实现方案:
- 流体布局:float,边栏扩展,主内容固定(顺序正确);边栏固定,主内容扩展(设计流畅,但主内容顺序位于边栏之下)。用#footer{clear:方位;}解决覆盖页脚问题,使用clear的块元素会下移直到旁边没有块元素。
- 冻结布局 :width:固定值;/*固定大小的div包含整个页面*/(无法创建两个长度相同的两个列,块底色长度不能延伸到页脚上方)内容宽度固定。
- 凝胶布局 :在冻结布局之上增加 #allcontent{margin-left:auto; margin-right:auto;}/*内容居中*/(不会扩展填充满整个页面)内容宽度固定,外边距会随浏览器窗口伸缩。
- 绝对位置,position:absolute;/*将边栏设置为固定位置,固定宽度,主内容区设置margin*/(存在覆盖页脚问题。)
- CSS表格显示:表格中只放置块元素,表格会自动扩展来适应单元格宽度和高度。并不是建立布局的最佳工具。需要建立多栏,且内容栏均匀时适用。
CSS表格使用语法
HTML:<div id="tableContainer">
<div id="tableRow">
<div id="">块元素自动划分为列元素</div>
<div id="">块元素自动划分为列元素</div>
</div>
</div>
CSS:
div#tableContainer{display:table;border-space:10px;}/*border-space不会与相邻块元素的垂直外边距折叠*/
div#tableRow{display:table-row;}
#main{diapaly:table-cell;vertical-align:top;/*删除margin设置*/}
#sidebar{dispaly:table-cell;vertical-align;/*确保单元格的内容相对于单元格的上边对齐,其他垂直对齐方式有:middle,bottom*//*删除margin设置*/}
CSS布局工具箱的策略:
HTML为内容建立结构,CSS处理布局。
CSS表格与HTML表格:
同:都是在HTML中创建一种结构,能够映射到表格的行和列。异:CSS表格:创建某种布局的方法。
HTML表格:建立数据的结构。
tips:对于页眉的固定宽度的图像无法适应浏览器窗口缩放:
①分割图像得到多个图像②html引用多个分割后的图象时,使用id指定,以便在CSS中选择
③为右侧#image设置float:right;
阅读全文
0 0
- Web前端-HeadFirst笔记-CH11-两栏实现方案&CSS表格
- Web前端-HeadFirst-笔记-Ch11-三布局
- Web前端-HeadFirst笔记-CH11-定位
- Web前端-HeadFirst-笔记-Ch11-流,float,分栏
- Web前端-HeadFirst-笔记-Ch13-表格与列表
- Web前端-HeadFirst-笔记-Ch12-h5的视频实现
- Web前端-HeadFirst-CH7-CSS入门
- Web前端-HeadFirst-笔记-图片-height width
- Web前端-HeadFirst-笔记-html规范
- Web前端-HeadFirst笔记-CH9 盒模型
- Web前端-HeadFirst-笔记-CH10-子孙选择器
- Web前端-HeadFirst-笔记-Ch14-表单
- Web前端-HeadFirst笔记-CH9-多个样式表-media
- Web前端-HeadFirst笔记-CH9-Class与id
- Web前端-HeadFirst笔记-CH10 span div 伪类
- Web前端-HeadFirst-笔记-Ch10-层叠与特定性计算
- Web前端-HeadFirst-笔记-CH10-简写vs长形式
- Web前端-HeadFirst笔记-Ch12-HTML5新标记
- java线程总结
- ODPS_MR
- HibernateDaoSupport类的使用
- Github之初探
- 开源漏洞检测工具
- Web前端-HeadFirst笔记-CH11-两栏实现方案&CSS表格
- linux下隐藏输入密码
- sql语句中like的用法详细解析
- LightOJ
- 树莓派修改静态IP(亲测可用)
- android系统架构图及各层介绍
- Linux-C语言编程-Day-1
- VS2015静态库的使用(下)
- 课程期末作业:《算法概论》课后8.16题的证明