第八章 CSS实现典型布局(上机).pptVIP

*题目1：P57第一题题目2：P270练习1题目3：p270联系2第八章上机CSS实现典型布局相关回顾1、2、3、盒子模型是什么？如果要使得元素居中需要修改哪个属性上机目标实现多行多列的复杂布局模拟实现豆瓣网首页的布局实现网页局部的布局教员讲解上机目标训练技能点margin属性position属性float属性clear属性width、height属性阶段1训练技能点margin属性float属性阶段1实现多行多列的复杂布局阶段1分析页面整体的结构可以发现，大致是四行两列的结构。各个内容区块之间的嵌套关系阶段1body divid=divContainer divid=divHeaderHeader/div divid=divMenuBarMenuBar/div divid=divMain divid=divSideBarSideBar/div divid=divContentContent/div /div divid=divFooterFooter/div /div/bodybody,div{ margin:0x; padding:0px; font-size:1em;}#divContainer{ width:960px; margin:0pxauto; background-color:#E9EEF2;}#divHeader{ width:940px;height:60px; margin:5pxauto; background-color:#abcdef; }#divMenuBar{ width:940px;height:30px; margin:5pxauto; background-color:#fedcba; }#divMain{ width:940px; margin:0pxauto;}#divFooter{ width:940px; margin:5pxauto; background-color:#abcabc;}#divSideBar{ border:1pxdashedblue; width:280px; float:left;}#divContent{ border:1pxdashedgreen; margin-left:300px;}*阶段1？共性问题集中讲解阶段2技能要点position属性float属性clear属性阶段2模拟实现豆瓣网的小组频道首页阶段2整个页面的内容从上到下分为四块。最顶部的豆瓣网全局导航栏。全局导航栏下方的小组频道导航栏。页面的主体内容。注意它又分为两栏。页脚。它也分为左右两栏。第三块、第四块内容都要整体居中，应将两者同时包裹起来。阶段2body divid=db-global-nav divid=top-nav-info ahref=#登录/aahref=#注册/a /div divclass=global-nav-items其他频道的链接/div /div divid=db-nav-group divclass=nav-logoahref=#/豆瓣小组/a/div divclass=nav-items ul liahref=#发现小组/a/li liahref=#发现话题/a/li /ul /div divclass=nav-search 这里有一个搜索表单 /div /div/body#db-global-nav { }#top-nav-info { }.global-nav-items { }#db-nav-group { }.nav-logo { }.nav-items { }.nav-search { }#wraper { }#article { }#aside { }#footer { }#db-global-nav{ background-color:#545652; color:#D5D5D5; height:28px;width:100%; min-width:950px;}#top-nav-info{ float:right;margin:012px00; line-height:28px；}.global-nav-items{ color:#D5D5D5;}#d