《CSS网页布局》PPT课件_第1页
《CSS网页布局》PPT课件_第2页
《CSS网页布局》PPT课件_第3页
《CSS网页布局》PPT课件_第4页
《CSS网页布局》PPT课件_第5页
已阅读5页,还剩78页未读 继续免费阅读

下载本文档

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

文档简介

1、CSS网页布局,CSS与表格,表格布局会带来什么问题?CSS排版比表格排版有什么优势?CSS页面布局能给我们的网页设计带来什么好处?表布局的问题,把格式数据变成你的容量。重新设计现有的网站和内容是费力的。很难保持整个网站的视觉一致性。它降低了对残疾人、手机和PDA观众的亲和力。CSS布局的优点,内容和形式的分离,更容易的网站修改,更友好的搜索引擎,CSS布局的基本思想,结构化标记:你写的就是你想的,你想的就是你写的。CSS控制HTML页面,内联,内联,链接,导入,内联,直接应用style=,内联到HTML标签,在它们之间编写CSS代码并声明它们,1 2 3 4 5无标题文档6 7,11 12

2、13 14 15全国各地的CSS爱好者聚集在这里,如果他们不来,就出去。我们的口号是:16“分享你自己的快乐和痛苦,分享你自己的经历和经验,分享你自己的材料和资源。”如果你愿意,加入我们。18.19.链接是最常用和最实用的方式。只要加上3。4.5无标题文档6。7.8.9.全国各地的10个CSS粉丝聚集在这里。如果你不来,就出去。我们的口号是:11“分享你自己的快乐和痛苦,分享你自己的经历和经验,分享你自己的材料和资源。”如果你愿意,加入我们。13.style.css的内容、导入方法和链接方法是相似的。当超文本标记语言被初始化时,它将被导入到超文本标记语言文件中,并成为文件的一部分。四种样式的优

3、先级,低,高,内嵌模式,内嵌模式,链接模式,导入模式,CSS选择器,标记选择器标识选择器类选择器,标记选择器,标识选择器,类选择器,盒子模型,块元素和内嵌元素,浮点,浮点,清除浮点,清除浮点。Clear clear 33330,add:Step 1:总体布局和常见的CSS定义,示例网页的HTML代码,step 2:布局徽标栏,HTML代码,step 2:布局导航栏导航,HTML代码,step 3:布局导航栏导航,CSS代码,Step 3:布局导航栏导航和CSS代码,Step 4:布局横幅和HTML代码,Step 4:布局横幅和CSS代码,Step 5:布局内容栏和HTML代码,Step 5:布

4、局,第6步布局页脚条,HTML代码,第6步布局页脚条,CSS代码,第7步布局内容条左,HTML代码,第7步布局内容条左,CSS代码,第7步布局内容条左,CSS代码,第7步布局内容条左,效果如下,HTML代码(下半部分多一张图片),第7步:布局内容条左侧,预览效果(右半部分有空白, 图片不在左边),步骤7:布局内容栏的左侧,CSS代码,步骤8:布局内容栏的右侧,CSS结合表格,步骤8:布局内容栏的右侧,HTML代码(红色标题),CSS代码(红色标题),HTML代码(第一行),CSS代码(第一行),HTML代码(QQ号),内容栏的右侧,CSS代码(QQ号),第八步布局内容栏的右侧,HTML代码(最后一句), 第八步布局右侧内容栏,CSS代码(最后一句),CSS页面布局示例,构建站点结构分析和框架切割效

温馨提示

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

评论

0/150

提交评论