CSS進行簡單網頁布局（基礎知識）

CSS頁面布局

制作布局

一列布局

例子：

<head>

body{ margin:0;padding:0}

.top{height:100px;background:blue}

.main{width:800px;height:300px;background:#ccc;margin:0 auto}

.foot{width:800px;height:100px;background:#900;margin:0 auto}

div{text-align:center}

</style>

</head>

<body>

</body>

怎樣去獲得螢幕的自适應寬度、高度

例子：

<head>

body{margin:0;padding:0;font-szie:30px}

div{text-align:center;font-weight:bold}

.main,.footer{width:960px;margin:0 auto}

.head{width:100%;height:100px;background:#ccc}

.main{height:600px;background:#fcc}

.footer{height:50px;background:#9cf}

</style>

</head>

<body>

<div class="footer">footer</div>

</body>

兩列布局

例子：自适應

<head>

<style>

body{margin:0;padding:0}

.left{width:20%;height:500px;float:left;background:#ccc}

.right{width:80%;height:500px;float:right;background:#ddd}

div{text-align:center}

</style>

</head>

<body>

<div class="right">right</div>

</body>

例子：

<head>

<style>

body{margin:0;padding:0}

.main{width:800px;margin:0 auto;background:blue}

.left{width:20%;height:518px;float:left;background:#ccc}

.right{width:80%;height:500px;float:right;background:#ddd}

div{text-align:center}

</style>

</head>

<body>

<div class="right">right</div>

</body>

例子：

<head>

body{margin:10;padding:5;font-size:30px;font-weight:bold}

div{text-align:center;line-height:50px}

.main{width:960px;height:200px;margin:0 auto}

.left{width:300px;height:600px;background:#ccc;float:left}

.right{width:600px;height:600px;background:#FCC;float:right}

</style>

</head>

<body>

<div class="right">right</div>

</body>

例子：三列布局

<head>

body{margin:0;padding:0}

.left{width:33.33%;height:500px;float:left;background:#ccc}

.middle{width:33.33%;height:500px;float:left;background:#999}

.right{width:33.33%;height:500px;float:right;background:#ddd}

</style>

</head>

<body>

<div class="middle">middle</div>

<div class="right">right</div>

</body>

需要的是自适應螢幕的高度及寬度

例子：

<head>

body{margin:0;padding:0}

.left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0}

.middle{height:500px;background:#999;margin:0 310px 0 210px}

.right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0}

</style>

</head>

<body>

<div class="middle">midwwwgwewghwefgwf8ywge8w過完戶發改委發個好玩感悟if各位if誤會誤會共分為複古味顧問覅故事覅覆寫物if物管費公司公司附屬國或覅㐎和覅我和我以複合物if文化覅各位以符号位u和覅為hi烏爾禾為維護華盛頓覅剺和覅為會務兒無就護衛富五為劃分委會UI符号位複合物而UI毫無hi符号位複合物而UI我一個人完全瑞發改委顧問UI各位㐎格爾發改委以發改委與規範個以烏爾國五UIWWIuefgwuifghgcb dle</div>

<div class="right">right300px</div>

</body>

混合布局

例子：混合布局

<head>

body{margin:0;padding:0}

.top{height:100px;background:blue}

.main{width:800px;height:600px;background:#ccc;margin:0 auto}

.left{width:200px;height:600px;background:yellow;float:left}

.right{width:600px;heigth:600px;background:#369;float:right}

.foot{width:800px;height:100px;background:#900;margin:0 auto}

div{text-align:center}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

例子：

<head>

body{margin:0;padding:0}

.top{height:100px;background:blue}

.main{width:800px;height:600px;background:#ccc;margin:0 auto}

.left{width:200px;height:600px;background:yellow;float:left}

.right{width:600px;heigth:600px;backgorund:#369;float:right}

.sub_l{width:400px;height:600px;background:green;float:left}

.sub_r{width:200px;height:600px;bakcground:#09F;float:right}

.foot{width:800px;height:100px;background:#900;margin:0 auto}

div{text-align:center}

</style>

</head>

<body>

</div>

</body>

CSS進行簡單網頁布局（基礎知識）

例子：

<head>

body{margin:0;padding:0}

.top{width:800px;height:100px;background:blue;margin:0 auto}

.main{width:800px;height:600px;background:#ccc;margin:0 auto}

.left{width:200px;height:600px;background:yellow;float:left}

.right{width:600px;heigth:600px;backgorund:#369;float:right}

.foot{width:800px;height:100px;background:#900;margin:0 auto}

div{text-align:center}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

DIV+CSS進行網頁布局

流動布局

浮動布局

絕對定位布局

标準文檔流

盒子模型

Float屬性

Position屬性

自動居中一列布局案例------盒子模型的使用方法

浮動布局模型--------float屬性-----解決浮動影響的方法

絕對定位布局案例

絕對定位實作橫向兩列或多列布局布局

W3C标準

由網際網路聯盟指定的一系列标準

結構化标準語言（html和xml）

表現标準語言（CSS）

行為标準語言（DOM和ECMAScript）倡導結構，樣式，行為分離

CSS中的定位機制

CSS中，存在3種的定位機制：

标準文檔流（normal flow）

浮動（floats）

絕對定位（Absolute positioning）

标準文檔流（normal flow）

特點：

從上到下，從左到右，輸出文檔内容

由塊級元素和行級元素組成

常見的塊級元素：div ul li dl dt p

行級元素：span strong img input

特點：能在同一行内顯示，不會改變html文檔結構

塊級元素，行級元素都是盒子模型

盒子模型-----網頁布局的基石

CSS進行簡單網頁布局（基礎知識）

優先級，就近原則，

行内樣式，内部樣式，外部樣式

Img{margin:10px 18px;border:1px solid #b1adad;}

</style>

CSS進行簡單網頁布局（基礎知識）

自動居中,一列布局 ----------技能點：标準文檔樓，塊級元素，margin屬性

*{margin:0;padding:0;}

#wrap{width:770px;margin:0 auto;position:flxed;}

#header{width:100%;height:200px;border:1px solid red;}

#mainbody{width:100%;height:200px;border:1px;solid blue;}

#footer{width:100%;height:200px;border:1px solid green;}

</style>

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

Auto原理：（浏覽器的寬度-外包含層的寬度）/2=外邊框

浮動布局--------橫向多列浮動

Float屬性

Left左浮動，right有浮動，none不浮動

或左右移動直到觸碰到容器為止

浮動的元素，任然處于文檔流中，會對周圍元素有影響

當元素沒有設定寬度值，而設定了浮動屬性，元素的寬度随内容的變化而變化

若它設定的浮動，則僅臨着它右側的元素有影響

清楚浮動的常用方法

Clear屬性---- 常用的clear：both

Clear：left；或者clear：right 如：p{clear:both;}

同時設定p{width:100%+overflow:hiddin;}

橫向兩列布局---主要技能，float屬性，使縱向排列的塊級元素，橫向排列

Margin屬性，設定兩列之間的間距

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無标題文檔</title>

*{margin:0;padding:0;}

#wrap{background:#00C;margin:0 auto;width:960px;}

#header{background:#F30;width:100%;}

#mainbody{background:#FC0;width:100%;overflow:hidden;}

.left{width:800px;height:200px;background:#000;float:left;} //margin-right:20px;

.right{width:140px;height:500px;background:#690;float:right;}

#footer{background:#639;width:100%;}

</style>

</head>

<body>

<div id="header">header</div>

</div>

<div id="footer">footer</div>

</div>

</body>

</html>

絕對定位布局

通過Position屬性實作

Css中規定的第三種定位機制

能夠實作橫向多列布局及較為複雜的定位

用有三種定位：1、靜态定位，2、相對定位，3、絕對定位

可設定4個屬性值：

Static(靜态定位)

Relative(相對定位)

Absolute（絕對定位）

Fixed(固定定位)

Relative(相對定位)

相對于自身原有位置進行偏移

仍處于标準文檔流中

随即擁有偏移屬性和z-index屬性

Absolute（絕對定位）

建立了以包含塊為基準的定位

完全脫離了标準文檔流

随即擁有偏移和z-index屬性

無論是否存在定位祖先元素，都保持在元素初始位置，脫離了标準文檔流

設定偏移量

偏移參照基準：

無已定位祖先元素，以<html>為偏移參照基準

有已定位祖先元素，以距離其最近的已定位的祖先元素為偏移參照基準

橫向兩列布局，常用于一列固定寬度，另一列寬度自适應的情況

Relative---父元素相對定位

Absolute----自适應寬度元素的絕對定位

注意：固定寬度列的高度>自适應寬度的列

<head>

<!--

.box1{background:red;height:300px;position:relative;top:50px;left:50px;}

.box2{background:green;height:300px;}

.box3{background:blue;height:300px;}

</style>

-->

.box1{background:red;height:300px;}

.box2{background:green;height:300px;position:absolute;left:50px;top:20px;}

.box3{background:blue;height:300px;}

.box{height:60px;background:#FC0;position:relative;}

.wrap{height:400px;background:#999;position:absolute;}

</style>

</head>

<body>

<!--

-->

</div>

</div>

</body>

CSS進行簡單網頁布局（基礎知識）

html結構，css表現，JavaScript行為

結構表現分離

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微軟雅黑", "宋體", "Tahoma"}

body{ padding-top:50px; line-height:20px}

.userPic{padding:5px; border:1px #ccc solid}

.demo01, .demo02{ margin-bottom:20px}

p{ text-indent:2em}

.demo01{width:600px; overflow:hidden}

.demo01 .left{ width:100px; float:left}

.demo01 .left .userPic{margin-left:20px}

.demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}

.demo01 .right h6{ margin-bottom:5px}

.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}

.demo02{width:600px; overflow:hidden}

.demo02 .userPic{float:left; margin-left:20px}

.demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}

.demo02 .right h6{ margin-bottom:5px}

.demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px}

.demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px}

.demo03 h6{ margin-bottom:5px}

.demo03 .dialog p{text-indent: 2em; line-height:20px}

.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}

.demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;}

</style>

</head>

<body>

</div>

<h6>櫻桃小丸子</h6>

<p>式準許營運的遠端教育公共服務體系，為遍布全國的學員提供學曆(專升本，高起專)和非學曆教育咨詢、報名</p>

</div>

<h6>櫻桃小丸子</h6>

<p>式準許營運的遠端教育公共服務體系，為遍布全國的學員提供學曆(專升本，高起專)和非學曆教育咨詢、報名、學習輔導、課程考試</p>

</div>

<h5>櫻桃小丸子</h5>

<p>部高等教立項體系，為遍布全國的學員提供學曆(專升本，高起專)和非學曆教育咨詢、報名、學習輔導、課程</p>

</div>

</body>

</html>

練習

初級

CSS進行簡單網頁布局（基礎知識）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無标題文檔</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{margin: 0;padding: 0;font:14px/1.5normal,"Arial", "sans-serif", "微軟雅黑", "宋體", "Tahoma";color:#666}

ul,ol{list-style:none}

.demo01{width:600px;position:relative}

.demo01 .left{width:100px;;float:left}

.demo01 .left img{margin-left:20px}

.demo01 .right{width:458px;padding:20px;float:right;background:#9CF;border:1px solid #ccc}

.demo01 .right p{font-size:12px;line-height:25px;}

.demo01 span{position:absolute;right:20px;top:18px;font-size:12px}

</style>

</head>

<body>

</div>

<h6>櫻桃小丸子</h6>

<p>2005年4月正式準許營運的遠端教育公共服務體系，時學習支。</p>

</div>

</body>

</html>

中級

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無标題文檔</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{margin: 0;padding: 0;font:14px/1.5normal,"Arial", "sans-serif", "微軟雅黑", "宋體", "Tahoma";color:#666}

ul,ol{list-style:none}

.demo01{width:600px;position:relative;overflow:hidden}

.demo01 img{float:left}

.demo01 .right{width:458px;padding:20px;float:right;background:#9CF;border:1px solid #ccc}

.demo01 .right p{font-size:12px;line-height:25px;}

.demo01 span{position:absolute;right:20px;top:18px;font-size:12px}

</style>

</head>

<body>

<h6>櫻桃小丸子</h6>

<p>奧鵬教育是由教育部高等教育司，為遍布全國的學員提供學曆(專升本，高起專)和非學曆教育咨詢、報名、學習輔導。</p>

</div>

</body>

</html>

進階

内容與子產品之間的關系

CSS進行簡單網頁布局（基礎知識）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無标題文檔</title>

</head>

<style>

.demo01{width:458px;padding:20px;float:left;background:#9CF;border:1px solid #ccc;margin-left:100px}

.demo01 img{float:left;margin:-20px 0 0 -100px;}

.demo01 p{font-size:12px;line-height:25px;}

.demo01 span{position:absolute;right:20px;top:18px;font-size:12px}

</style>

<body>

<p>務體系，為遍布全國的學員提供學曆(專升本，高起專)和非學曆教育咨詢、報名、學習輔導、課程考試、交費等7X24小時學習支援服務400-810-6736。</p>

</div>

</body>

</html>

Text-indent:585px 文本縮進

CSS進行簡單網頁布局（基礎知識）

繼續閱讀

趕工心得（一）

兩種清除浮動的方法

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

如何成為一名.net 工程師?

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題