網(wǎng)頁布局入門教程如何用CSS進行網(wǎng)頁布局

發(fā)布時間：2016-04-27 10:54:48 作者：佚名

這篇文章主要為大家分享了網(wǎng)頁布局入門教程，如何用CSS進行網(wǎng)頁布局，介紹了絕對定位布局、混合布局及結構與表現(xiàn)原則，感興趣的小伙伴們可以參考一下

一、基礎概念

W3C標準：由萬維網(wǎng)聯(lián)盟制定的一系列標準：包括：
結構化標準語言（HTML和XML）；
表現(xiàn)標準語言（CSS）；
行為標準語言（DOM和ECMAScript）。
倡導結構，樣式，行為分離。

CSS中的定位機制：

1、標準文檔流（Normal flow）：從上到下，從左到右，輸出文檔內(nèi)容，由塊級元素（從左到右撐滿頁面，獨占一行；觸碰到頁面邊緣時，會自動換行。常見塊級元素：div、lu、li、d、dt、p……）和行級元素(能在同一行內(nèi)顯示，不會改變HTML文檔結構。常見行級元素：span、strong、img、input……)組成。
2、浮動（Floats)：
3、絕對定位（Absolute positioning）：

盒子模型：網(wǎng)頁布局的基石，有四部分組成：
邊框（border）、外邊距（margin）、內(nèi)邊距（padding）、盒子中的內(nèi)容（content）。如下圖：

盒子的尺寸=邊框+外邊距+內(nèi)邊距+盒子中的內(nèi)容尺寸

注：塊級元素和行級元素都是盒子模型。

盒子3D模型：

常見頁面布局及解決方案：

二、自動居中一列布局

關鍵詞：標準文檔流，塊級元素，margin屬性

自動居中一列布局需要設置margin左右值為auto，而且一定要設置寬度為一個定值。

auto會根據(jù)瀏覽器的寬度自動地設置兩邊的外邊距

如果想讓頁面自動居中，當設置margin屬性為auto的時候，不能再設置浮動和絕對定位屬性

代碼示例：

一列布局固定：

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.head, .main, .footer{ width:960px; margin:0 auto} /*margin屬性及具體的寬度*/
.head{ height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yilieguding.html

一列布局自適應：

XML/HTML Code復制內(nèi)容到剪貼板

<!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}
.head, .main, .footer{width:80%;margin:0 auto} /*margin屬性及定寬為百分比*/
.head{ height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/yiliezishiying.html

三、橫向兩列布局

浮動布局：CSS中規(guī)定的第二種定位機制；能夠?qū)崿F(xiàn)橫向多列布局；通過設置float屬性實現(xiàn)。

float屬性：left | right | none

特點：元素會左移，或右移，直至觸碰到容器為止。

注：設置了浮動的元素，仍舊處于文檔流中。當元素沒用設置寬度值。若設置了浮動屬性，元素的寬度隨內(nèi)容的變化而變化。當元素設置浮動屬性后，會對相鄰的元素產(chǎn)生影響，相鄰元素特指相鄰后面的元素。

清除浮動的方法：

clear屬性——常用clear：both;clear:left;或者clear:right；同時設置width：100%（或固定寬度）+overflow：hidden；

橫向兩列布局是網(wǎng)頁布局最常見的方式之一

主要應用技能：

float屬性——使縱向排列的塊級元素，橫向排列
margin屬性——設置兩列之間的間距

注：（1）當父包含塊縮成一條時，用clear：both方法清除浮動無效，它一般用于緊鄰后面的元素的清除浮動。
（2）div塊的高度一般不需要設置。

代碼示例

兩列居中固定

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<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}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px; background:#FCC; float:right}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code//Blog_demo/Codes2/liangliejuzhingguding.html

兩列居中自適應：**

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<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}
.main{ width:80%; height:600px; margin:0 auto}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px; background:#FCC; float:right}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/liangliejuzhongzishiyin.html

四、絕對定位布局

position屬性：

擁有三種定位方式：1、靜態(tài)定位 2、相對定位 3、絕對定位

可設置4個屬性值：

static（靜態(tài)定位）

relative（相對定位）——特點：相對于自身原有為止進行偏移；仍處于標準文檔流中；隨即擁有偏移屬性和Z-index屬性

absolute（絕對定位）——特點：建立以包含塊為基準的定位；完全脫離了標準文檔流；隨即擁有偏移屬性和Z-index屬性

