Web前端開發必知必會 課件-中文版 lesson 9 CSS+Div固定寬度布局與3O原則

地址：杭州市濱江區濱文路528號郵政編碼：3100532024/4/12CSS+DIVfloat布局與混合布局LESSON9CONTENTS01CSS+DIV(float)布局02hybridlayout混合布局03網頁制作3O原則基本float左右布局

并使用header、footer標簽<divclass="fullpage"><header>

<navid="navi">……</nav>

</header><divclass="leftbar">……</div><divclass="rightbar">……</div>

<footer>……</footer></div>01.leftbar.rightbar<section><header><nav><section><footer><divclass=“fullpage”>半成品成品.rightbar{background-image:url(grwj/bg1.jpg);background-repeat:no-repeat;

/*圖像填充，不重復*/

background-position:bottomright;

/*背景圖像放在右下角*/}思考：導航背景的設置？固定寬度的混合布局網頁使用float、clear:設計主要頁面框架與結構大左leftbar、大右rightbar底部footer混合使用position:小的div需要精確定位局部div疊放、透明的div02Example1：天堂傘Rules（混用float、position設計要求）

遵循3O原則整體左右float布局position布局，精確定位（右邊塊中的視頻）Example2:19lou-HangzhouLogo，bannercontentdiv使用position:relative;SidebarcopyrightDownbar使用position:relative;Innerdiv使用position:absolute;Smalldiv2Smalldiv1position:absolute;Smalldiv3Smalldiv4Iamsondiv:mypositionisabsolute,left/right,top/bottom

preciselocationIamfatherdiv:

mypositionisrelative(parent)

position:relative;(child)position:absolute;Lab1：positionlayout（練一練）

Lab2：hybridlayout（練一練）

網頁設計3O原則設計原則（3O原則）全局Overall->局部part外Outside->內inner粗Outline->細detail03布局頁面成品（無特效）JavaScript特效代碼的借鑒步驟第一步：所參考的代碼正常能用；第二步：把自己的圖片放進去試試特效；第三步：前面兩步都正常后，再移到自己的頁面中Summary

小結Boxmodel盒子模型（margin與padding）CSS

+DIV布局方法ID的作用基本布局結構（左右結構、左中右結構）Float屬性與布局關系Position屬性與布局關系Layers層的使