电子商务网站建设与网页设计（微课版）6_第1页
电子商务网站建设与网页设计（微课版）6_第2页
电子商务网站建设与网页设计（微课版）6_第3页
电子商务网站建设与网页设计（微课版）6_第4页
电子商务网站建设与网页设计（微课版）6_第5页
已阅读5页，还剩22页未读， 继续免费阅读

付费下载

下载本文档

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

文档简介

使用DIV+CSS布局网页CHAPTERSIX在网站页面设计中，网页的结构布局非常重要。上一个项目我们学习了CSS格式化排版，本项目将学习如何通过HTML语言中的DIV标签，结合CSS样式来进行网页布局。DIV布局是网页设计中主流布局方式。学会使用DIV+CSS进行不同结构的网页布局。能够使用DIV+CSS布局网站首页。学习目标Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4一、使用CSS盒子模型认识CSS盒子模型CSS盒子模型的边框、内边距和外边距一、使用CSS盒子模型1认识CSS盒子模型一、使用CSS盒子模型2CSS盒子模型的边框、内边距和外边距Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4二、标准流和div标记标准流div标记盒子在标准流中的定位二、标准流和div标记1标准流所谓标准流，是指在没有任何外部干涉时，网页中各个元素盒子的排列规则，也就是网页默认的、自然的排列布局方式。一个网页中的元素可以分为两类：块级元素：大部分HTML标记都属于块级元素，每个块级元素都占据着一个矩形的区域，并且跟同级的兄弟块依次垂直排列，左右撑满。行内元素：网页中有一部分元素属于行内元素，基本都是用于文字修饰的标记。二、标准流和div标记1标准流二、标准流和div标记2div标记二、标准流和div标记盒子在标准流中的定位方式：块级元素之间的垂直定位margin属性1嵌套盒子之间的margin属性23盒子在标准流中的定位二、标准流和div标记3盒子在标准流中的定位块级元素之间的垂直定位margin属性1二、标准流和div标记3div标记嵌套盒子之间的margin属性2Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4三、盒子的浮动和定位盒子浮动清除浮动影响和盒子定位三、盒子的浮动和定位1盒子浮动三、盒子的浮动和定位2清除浮动影响和盒子定位使用clear属性清除浮动的影响01盒子的定位02静态定位1相对定位2绝对定位3三、盒子的浮动和定位2清除浮动影响和盒子定位Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4四、使用CSS布局电子商务网站首页使用DIV布局页面结构对网页主体布局对网页底部布局组合首页布局对网页头部布局四、使用CSS布局电子商务网站首页1使用DIV布局页面结构四、使用CSS布局电子商务网站首页2对网页头部布局四、使用CSS布局电子商务网站首页3对网页主体布局四、使用CSS布局电子商务网站首页4对网页底部布局四、使用CSS布局电子商务网站首页5组合首页布局项目习题打开“素材文件\项目六\习题效果.html”，按照此网页效果设计一个“商品描述”网页，如图所示。操作提示：（1）用div标记布局出一行两列，注意要清除浮动影响。（2）

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

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

最新文档

评论

0/150

提交评论