Web前端开发必知必会 课件-中文版 lesson 9 CSS+Div固定宽度布局与3O原则.pptx

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10CSS+DIVfloat布局与混合布局LESSON9

CONTENTS01CSS+DIV(float)布局02hybridlayout混合布局03网页制作3O原则

基本float左右布局

并使用header、footer标签divclass=fullpageheadernavid=navi……/nav/headerdivclass=leftbar……/divdivclass=rightbar……/divfooter……/footer/div01

.leftbar.rightbarsectionheadernavsectionfooterdivclass=“fullpage”

半成品成品.rightbar{background-image:url(grwj/bg1.jpg);background-repeat:no-repeat; ?/*图像填充，不重复*/background-position:bottomright;?/*背景图像放在右下角*/}思考：导航背景的设置？

固定宽度的混合布局网页使用float、clear:设计主要页面框架与结构大左leftbar、大右rightbar底部footer混合使用position:小的div需要精确定位局部div叠放、透明的div02

Example1：天堂伞Rules（混用float、position设计要求）遵循3O原则整体左右float布局position布局，精确定位（右边块中的视频）

Example2:19lou-Hangzhou

Logo，bannercontentdiv使用position:relative;SidebarcopyrightDownbar使用position:relative;Innerdiv使用position:absolute;Smalldiv2Smalldiv1position:absolute;Smalldiv3Smalldiv4

Iamsondiv:mypositionisabsolute,left/right,top/bottompreciselocationIamfatherdiv: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层的使用（APdiv）页面制作3O原则（拓展）JavaScript特效应用

ThankYou地址：杭州市滨江区滨文路528号邮政编码：310053