如何用CSS進行網頁佈局-imooc-【更新完畢】

時間 2019-12-06

標籤如何 css 進行網頁佈局 imooc 更新完畢欄目 CSS 简体版

原文原文鏈接

第一章內容簡介

1-1 內容簡介

網頁能夠自適應寬度
網頁的長度理論上能夠無限延長css

頁面爲：html

頭部編程
主體部分佈局
底部學習

分欄又稱爲分列：字體

一列布局ui
二列布局spa
三列布局設計
混合佈局（用的最多）code

佈局經過浮動和定位來完成(實現ui界面效果）

第2章用HTML+CSS實現最簡單的網頁佈局效果：一列布局

2-1 一列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
/*清楚默認樣式，設置字體大小爲30px*/
body{ margin:0; padding:0; font-size:30px} 
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任務1】}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC;margin:0 auto;}
.footer{ height:50px; background:#9CF;margin:0 auto;}
</style>
</head>

<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

第3章自適應寬度及固定寬度的二列布局的實現

3-1 二列布局

float和position：absolute能夠使元素脫離文檔流。

CSS中脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。

須要注意的是，使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。

而對於使用absolute positioning脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc;float:left; 【任務1】}}/*左浮動樣式*/
.right{ width:660px; height:600px; background:#FCC;float:right; 【任務2】}/*右浮動樣式*/
</style>
</head>

<body>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

第4章用position定位方法實現自適應效果的三列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0px 310px 0px 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; top:0; right:0; background:#FCC;}
</style>
</head>

<body>
    
    <div class="left">left</div>
    <div class="main">設計首頁的第一步是設計版面佈局。就象傳統的報刊雜誌編輯同樣，咱們將網頁看做一張報紙，一本雜誌來進行排版佈局。 雖然動態網頁技術的發展使得咱們開始趨向於學習場景編劇，可是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你能夠領會要點，觸類旁通。</div>
    <div class="right">right</div>
</body>
</html>

第5章用HTML+CSS實現複雜結構的混合佈局

5.1 混合佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合佈局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;【任務1】}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;【任務2】}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;【任務3】}
.footer{ height:50px; background:#9F9; clear:both;【任務4】}
</style>
</head>

<body>
<div class="top">
    <div class="head">head</div>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
        <div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>
</html>

5.3 挑戰編程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合佈局編程挑戰</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;height:100px;background:#ccc;}
.main{background:#f00;height:500px;}
.left{ width:200px;height:500px;position:absolute;left:0;top:100px;background:blue;}
.right{background:#9C9;height:500px;margin-left:210px;}
.foot{width:100%;height:50px;background:#F63;clear:both;}
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>
</html>