2022年电子商务网站建设与网页设计6.pptxVIP

2022年电子商务网站建设与网页设计6精选完整版 作者 : 眼猿(笔名)2022年电子商务网站建设与网页设计6精选完整版 作者 : 眼猿(笔名)学习目标学会使用DIV+CSS进行不同结构的网页布局。能够使用DIV+CSS布局网站首页。在网站页面设计中，网页的结构布局非常重要。上一个项目我们学习了CSS格式化排版，本项目将学习如何通过HTML语言中的DIV标签，结合CSS样式来进行网页布局。DIV布局是网页设计中主流布局方式。在网站页面设计中，网页的结构布局非常重要。上一个项目我们学习了CSS格式化排版，本项目将学习如何通过HTML语言中的DIV标签，结合CSS样式来进行网页布局。DIV布局是网页设计中主流布局方式。学会使用DIV+CSS进行不同结构的网页布局。能够使用DIV+CSS布局网站首页。学习目标作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第2页Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第3页认识CSS盒子模型CSS盒子模型的边框、内边距和外边距一、使用CSS盒子模型作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第4页一、使用CSS盒子模型1 认识CSS盒子模型一、使用CSS盒子模型作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第5页一、使用CSS盒子模型2 CSS盒子模型的边框、内边距和外边距一、使用CSS盒子模型作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第6页一、使用CSS盒子模型Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4Contents目录使用CSS盒子模型1标准流和div标记2盒子的浮动和定位3使用CSS布局电子商务网站首页4作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第7页div标记标准流盒子在标准流中的定位二、标准流和div标记作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第8页二、标准流和div标记1 标准流所谓标准流，是指在没有任何外部干涉时，网页中各个元素盒子的排列规则，也就是网页默认的、自然的排列布局方式。一个网页中的元素可以分为两类：块级元素：大部分HTML标记都属于块级元素，每个块级元素都占据着一个矩形的区域，并且跟同级的兄弟块依次垂直排列，左右撑满。行内元素：网页中有一部分元素属于行内元素，基本都是用于文字修饰的标记。二、标准流和div标记作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第9页二、标准流和div标记1 标准流二、标准流和div标记作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第10页二、标准流和div标记2 div标记二、标准流和div标记作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第11页二、标准流和div标记3 盒子在标准流中的定位盒子在标准流中的定位方式：1块级元素之间的垂直定位margin属性2嵌套盒子之间的margin属性二、标准流和div标记块级元素之间的垂直定位margin属性1嵌套盒子之间的margin属性2作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第12页二、标准流和div标记3 盒子在标准流中的定位1块级元素之间的垂直定位margin属性二、标准流和div标记块级元素之间的垂直定位margin属性1作者: 眼猿(笔名) 文档编码:CJGYLJAMY — HQISHGVYG — 这是第13页二、标准流和div标记3 div标记2嵌套盒子之间的margin属性二、标准流和div标记嵌套盒子之间的margin属性2作者: 眼猿(笔