HTML_CSS_+_DIV实现整体布局.docx
《HTML_CSS_+_DIV实现整体布局.docx》由会员分享,可在线阅读,更多相关《HTML_CSS_+_DIV实现整体布局.docx(12页珍藏版)》请在三一文库上搜索。
1、HTML CSS + DIV实现整体布局1、技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局2、什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟 W3C的职能:负责制定和维护Web行业标准 W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面交互方面:ECMAScript 等等3、W3C倡导的Web结构要符合以下要求: XHTML负责内容组织 CSS负责页面样式4、符合W3C规范页面的结构:Html代码1. 3. 4. 5. 7. 无标题文档8. 9. 10
2、. .页面内容部分11. 12. htmlview plaincopy1. 3. 4. 5. 7. 无标题文档8. 9. 10. .页面内容部分11. 12. 5、XHTML基本规范1. 标签名和属性名称必须小写2. HTML标签必须关闭3. 属性值必须用引号括起来4. 标签必须正确嵌套5. 文档必须拥有一个根元素,所有的XHTML元素必须嵌套于根元素中6. 属性不能简写,如: 6、页面开发需要注意的地方: 不要使用淘汰的标签:、等,可参考官方文档(http:/www.w3c.org) 标签的alt属性:为图片增加alt属性 样式和内容分离:将样式和结构分离,不使用行类样式 表单的name和i
3、d:表单及表单元素要求设置name和id属性 使用CSS + DIV布局 页面的浏览器兼容性7、为什么需要盒子模型? 网页可以看成由一个个盒子组成,如图: 由上图可以看出,页面分为上(网站导航)、中、下(版权声明)三个部分, 中间部分又分为左(商品分类)、中(主要部分)、右,这些版块就像一个个 的盒子,这些盒子中放置着各种内容,页面就是由这些盒子拼凑起来8、盒子模型的相关属性 margin(外边距/边界) border(边框) padding(内边距/填充 ) 我们看图理解一下各属性作用: 以上属性又分为上、右、下、左四个方向问题:页面元素的宽度width、高度height如何计算? 答案:元
4、素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度 比如:元素实际占位高度 = height属性 + 上下padding + 上下边框宽度9、盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图:从上往下看,层次关系如下: 第1层:盒子的边框(border), 第2层:元素的内容(content)、内边距(padding) 第3层:背景图(background-image) 第4层:背景色(background-color) 第5层:盒子的外边距(margin) 从这个层次关系中可以看出,当同时设置背景图和背景色时,背景 图将在背景色的上方显示10、margin外
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML_CSS_ _DIV 实现 整体 布局
链接地址:https://www.31doc.com/p-8908006.html