第八章 CSS实现典型布局(上机)_第1页
第八章 CSS实现典型布局(上机)_第2页
第八章 CSS实现典型布局(上机)_第3页
第八章 CSS实现典型布局(上机)_第4页
第八章 CSS实现典型布局(上机)_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第八章上机CSS实现典型布局相关回顾1、2、3、盒子模型是什么？如果要使得元素居中需要修改哪个属性上机目标实现多行多列的复杂布局模拟实现豆瓣网首页的布局实现网页局部的布局教员讲解上机目标训练技能点margin属性position属性float属性clear属性width、height属性阶段1训练技能点margin属性float属性阶段1实现多行多列的复杂布局阶段1分析页面整体的结构可以发现，大致是四行两列的结构。各个内容区块之间的嵌套关系阶段1<body>

<divid="divContainer">

<divid="divHeader">Header</div>

<divid="divMenuBar">MenuBar</div>

<divid="divMain">

<divid="divSideBar">SideBar</div>

<divid="divContent">Content</div>

</div>

<divid="divFooter">Footer</div>

</div></body>body,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;}13阶段1？共性问题集中讲解阶段2技能要点position属性float属性clear属性阶段2模拟实现豆瓣网的小组频道首页阶段2整个页面的内容从上到下分为四块。最顶部的豆瓣网全局导航栏。全局导航栏下方的小组频道导航栏。页面的主体内容。注意它又分为两栏。页脚。它也分为左右两栏。第三块、第四块内容都要整体居中，应将两者同时包裹起来。阶段2<body>

<divid="db-global-nav"> <divid="top-nav-info"> <ahref="#">登录</a><ahref="#">注册</a> </div> <divclass="global-nav-items">其他频道的链接</div> </div>

<divid="db-nav-group"> <divclass="nav-logo"><ahref="#/">豆瓣小组</a></div> <divclass="nav-items"> <ul> <li><ahref="#">发现小组</a></li> <li><ahref="#">发现话题</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;}#db-nav-group{ width:100%;min-width:950px; margin-bottom:40px; background-color:#F0F6F3;}.nav-logo{ background- image:url(douban_logo.png); background-repeat:no-repeat; background-position:centerleft; width:145px;height:56px; float:left;margin:013px00;}.nav-items{ margin-top:15px;float:left;}.nav-search{ position:absolute;right:0;}.nav-itemsli{ float:left;margin-right:30px;display:inline;}#wraper{ width:950px;margin:0pxauto;border:1pxsolidgreen;}#article{ width:690px;float:left;border:1pxsolidred;}#aside{ float:right;width:210px;border:1pxsolidgray;}#footer{ clear:bot

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论