08CSS网页布局基础、网页布局案例
时间：2023-09-06 18:54:02 | 来源：网站运营
时间：2023-09-06 18:54:02 来源：网站运营
08CSS网页布局基础、网页布局案例：CSS网页布局基础：
经典的行布局：
基础的行布局
行布局自适应
行布局自适应限制最大宽
行布局垂直水平居中
行布局固定宽
行布局某部位自适应
行布局导航随屏幕滚动
上下为0，左右居中——margin: 0 auto;
页面自适应——width: 100%;
垂直、水平都居中——{
position: absolute;
left: 50%;
right: 50%
margin-left: -50%width;
margin-top: -50%height;
}
---------------------------------------------------
经典的列布局：
两列布局固定
两届布局自适应
三列布局固定
三届布局自适应
---------------------------------------------------
混合布局：
混合布局固定
混合布局自适应
---------------------------------------------------
圣杯布局：
布局要求：
三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中优先展示渲染
允许任意栏的高度最高
用最简单的CSS、最少的HACK语句
流程方式：middle部分首先要放在container的最前部分
然后是left、right
<div class="container">
<div>中间</div>
<div>左侧</div>
<div>右侧</div>
</div>
---------------------------------------------------
双飞翼布局：
去掉相对布局，只需要浮动和负边距
流程方式：main要放在最前边，其次是sub、extra
<div class="container">
<div>中间</div>
</div>
<div>左侧</div>
<div>右侧</div>
———————————————————————————————————
CSS网页布局案例：
HTML基础（div、il、li、dl、dt、dd、img...）
CSS基础（字体、背景、图片...）
CS定位、浮动（position、盒子模型、float）
在线咨询
