08CSS網(wǎng)頁布局基礎(chǔ)、網(wǎng)頁布局案例
時間：2023-09-06 18:54:02 | 來源：網(wǎng)站運營
時間：2023-09-06 18:54:02 來源：網(wǎng)站運營
08CSS網(wǎng)頁布局基礎(chǔ)、網(wǎng)頁布局案例：CSS網(wǎng)頁布局基礎(chǔ)：
經(jīng)典的行布局：
基礎(chǔ)的行布局
行布局自適應
行布局自適應限制最大寬
行布局垂直水平居中
行布局固定寬
行布局某部位自適應
行布局導航隨屏幕滾動
上下為0，左右居中——margin: 0 auto;
頁面自適應——width: 100%;
垂直、水平都居中——{
position: absolute;
left: 50%;
right: 50%
margin-left: -50%width;
margin-top: -50%height;
}
---------------------------------------------------
經(jīng)典的列布局：
兩列布局固定
兩屆布局自適應
三列布局固定
三屆布局自適應
---------------------------------------------------
混合布局：
混合布局固定
混合布局自適應
---------------------------------------------------
圣杯布局：
布局要求：
三列布局，中間寬度自適應，兩邊定寬
中間欄要在瀏覽器中優(yōu)先展示渲染
允許任意欄的高度最高
用最簡單的CSS、最少的HACK語句
流程方式：middle部分首先要放在container的最前部分
然后是left、right
<div class="container">
<div>中間</div>
<div>左側(cè)</div>
<div>右側(cè)</div>
</div>
---------------------------------------------------
雙飛翼布局：
去掉相對布局，只需要浮動和負邊距
流程方式：main要放在最前邊，其次是sub、extra
<div class="container">
<div>中間</div>
</div>
<div>左側(cè)</div>
<div>右側(cè)</div>
———————————————————————————————————
CSS網(wǎng)頁布局案例：
HTML基礎(chǔ)（div、il、li、dl、dt、dd、img...）
CSS基礎(chǔ)（字體、背景、圖片...）
CS定位、浮動（position、盒子模型、float）
在線咨詢