Lecture4PageSectionsandtheCSSBoxModel.ppt

* * * * * * * * * * * * * * * 30分钟线！ * * * 内边距 例子 2 每个方向上的内边距都可以被单独设置 要注意的是内边距的背景色跟其所在元素的背景色相同 CSS 外边距属性 属性 描述 margin 设置4个方向上的外边距 margin-bottom 仅设置底部外边距 margin-left 仅设置左方外边距 margin-right 仅设置右方外边距 margin-top 仅设置顶部外边距 完整外边距属性列表 外边距 例子1 注意到外边距总是透明的(它们不包含所在元素的背景色。) 外边距 例子2 每个方向上的外边距可被单独设置 CSS 尺寸属性 属性 描述 width, height 设置元素的宽度跟高度 (仅对块元素) max-width, max-height, min-width, min-height 设置元素的最大/最小 尺寸 中间对齐一个块元素: 自动化(auto) 边缘 如果宽度(width) 被设定，效果会较好 (否则, 可能出现占据整个网页宽度的情况) 在块元素内设置内联元素的中央对齐， 使用： text-align: center 总结 更多CSS知识 HTML 属性: id, class 多重类 伪类 样式化网页区域 网页区域化的目的 div, span CSS 上下文选择器 CSS 层叠 和 继承 布局介绍 盒子模型, 文档浮动 边框,内边距, 外边距的属性 尺寸的属性 练习 完成我们这次课程的例子 原始例子可从这里下载 最后效果应该如下所示: 进阶阅读 W3C CSS2 Specification: /TR/REC-CSS2/ W3Schools CSS2 Reference: /css/css_reference.asp W3Schools CSS Tutorial: /css/default.asp Chapter 3, 4, 7, 8, and 11 of Beginning CSS Cascading Style Sheets for Web Design, second edition /screencast/html-training/css/positioning/ /css/display.html /wiki/User-centered_design /usability/newsletter/9807-webguide.html Thank you! * * * * * * * * * * * * * * * * 10分钟线！ * * * * * 20分钟线！ * Web 2.0 Programming – Page Sections and the CSS Box Model * / 40 * South China University of Technology Lecture 4网页区域和 CSS 盒子模型 Web Programming School of Computer Science and Engineering, South China University of Technology 概述 更多 CSS知识 样式化网页区域 布局介绍 HTML 的id 属性 允许你给网页上任一个元素分配一个唯一的ID 每个ID必须唯一；在网页中只能定义一次 pSpatula City! Spatula City!/p p id=missionOur mission is to provide the most spectacular spatulas and splurge on our specials until our customers qesplode/q with splendor!/p HTML Spatula City! Spatula City! Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor! output 链接到Web 网页的某个区域 一个链接目标可以以#开头，以ID名称结束 浏览器会加载指定页面，并跳转到给定ID的元素处 pVisit a href= “/download/index.html#downloads /a to get the TextPad editor./p pa href=#missionView our Mission Statement/a/p HTML Visit to get the TextPad editor. V