( 1）未設置偏移量：無論是否存在已定位祖先元素，都保持在元素初始位置；脫離了標準文檔流

（2）設置偏移量

偏移參考基準：無已定位祖先元素，以<html>為偏移參考基準
有已定位祖先元素，以距離其最近的已定位祖先元素為偏移參照基準

注：當一個元素設置絕對定位，沒有設置寬度時，元素的寬度根據(jù)內(nèi)容進行調(diào)節(jié)
fixed（固定定位）

使用absolute實現(xiàn)橫向兩列布局——常用于一列固定寬度，另一列寬度自適應的情況

主要應用技能：
relative——父元素相對定位
absolute——自適應寬度元素絕對定位
注意：固定寬度列的高度>自適應寬度的列

代碼舉例：

三列自適應：

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<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}
.left{ width:20%; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 20%; background:#9CF}
.right{ height:600px; width:20%; position:absolute; top:0; right:0; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezishiyin.html

三列左右固定：

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<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}
.left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 240px; background:#9CF}
.right{ height:600px; width:240px; position:absolute; top:0; right:0; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/sanliezuoyouguding.html

五、混合布局及結構與表現(xiàn)原則

混合布局01

XML/HTML Code復制內(nèi)容到剪貼板

<!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>混合布局01</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head{ height:100px;background:#9CF}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px;background:#FCC; float:right}/*寬度設置為百分數(shù)，以實現(xiàn)自適應*/
</style>
</head>
<body>
<div class="head">head</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju01.html

混合布局02

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<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}
.head, .main, .footer{ width:960px; margin:0 auto}
.head{ height:100px;background:#9CF}
.left{ width:240px; height:600px; background:#ccc; float:left}
.right{ width:720px; height:600px;background:#FCC; float:right}/*寬度設置為固定值*/
.footer{ height:50px; background:#9F9; clear:both}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju02.html

混合布局03

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<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}
.head, .main, .footer{ width:960px; margin:0 auto}/*head main及footer設置固定寬度*/
.head{ height:100px;background:#9CF}
.left{ width:220px; height:600px; background:#ccc; float:left}
.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}/*540px+200px=740px 注意寬度值的設置*/
.footer{ height:50px; background:#9F9; clear:both}/*使用clear：both清除浮動*/
</style>
</head>
<body>
<div class="head">head</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>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju03.html

混合布局04

XML/HTML Code復制內(nèi)容到剪貼板

<html>
<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}
.main{ width:960px; margin:0 auto}/*footer和main未設置寬度*/
.head{ height:100px;background:#9CF}
.left{ width:220px; height:600px; background:#ccc; float:left}
.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}/*540px+200px=740px 注意寬度值的設置*/
.footer{ height:50px; background:#9F9; clear:both}/*使用clear：both清除浮動*/
</style>
</head>
<body>
<div class="head">head</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>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju04.html

混合布局05（自適應）

XML/HTML Code復制內(nèi)容到剪貼板

<html">
<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}
.head{ height:100px;background:#9CF}
.left{ width:20%; height:600px; background:#ccc; float:left}
.main{margin:0 30%;height:600px; background:#9CC }
.right{ width:20%; height:600px;background:#FCC; float:right}/*寬度均設為百分比*/
.footer{ height:50px; background:#9F9; clear:both}
</style>
</head>
<body>
<div class="head">head</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

DEMO：http://Lovejulyer.github.io/Source_Code/Blog_demo/Codes2/hunhebuju05.html

在網(wǎng)頁制作中，面對設計圖，網(wǎng)頁制作人員一般要遵循的原則是：先考慮設計圖中的文字內(nèi)容和內(nèi)容模塊之間的關系，重點放在編寫html結構和語義化，然后考慮布局和變現(xiàn)形式。
倡導結構，樣式，行為分離。舉例：網(wǎng)頁換膚——相同HTML結構，不同CSS樣式。

Tag：網(wǎng)頁布局 css

css文件中的樣式類被覆蓋，js文件中的變量未定義問題
這篇文章主要介紹了css文件中的樣式類被覆蓋，js文件中的變量未定義問題的相關資料,需要的朋友可以參考下
2016-04-27
CSS實現(xiàn)文字環(huán)繞圖片效果
這篇文章主要為大家詳細介紹了CSS文字環(huán)繞圖片遇到的問題及解決方法，感興趣的小伙伴們可以參考一下
2016-04-27
CSS實現(xiàn)水平居中的4種思路簡要概述
水平居中是經(jīng)常遇到的問題?？此品椒ㄝ^多，條條大路通羅馬。但系統(tǒng)梳理下，其實都圍繞著幾個思路展開。本文將介紹關于水平居中的4種思路，感興趣的朋友參考下吧
2016-04-27
橫向兩列布局（左列固定，右列自適應）的4種CSS實現(xiàn)方式
這篇文章主要介紹了橫向兩列布局，即左列固定，右列自適應的4種CSS實現(xiàn)方式，感興趣的小伙伴們可以參考一下
2016-04-27
css文字環(huán)繞圖片—遇到的問題及快速解決方法
下面小編就為大家?guī)硪黄猚ss文字環(huán)繞圖片--遇到的問題及快速解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
2016-04-26
CSS3表單input輸入框聚焦動畫特效源碼 24種
本特效是一組效果超酷的表單input輸入框聚焦CSS3動畫特效效果的代碼。這組特效共24種不同的聚焦動畫效果，歡迎下載使用
2016-04-26
CSS3徑向漸變之大魚吃小魚之孤單的大魚
喜歡釣魚還沒那個技術釣到魚，下面小編畫條大魚安慰我一下柔弱的心靈。感興趣的朋友參考下吧
2016-04-26
CSS3實現(xiàn)超酷的黑貓警長首頁
這篇文章主要為大家介紹了CSS3實現(xiàn)超酷的黑貓警長首頁的相關代碼，效果酷炫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-26
CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設計
這篇文章主要介紹了CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設計的相關資料，感興趣的小伙伴們可以參考一下
2016-04-26
css 各瀏覽器下的背景色漸變【代碼】
下面小編就為大家?guī)硪黄猚ss 各瀏覽器下的背景色漸變【代碼】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
2016-04-27

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

網(wǎng)頁布局入門教程如何用CSS進行網(wǎng)頁布局

相關文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

網(wǎng)頁布局入門教程 如何用CSS進行網(wǎng)頁布局

相關文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容

網(wǎng)頁布局入門教程如何用CSS進行網(wǎng)頁布局