html盒子模型图文混排新闻类网页,HTML5与CSS3 Web前端开发技术第15章 CSS3的盒模型及网页布局.ppt..._专心学习的娃的博客

15.3 CSS的网页布局 示例15-20是一个典型的嵌套2列布局，用到了盒布局中的弹性布局属性-webkit-box-flex。 15.3 CSS的网页布局 15.3.3 使用CSS3盒布局的三列布局 三列布局可以使用float属性实现，对3个盒子(列)对象分别设定位置和宽度，再设置浮动属性即可。 #left{ height: 400px; width: 120px; float: left; } #right{ background:#FFC; height: 400px; width: 100px; float: right; } #main{ background: #D0FFFF; height: 400px; margin-left:120px; } 15.3 CSS的网页布局 15.3.3 使用CSS3盒布局的三列布局 1．简单的三列布局 示例15-21是一个使用盒布局实现的三列布局。左右两列宽度固定，中间列自适应。 15.3 CSS的网页布局 嵌套的三列布局 前面布局采用的策略是将盒子(div块)从上到下、从左到右依次排列。 15.3 CSS的网页布局 15.4 DIV+CSS布局的应用 在设计网页之前，首先对网页布局有一个总体思路，然后就可以用盒子对网页进行大致分块设定。 15.4.1 图文混排的实现 1．用DIV+CSS布局方式实现图文混排效果 15.4 DIV+CSS布局的应用 1．用DIV+CSS布局方式实现图文混排效果 15.4 DIV+CSS布局的应用 15.4 DIV+CSS布局的应用 15.4.1 图文混排的实现 2．对示例15-23的改进 15.4 DIV+CSS布局的应用 15.4.2 制作二级导航菜单 导航菜单通常分为横向导航菜单和纵向导航菜单。DIV+CSS布局中多通过控制列表样式制作导航菜单，主要用到15.3 CSS的网页布局 示例15-20是一个典型的嵌套2列布局，用到了盒布局中的弹