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层的使