Microsoft PowerPoint - 03CSS

Size: px
Start display at page:

Download "Microsoft PowerPoint - 03CSS"

Transcription

1 Web 应用基础

2 CSS <font color="maroon" face="times, Serif" size="7"> <I><U>Software School</U><I></font> p {color: maroon; font: italic 2.6em Times, Serif; text-decoration: underline;} <p>software School</p>

3 CSS p, h1 {color: maroon; font: italic 2.6em Times, Serif; text-decoration: underline;}

4 不鼓励使用元素 <font> <basefont> <u> <strike> <center> <i>

5 HTML 与 CSS <html> <head> <title>harry's ancestors</title> <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> <style url(sheet2.css); h1 {color: maroon; } body {background: yellow; } --></style> </head> <body> <h1>charlus Potter</h1> <p style="color: green;">rowling s Black Family </p> </body> </html>

6 HTML 与 CSS sheet1.css p { color: red; font: 1em Times;} <html> <head> <title>harry's ancestors</title> shee2.css p { color: blue; } h1 {font: italic 2em Times;} <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> <style url(sheet2.css); h1 {color: maroon; } body {background: yellow; } --></style> </head> <body> <h1>charlus Potter</h1> <p style="color: green;">rowling s Black Family </p> </body> </html>

7 HTML 与 CSS sheet1.css p { color: red; font: 1em Times;} <html> <head> <title>harry's ancestors</title> shee2.css p { color: blue; } h1 {font: italic 2em Times;} <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> <style url(sheet2.css); h1 {color: maroon; } body {background: yellow; } --></style> </head> <body> <h1>charlus Potter</h1> <p style="color: green;">rowling s Black Family </p> </body> </html>

8 Media <link rel="stylesheet" href="sheet1.css" type="text/css" media="all"/> all screen print project aural handheld tty tv 所有媒体屏幕媒体, 如桌面计算机监视器打印机投影仪语言合成器 屏幕阅读器等手持设备, 如个人数字助理或支持 Web 的手机固定间距环境, 如电传打字机电视机

9 属性值的表示 <type> (X Y) (X Y) [expression] * +? {M, N} 值的类型 X 或 Y X 或 Y, 或者两者都出现, 且 X 和 Y 出现的顺序没有限制 组合 前面的值或组合可以重复 0 次或多次 前面的值或组合可以重复 1 次或多次 前面的值或组合是可选的 前面的值或组合至少重复 M 次, 至多重复 N 次

10 属性值举例 give me liberty [I am]? the walrus Koo+ Kachoo give liberty give me liberty me give give me liberty I the walrus am walrus the am the I walrus walrus the Koo Kachoo Koo Koo Kachoo Koo Koo Koo Kachoo

11 属性值举例 I really{1, 3}? [love hate] [Microsoft Netscape Opera] [[Alpha Baker Cray],]{2,3} and Delphi

12 属性值举例 I really{1, 3}? [love hate] [Microsoft Netscape Opera] I love Microsoft I really hate Microsoft I really really love Netscape I really really really hate Microsoft [[Alpha Baker Cray],]{2,3} and Delphi Alpha, Baker, and Delphi Baker, Cray, and Delphi Cray, Alpha, Baker, and Delphi Alpha, Baker, Cray, and Delphi

13 规则结构 Declaration block Selector Declaration Declaration h1 { color: red; background: yellow; } Attribute Value

14 HTML 用例 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>

15 HTML 用例 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>

16 元素选择器 html {color: black;} h1 {color: red;} h2 {color: green;}

17 元素选择器 html {color: black;} h1 {color: red;} h2 {color: green;}

18 元素选择器 h1, h2 {font: medium Arial;} p {font: large/150% sans-serif;} * {color: blue;}

19 类选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p class="warning">useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3 class="warning">comments</h3> <p>it's best to avoid...</p> </body> </html>

20 类选择器 p.warning {font-style: italic; color: red}

21 类选择器 p.warning {font-style: italic; color: red}

22 类选择器.warning {font-style: italic; color: red}

23 类选择器.warning {font-style: italic; color: red}

24 类选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p class="warning urgent">useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3 class="warning">comments</h3> <p>it's best to avoid...</p> </body> </html>

25 类选择器 p.warning.urgent {font-style: italic; color: blue} p.urgent.warning {font-style: italic; color: blue}

26 类选择器 p.warning.urgent {font-style: italic; color: blue} p.urgent.warning {font-style: italic; color: blue}

27 ID 选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1 id="lead-head">plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>

28 ID 选择器 #lead-head {color: red; background: yellow;}

29 ID 选择器 #lead-head {color: red; background: yellow;}

30 属性选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1 lang="en" title="urgent warning">plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>

31 属性选择器 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1 lang="en" title="urgent warning">plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>

32 属性选择器 h1 [lang] {color: blue;} h1 [title="urgent warning"] {color: blue;} h1 [lang] [title] {color: blue;}

33 子串匹配属性选择器 类型 [attr~="value"] [attr^="value"] [attr$="value"] [attr*="value"] [attr ="value"] 描述 attr 属性值包括 "value" 的所有元素 attr 属性值以 "value" 开头的所有元素 attr 属性值以 "value" 结尾的所有元素 attr 属性值中包含 "value" 子串的所有元素 attr 属性值等于 "value" 或以 "value" 开头的所有元素 实例 h1 [title~="warning"] img [src^="\images"] img [src$=".jpg"] a [href*="fudan.edu.cn"] img [src ="picture"]

34 文档的树型结构 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p> <span>when...</span> <span>with... </span> </P> <h2>safety Information</h2> <ol> <li></li><li></li><li></li> </ol> </body> </html> head html body title style h1 p h2 ol span span li li li

35 后代选择器 p span {color: green;}

36 后代选择器 p span {color: green;}

37 后代选择器 html body li {color: red;}

38 后代选择器 html body li {color: red;}

39 后代选择器 body > h1 {color: red;} li + li {color: red;}

40 后代选择器 body > h1 {color: red;} li + li {color: red;}

41 伪类选择器 a:link {color: navy;} a:visited {color: gray;} a:hover {color: red;} a:active {color: yellow;} link-visited-focus-hover-active

42 伪类选择器 a:link {color: navy;} a:visited {color: gray;} a:hover {color: red;} a:active {color: yellow;} link-visited-focus-hover-active

43 伪类选择器 类型 描述 实例 link visited focus hover active lang first-child 未访问链接已访问链接获得焦点旋停激活语言第一个子元素 a:link {color: navy;} a:visited {color: gray;} input:focus {background: silver; color: blue;} a:hover {color: red;} a:active {color: yellow;} html:lang(en) {background: silver;} p:first-child {font-weight: bold;}

44 伪元素 类型 描述 实例 first-letter first-line before after 首字符第一行之前之后 p:first-letter {font-size: 200%;} p:first-line {color: purple;} h2:before {content: "["; color: silver;} h2:after {content: "]"; color: silver;}

45 选择器总结 类型 元素选择器类选择器 ID 选择器属性选择器后代选择器伪类选择器 特征符号,. # [ ] 空格 + > : 实例 h1, h2 {font: medium Arial;} p.warning {font-style: italic; color: blue;} #lead-head {color: red; background: yellow;} a [href*="fudan.edu.cn"] {color: maroon;} table * td {color: blue;} a:visited:hover {color: gray;}

46 Inheritance and cascade Where the name of Cascading Style Sheets from?

47 特殊性 内联样式 1, 0, 0, 0 ID 选择器 0, 1, 0, 0 类 / 属性 / 伪类选择器 0, 0, 1, 0 元素 / 后代选择器伪元素 0, 0, 0, 1 结合符通配符 HTML 属性 0, 0, 0, 0 继承 None

48 实例计算 例子 特殊性 (specificity) h1 {color: red;} <p style="color: green;">rowling </p> p span {color: purple;}.grape {color: blue;} *.bright {color: yellow;} p.bright span.dark {color: maroon;} #id216 {color: green;} div#sidebar *[href] {color: silver;} <body bgcolor="yellow"> 0, 0, 0, 1 1, 0, 0, 0 0, 0, 0, 2 0, 0, 1, 0 0, 0, 1, 0 0, 0, 2, 2 0, 1, 0, 0 0, 1, 1, 1 0, 0, 0, 0

49 练习 html > body table tr[title="totals"] td ul > li {color: red;} Answer: 0, 0, 1, 7

50 解组 h1 {color: silver; background: black;} h1 {color: silver;} /* 0, 0, 0, 1 */ h1 {background: black;} /* 0, 0, 0, 1 */

51 解组 h1, h2.section {color: silver; background: black;} h1 {color: silver;} /* 0, 0, 0, 1 */ h1 {background: black;} /* 0, 0, 0, 1 */ h2.section {color: silver;} /* 0, 0, 1, 1 */ h2.section {background: black;} /* 0, 0, 1, 1 */

52 ID 和属性选择器 <p id="totals">$1,000,000.00</p> p [id="totals"] {color: yellow} #totals {color: red}

53 ID 和属性选择器 <p id="totals">$1,000,000.00</p> p [id="totals"] {color: yellow} /* 0, 0, 1, 1 */ #totals {color: red} /* 0, 1, 0, 0 */

54 HTML 用例 <html> <head> <title>plutonium</title> <style type="text/css"><!-- --></style> </head> <body> <h1>plutonium</h1> <p>useful for many...</p> <h2>safety Information</h2> <p> <span>when handling plutonium...</span> <span>with plutonium... </span> </P> <h3>comments</h3> <p>it's best to avoid...</p> </body> </html>

55 重要性 <h1 id="warning">plutonium</h1> h1 {color: red;} #warninng {color: blue;}

56 重要性 <h1 id="warning">plutonium</h1> h1 {color: red!important;} #warninng {color: blue;}

57 重要性注意事项 每一个声明都需要有它自己的!important 标志, 这样这个声明才能被标记为重要 h1 {color: red!important; background: white; } h1 {color: red!important; background: white!important; }

58 重要性注意事项 每一个声明都需要有它自己的!important 标志, 这样这个声明才能被标记为重要 标志!important 必须放在声明的最后

59 重要性注意事项 每一个声明都需要有它自己的!important 标志, 这样这个声明才能被标记为重要 标志!important 必须放在声明的最后 重要性和非重要性声明分别归入不同的组, 然后再用特殊性来解冲突, 决定声明的优先级

60 继承性注意事项 声明会沿着文档的结构树传播到后代元素, 并一直继续, 直到没有元素为止 有些属性不能继承 ( 往往归因于常识, 如 border 属性 ), 大多数框模型属性 ( 包括外边距 内边距 边框 ) 都不能继承 目前浏览器在继承性上有许多 Bug 存在, 所以要避免不加区别地使用通配符

61 声明来源的优先级 用户的重要性声明 高 创作人员的重要性声明 创作人员的一般性声明 用户的一般性声明 用户代理声明 ( 浏览器用户首选项 ) 低

62 顺序优先 h1 {color: red;} h1 {color: purple;}

63 顺序优先的注意事项 a:active {color: orange;} a:hover {color: red;} a:link {color: blue;} a:visited {color: gray;}

64 推荐顺序 LoVe-HA! a:link {color: blue;} a:visited {color: gray;} a:hover {color: red;} a:active {color: orange;}

65 保险方法 a:link {color: blue;} a:visited {color: gray;} a:link:hover {color: red;} a:visited:hover {color: purple;} a:link:hover:active {color: yellow;} a:visited:hover:active {color: green;}

66 HTML 属性优先级 <body bgcolor="yellow"> <style type="text/css"><!-- h1 {background="red";} --></style>

67 HTML 属性优先级 <body bgcolor="yellow"> <style type="text/css"><!-- h1 {background="red";} --></style> CSS > HTML 属性

68 通配与继承 <body bgcolor="yellow"> <style type="text/css"><!-- p {background="aqua";} * {background="gray";} --></style>

69 通配与继承 <body bgcolor="yellow"> <style type="text/css"><!-- p {background="aqua";} * {background="gray";} --></style> 通配 > 继承

70 Font 与继承 span {color: blue} handling <font color="red"> plutonium</font>, care

71 Font 与类选择器 span {color: blue}.warning {color: green} handling <font class="warning" color="red"> plutonium</font>, care

72 用户代理首选项 #toolbar {background: blue; color: white;} <div id="toolbar"> <A href="test.html"> Home </A> <A href="test.html"> Food&Drink </A> <A href="test.html"> Lodging </A> <A href="test.html"> Entertainment </A> <A href="test.html"> Night Life </A><br> </div>

73 用户代理首选项 #toolbar {background: blue; color: white;} #toolbar a {color: white;} <div id="toolbar"> <A href="test.html"> Home </A> <A href="test.html"> Food&Drink </A> <A href="test.html"> Lodging </A> <A href="test.html"> Entertainment </A> <A href="test.html"> Night Life </A><br> </div>

74 Bug Pay close attention to the bug of browser Solution: test again and again

75 颜色表示方法 安全色 English name: red, blue, green, 倍数 rgb(0~100%, 0~100%, 0~100%) 20% rgb(0~255, 0~255, 0~255) 51 #FF0000, #0000FF, #008000, 33

76 绝对长度单位 in ( 英寸 ) 2.54 厘米 cm ( 厘米 ) mm ( 毫米 ) pt ( 点 ) 1/72 英寸 pc ( 派卡 ) 12 点

77 相对长度单位 em (em-height) 1em 等于给定字体的 font-size 值 xm (x-height) 1xm 等于给定字体和 font-size 值的小写 x 的高度, 目前大多数设定为 1/2em px ( 像素 )

78 相对长度单位 <h1>left margin = <span>24 pixels</span></h1> <h2>left margin = <span>18 pixels</span></h2> <p>left margin = <span>12 pixels</span></p> h1 {font-size: 36px;} h2 {font-size: 24px;} p {font-size: 18px;} h1, h2, p {margin-left: 1em;} span {font-size: 0.8em;}

79 URL 绝对路径 url(protocol://server/pathname) 相对路径 url(pathname) url 与开始括号之间不能留有空格

80 角度值 deg ( 角度 ) grad ( 梯度 ) rad ( 弧度 ) 取值范围 0~360 90deg = 270deg

81 时间值 s ( 秒 ) ms ( 毫秒 ) 1/1000 秒 频率值 Hz ( 赫兹 ) KHz ( 千赫 ) 1000 赫兹

82 字体系列 Times TimesRegular TimesBold TimesItalic TimesOblique TimesBoldItalic TimesBoldOblique

83 通用字体系列 Serif: Times, Georgia, New Century Schoolbook Sans-serif: Helvetica, Geneva, Verdana, Arial, Univers Monospace: Courier, Courier New, Andale Mono Cursive: Zapf chancery, Author, Comic Sans Fantasy: Western, Woodblock, Kingon

84 font-family 值初始值应用范围继承性计算值实例 [ [<family-name> <generic-family> ], ] * [ <family-name> <generic-family> ] inherit 用户代理指定的值所有元素有根据指定确定 body {font-family: Times, Palatino Linotype, Karrank% ;}

85 font-family

86 font-weight 值初始值应用范围继承性计算值实例 normal bold bolder lighter inherit normal 所有元素有数字值或某个数字值加上某个相对数 h1 {font-weight: bold;} h2 {font-weight: 400;}

87 Zurich 字体 Zurich Light Zurich Regular Zurich Medium Zurich Bold Zurich Black Zurich UltraBlack 关键字 normal bold 数字 100, 200, ,

88 Zurich 字体 Zurich Light Zurich Regular Zurich Medium Zurich Bold Zurich Black Zurich UltraBlack 关键字 normal bold 数字 100, 200, ,

89 font-size 值初始值应用范围继承性百分数计算值实例 xx-small x-small small medium large x-large xx-large smaller larger <length> <percentage> inherit medium 所有元素有根据父元素的字体大小来计算根据指定确定 p {font-size: x-small;} em {font-size: larger; } span {font-size: 120%;} div {font-size: 25px;}

90 em box

91 font-size

92 Larger and Smaller 关键字 xx-small x-small small medium large x-large xx-large 缩放 1.5 5px 7px 11px 16px 24px 36px 54px 缩放 1.2 9px 11px 13px 16px 19px 23px 28px 注 : CSS2 规定缩放因子可以介于 1.0~1.2 之间

93 font-style 值 italic oblique normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有根据指定确定 p {font-style: italic;} em {font-style: oblique;}

94 font-variant 值 small-caps normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有根据指定确定 p {font-variant: small-caps;} em {font-variant: inherit;}

95 Small-caps

96 font 值初始值应用范围继承性百分数计算值实例 [ [<font-style> <font-variant> font-weight]? <font-size> [/<line-height>]? <font-family>] caption icon menu message-box small-caption status-bar inherit 根据单个属性的初始值所有元素有 <font-size> 相对于父元素进行计算 ;<line-height> 相对于元素的 <font-size> 进行计算根据单个属性计算 p {font: italic 300 small-caps 30px/120% Verdana;} h2 {font: bold normal italic 24px Helvetica, Arial;}

97 font h1 { font-family: Verdana, Helvetica, Arial, sans-serif font-size: 30px; font-weight: 900; font-style: italic; font-variant: small-caps } h1 { font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif; }

98 font 与继承 h1, h2, h3 { font: italic normal small-caps 250% sans-serif; } h2 { font: 200% sans-serif; } h3 { font-size: 150%; } h2 与 h3 命运将不同

99 font 与继承 h1, h2, h3 { font: italic normal small-caps 250% sans-serif; } h2 { font: normal normal normal 200% sans-serif; } h3 { font-size: 150%; } h2 与 h3 命运如何不同

100 使用系统字体 caption icon menu message-box small-caption status-bar 控件的标签, 如按钮图标菜单对话框小控件的标签状态条

101 text-indent 值 <length> <percentage> inherit 初始值应用范围继承性百分数计算值实例 0 块级元素有相对于元素父元素的宽度绝对数值 p {text-intent: 3em;} div {text-intent: 10%;}

102 text-indent <html> <head> <title>text-indent</title> <style type="text/css"><!-- div {width: 400px;} p {text-indent: 10%;} --></style> </head> <body> <div> <p>this DIV is contained </p> </div> </body> </html>

103 text-indent <html> <head> <title>text-indent-inherit</title> <basefont face="arial"> <style type="text/css"><!-- div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 250px;} --></style> </head> <body> <div id="outer"> <div id="inner">this first line of the DIV is indented by 50 pixels. <p>this paragraph is 200px wide </p> </div> </div> </body> </html>

104 text-align 值 left center right justify inherit 初始值应用范围继承性计算值实例 用户代理的默认值 ; 取决于语言的书写方向块级元素有根据指定确定 p {text-align: left;} div {text-align: justify;}

105 line-height 值初始值应用范围继承性百分数计算值实例 <length> <percentage> <number> normal inherit normal 所有元素有相对于元素的字体大小指定最小绝对数值 p {line-height: 0.33in;} div {line-align: 150%;}

106 Line box

107 line-height <html> <head> <title>text-indent</title> <style type="text/css"><!-- div {font-size: 18px;} p.heighter {line-height: 1.5;} p.lower {line-height: 0.65;} p {width: 400px;} --></style> </head> <body> <div> <p class="heighter">this paragraph's 'font-size' </p> <p>this paragraph's 'font-size' is </p> <p class="lower">this paragraph's 'font-size' is 18px.</p> </div> </body> </html>

108 vertical-align 值初始值应用范围继承性百分数计算值实例 baseline sub super top text-top middle bottom text-bottom <length> <percentage> inherit baseline 行内元素和表格的单元格无相对于元素的 line-height 值计算, 确定对父元素基线的升降长度单位为绝对数值, 其他按指定确定 img {vertical-align: bottom;} span {vertical-align: 120%;}

109 vertical-align

110 vertical-align

111 vertical-align

112 word-spacing 值 <length> normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有绝对数值 p {word-spacing: 0.5em;} span {word-spacing: normal; }

113 letter-spacing 值 <length> normal inherit 初始值应用范围继承性计算值实例 normal 所有元素有绝对数值 p {letter-spacing: 0.25em;} span {letter-spacing: normal; }

114 text-transform 值初始值应用范围继承性计算值实例 uppercase lowercase capitalize none inherit none 所有元素有根据指定确定 h1 {text-transform: capitalize;} p {text-transform: uppercase;}

115 text-transform

116 text-decoration 值初始值应用范围继承性计算值实例 none [ underline overline line-through blink ] inherit none 所有元素无根据指定确定 h1 {text-decoration: underline overline;} p {text-decoration: line-through;}

117 text-decoration

118 white-space 值初始值应用范围继承性计算值实例 normal nowrap pre pre-wrap pre-line inherit normal 所有元素无根据指定确定 p {white-space: pre;} span {white-space: pre-line;}

119 white-space 值 空白符 换行符 自动换行 pre-line 合并 保留 允许 normal 合并 忽略 允许 nowrap 合并 忽略 不允许 pre 保留 保留 不允许 pre-wrap 保留 保留 允许

120 direction 值初始值应用范围继承性计算值实例 ltr rtl inherit ltr 所有元素无根据指定确定 p:lang(ar), *:lang(he) {direction: rtl;}

121 元素 块级元素 P, div, h1 行内元素 em, span 替换元素 img, input

122 框模型

123 块级元素水平格式化 margin-left + border-left + padding-left + width + margin-right + border-right + padding-right = father-element (width) 7 个属性可取绝对长度值除 border 外的 5 个属性可取百分数 ( 根据父元素 width 计算 ) 3 个属性还可以设置为 auto: margin-left, margin-right, width 其余必须设置为特定的值, 或者默认为 0

124 块级元素水平格式化 margin-left, margin-right 可以取负值, 其余只能取正值或为 0 若 7 个属性过分受限, 即加和大于或小于父元素的 width, 则 margin-right 强制转为 auto ( 对于从左向右读的语言 )

125 auto 值 width margin-left margin-right 效果 auto auto auto 两个外边距都为 0,width 会尽可能的宽 auto auto 居中 auto 若其余 6 个属性值设置得更宽, 块级元素会变得更高 auto 若其余 6 个属性值之和大于父元素 width,margin-right 为负数

126 margin

127 替换元素水平格式化 若 width 的值为 auto, 元素的宽度是内容的固有宽度 如果设置了 width, 但 height 值设为 auto, 则 height 值将随着 width 的变化成比例调整 除上述不同外, 其余和块级元素一样

128 块级元素垂直格式化 margin-top + border-top + padding-top + height + margin-bottom + border-bottom + padding-bottom = father-element (height) 7 个属性可取绝对长度值除 border 外的 5 个属性可取百分数 ( 根据父元素 height 计算 ) 3 个属性还可以设置为 auto: margin-top, margin-bottom, height 其余必须设置为特定的值, 或者默认为 0

129 合并垂直外边距 <ul> <li>leading up to the end of the list item, as well as the end of the list itself.</li> </ul> <h1>level-one heading (H1)</h1> ul {margin-bottom: 20px; } li {margin-top: 10px; margin-bottom: 10px; } h1 {margin-top: 28px; }

130 合并垂直外边距

131 行内元素基本术语 em box 内容区行内框行框 在字体中定义, 也称为字符框 (character box), 实际的字形可能比其 em box 更高或更矮 对于非替换元素, 内容区可以是元素中字符的 em box 组合在一起所构成的框, 也可以是由元素中字形所占的框对于替换元素, 内容区就是元素的固有高度加上可能的外边距 边框和内边距 对于非替换元素, 行内框高度刚等于 line-height 值对于替换元素, 行内框的高度等于内容区的高度 包含该行中出现的行内框的最高点和最低点的最小框

132 vertical-align top bottom text-top text-bottom middle super sub <percentage> 元素的行内框的顶端与包含该元素的行框顶端对齐 元素的行内框的底端与包含该元素的行框底端对齐 元素行内框的顶端与父元素的内容区的顶端对齐 元素行内框的底端与父元素的内容区的底端对齐 元素行内框的垂直中点与父元素基线上 0.5ex 处的一点对齐 元素的内容区和行内框上移, 上移的距离由用户代理设定 元素的内容区和行内框下移, 下移的距离由用户代理设定 元素的内容区和行内框上移或下移一定距离, 这个距离相对于元素的 line-height 进行计算

133 vertical-align: middle

134 vertical-align Same font-size and no line-height Same font-size and line-height Different font-size and no line-height Different font-size and line-height

135 line-height

136 line-height

137 确定行框高度步骤 Step 1: Step 2: (a) 确定各行内非替换元素和行内元素的所有文本的 font-size 值和 line-height 值, 将 line-height 减去 font-size 后除以 2, 将其一半分配到 em 框的顶部和底部 ; (b) 获取各替换元素的 height margin padding border 值, 并将它们相加 将非替换元素和行内元素的基线对齐, 对于替换元素, 要将其底边放在整行的基线之上 Step 3: 对指定 vertical-align 值的元素, 确定其相对于基线的垂直偏移量 Step 4: 获取所有行内框的位置, 计算行框高度 只需将基线与最高行内框之间的距离加上基线与最低行内框底端之间的距离

138 display 值初始值应用范围继承性计算值实例 none inline block inline-block list-item run-in table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption inherit inline 所有元素无根据指定确定 li {display: inline;} a {display: block;}

139 display

140 height 值 <length> <percentage> auto inherit 初始值应用范围继承性百分数计算值实例 auto 块级元素和替换元素无相对于包含块的 height 值计算绝对数值 p {height: 80%} div {height: 3em;}

141 margin 值初始值应用范围继承性百分数计算值说明实例 [ <length> <percentage> auto ]{1, 4} inherit 未定义所有元素无相对于包含块的 width 值计算绝对数值 margin: top right bottom left p {margin: 1em} div {margin: 1em 1px 2em 25%;} img {margin: 2em 3em 4px;}

142 margin 值复制模式

143 border-width 值初始值应用范围继承性计算值实例 thin medium thick medium 所有元素无绝对长度 h1 {border-width: thin;} div {border-width: 3px; }

144 border-style 值初始值应用范围继承性计算值实例 [ none hidden dotted dashed solid double groove ridge inset outset ] {1,4} inherit 未定义所有元素无根据指定确定 h1 {border-style: dotted;} div {border-style: dashed outset; }

145 border-style

146 border 值初始值应用范围继承性计算值实例 [ <border-width> <border-style> <border-color> ] inherit 边框颜色为元素本身的前景色, 宽度为 medium 所有元素无根据指定确定 h1 {border: thick silver solid;} div {border: 3px thin dashed purple; }

147 外边距内边距边框 margin padding border border-style border-width border-color margin-top, margin-right, margin-bottom, margin-left padding-top, padding-right, padding-bottom, padding-left border-top, border-right, border-bottom, border-left border-top-style, border-right-style, border-bottom-style, border-left-style border-top-width, border-right-width, border-bottom-width, border-left-width border-top-color, border-right-color, border-bottom-color, border-left-color

148 文件夹风格

149 蒙德里安风格

150 color 值初始值应用范围继承性计算值实例 <color> inherit 用户代理指定的值所有元素有根据指定确定 h1 {color: rgb(51, 102, 0);} div {color: #33CC66; }

151 background-color 值初始值应用范围继承性计算值实例 <color> transparent inherit transparent 所有元素无根据指定确定 p {background-color: rgb(51, 102, 0);} div {background-color: #33CC66; }

152 background-image 值初始值应用范围继承性计算值实例 <url> none inherit none 所有元素无根据指定确定 p {background-image: url(apple.gif);} body {background-image: none; }

153 background-image: inherit

154 background-image: inherit * {background-image: url(picture.gif);} body {background-image: url(picture.gif);} * {background-image; inherit;}

155 background-repeat 值初始值应用范围继承性计算值实例 repeat repeat-x repeat-y no-repeat inherit repeat 所有元素无根据指定确定 body {background-image: url(apple.gif); background-repeat: repeat-y;}

156 background-repeat repeat repeat-y repeat-x no-repeat

157 background-position 值初始值应用范围继承性百分数计算值实例 [ [<percentage> <length> left center right ] [<percentage> <length> top center bottom ]? ] [ [ left center right [ top center bottom ] ] inherit 0% 0% 块级元素和替换元素无相对于应用背景元素所占框计算绝对长度或根据指定确定 body {background-image: url(apple.gif); background-position: top right;}

158 位置属性值的等价关系 单个关键字 center top bottom right left 两个关键字 center center center top center bottom right center left center top left bottom right 百分数 50% 50% 50% 0% 50% 100% 100% 50% 0% 50% 0% 0% 100% 100%

159 background-position

160 background-position

161 background-attachment 值 scroll fixed inherit 初始值应用范围继承性计算值实例 scroll 所有元素无根据指定确定 body {background-image: url(apple.gif); background-position: center center; background-attachment: fixed;}

162 background-attachment

163 background 值初始值应用范围继承性计算值实例 [ <background-color> <background-image> <background-repeat> <background-position> <background-attachment> inherit 根据单个属性所有元素无根据单个属性规定 body {background-color: white; background-image: url(apple.gif); background-position: left top; background-repeat: repeat-y; background-attachment: fixed;}

164 float 值 left right none inherit 初始值应用范围继承性计算值实例 none 所有元素无根据指定确定 img {float: left; } div {float: right; width: 15em; }

165 float

166 浮动规则 浮动元素的左 ( 或右 ) 外边界不能超出其包含块的左 ( 或右内边界 ), 浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高

167 浮动规则 浮动元素的左 ( 或右 ) 外边界必须是源文档中之前出现的左浮动 ( 或右浮动 ) 元素的右 ( 或左 ) 外边界, 除非后出现浮动元素的顶端在先出现浮动元素的底端下面

168 浮动规则 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边, 一个右浮动元素的左外边界不会在其左边任何左浮动元素右外边界的左边

169 浮动规则 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

170 浮动规则 左 ( 或右 ) 浮动元素的左边 ( 右边 ) 有另一个浮动元素, 前者的右外边界 ( 或左外边界 ) 不能在其包含块右 ( 或左 ) 边界的右边 ( 或左边 )

171 clear

172 clear 值 left right both none inherit 初始值应用范围继承性计算值实例 none 块级元素无根据指定确定 h1 {clear: left; } div {clear: both; }

173 浮动元素重叠 浮动元素的 margin 值设置成负值时, 会产生重叠的现象 ; 行内框与一个浮动元素重叠时, 其边框 背景和内容都在浮动元素之上显示 ; 块框与一个浮动元素重叠时, 其边框和背景在浮动元素之下显示, 而内容在浮动元素之上显示 ; 重叠行为与元素在文档中的顺序无关, 元素在浮动元素之前还是之后并不重要

174 浮动元素重叠

175 position 值 static relative absolute fixed inherit 初始值应用范围继承性计算值实例 static 所有元素无根据指定确定 body {position: relative;} p {position: absolute; top: 0; right: 25%; bottom: auto; left: 50%; }

176 top, right, bottom, left 值初始值应用范围继承性百分数计算值实例 <length> <percentage> auto inherit auto 定位元素 (position 值不是 static 的元素 ) 无相对于包含块的高度和宽度绝对数值或根据指定确定 p {position: absolute; top: 0; right: 25%; bottom: auto; left: 50%; }

177 position: relative em { position: relative; top: 1em; left: 1em; background: gray; color: blue; font-weight: 300; border: 1px solid blue;}

178 position: fixed div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0; background: gray;} div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; } div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;}

179 position: fixed div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0; background: gray;} div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0; } div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;}

180 position: absolute

181 包含块 根元素包含块, 也称初始包含块 一般将 html 或 body 作为根元素, 用户代理会为根元素建立一个视窗大小的矩形初始包含块 对于一个非根元素, 若其 position 值是 relative 或 static, 包含块由最近的块级框 表格单元格或行内块祖先框的内容边界构成 对于一个非根元素, 若其 position 值是 absolute, 包含块则设置为最近的 position 值不是 static 的祖先元素 ( 如果没有祖先元素, 包含块定义为初始包含块 )

182 定位等式 width( 包含块 )= left( 定位元素 )+ margin-left( 定位元素 )+ border-left( 定位元素 )+ padding-left( 定位元素 )+ width( 定位元素 )+ padding-right( 定位元素 )+ border-right( 定位元素 )+ margin-right( 定位元素 )+ right( 定位元素 ) height( 包含块 )= top( 定位元素 )+ margin-top( 定位元素 )+ border-top( 定位元素 )+ padding-top( 定位元素 )+ height( 定位元素 )+ padding-bottom( 定位元素 )+ border-bottom( 定位元素 )+ margin-bottom( 定位元素 )+ bottom( 定位元素 )

183 水平定位规则 若定义的属性值因过分受限而无法满足等式, 则将忽略 right 值 ( 假设在从左向右读的语言中 ; 否则, 在从右向左读的语言中将忽略 left 值 ) 如果只有一个属性设置为 auto, 就会修改这个属性值来满足等式 如果 left width 和 right 都设置为 auto, 左边界置于其静态位置 ( 假设在从左向右读的语言中 ; 否则, 在从右向左读的语言中将右边界置于其静态位置 ) width 设置为正好能容纳定位元素

184 min-width, min-height, max-width, max-height 值初始值应用范围继承性百分数计算值实例 <length> <percentage> none inherit none 除了非替换元素和表元素以外的所有元素无相对于包含块的高度和宽度绝对数值或根据指定确定 p {position: absolute; top: 10%; right: 10%; bottom: auto; left: 50%; min-width: 15em; max-width: 25em; }

185 overflow 值 visible hidden scroll auto inherit 初始值应用范围继承性计算值实例 visible 块级元素和替换元素无根据指定确定 p {position: absolute; top: 0; left: 0; width: 25%; height: 7em; overflow: scroll; }

186 overflow p { overflow: scroll; } p { overflow: visible; }

187 clip 值初始值应用范围继承性计算值实例 rect (top, right, bottom, left) auto inherit auto 绝对定位元素无根据指定确定 p {position: absolute; top: 0; left: 0; width: 25%; height: 7em; clip: rect(0, auto, auto, 0); }

188 clip

189 visibility 值初始值应用范围继承性计算值 visible hidden collapse inherit visible 所有元素有根据指定确定 实例 p {visible: hidden; }

190 z-index 值 <integer> auto inherit 初始值应用范围继承性计算值 auto 定位元素无根据指定确定 实例 p {position: absolute; top: 0; left: 0; width: 20%; height: 10em; z-index: 8;}

191 z-index

192 z-index p#one {z-index: 10;} p#two {z-index: 7;} p#three {z-index: 1;} p#one b {z-index: -404;} p#two b {z-index: 36;} p#two em {z-index: -42;} p#three b {z-index: 23;} p#one 10 p#one b 10, -404 p#two b 7, 36 p#two 7 p#two em 7, -42 p#three b 1, 23 p#three 1

193 表的格式化层

194 border-collapse 值初始值应用范围继承性计算值实例 collapse separate inherit separate display 值为 table 或 inline-table 的元素有根据指定确定 table { border-collapse: collapse; }

195 border-collapse

196 border-spacing 值初始值应用范围继承性计算值说明实例 <length> <length>? inherit 0 display 值为 table 或 inline-table 的元素有绝对数值除非 border-collapse 值为 separate, 否则会忽略 table { border-spacing: 3px 5px; }

197 合并单元格边框规则 如果某个单元格边框的 border-style 的值为 hidden, 它会优于所 有其他单元格边框设置, 这个位置上的所有边框都隐藏 ; 宽边框优于窄边框 ; 如果边框宽度相同, 则边框样式的优先顺序如下 ( 从高到低 ): double, solid, dashed, dotted, ridge, outset, groove, inset; 如果边框样式和宽度都相同, 但颜色不同, 则按以下顺序确定优先级 ( 从高到低 ):cell, row, row group, column, column group, table; 如果合并边框来自相同类型的元素, 两个又有相同样式和宽度, 但颜色不同, 则颜色取最上最左边框的颜色 ( 在从左向右读的语言中 ; 而在从右向左读的语言中, 则取最上最右边框的颜色 ); 如果某个单元格边框的 border-style 的值为 none, 则它的优先级最低

198 合并单元格边框

199 List-style-type 值初始值应用范围继承性计算值实例 disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin armenian geogrian none inherit disc display 值为 list-item 的元素有根据指定确定 li {list-style-type: square;}

200 list-style-image 值初始值应用范围继承性计算值实例 <url> none inherit none display 值为 list-item 的元素有根据指定确定 li {list-style-image: url(ohio.gif); }

201 list-style-position 值初始值应用范围继承性计算值实例 inside outside inherit outside display 值为 list-item 的元素有根据指定确定 li {list-style-position: inside;}

202 List

203 list-style 值初始值应用范围继承性计算值实例 [ <list-style-type> <list-style-image> <list-style-position> ] inherit 相对于各个属性 display 值为 list-item 的元素有根据指定确定 li {list-style: url(ohio.gif) square inside;}

204 cursor 值初始值应用范围继承性计算值实例 [ [<url>,]* [ auto default pointer crosshair move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help progress ] ] inherit auto 所有元素有根据指定确定 a {cursor: url(hwe.cur);} p.tip {cursor: help;}

205 cursor

206 Any Question?

5-1 nav css 5-2

5-1 nav css 5-2 5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

More information

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2 HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /

More information

XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vsp

XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vsp XHTML CSS CSS CSS DOCTYPE Switch XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vspace big tabindex accesskey

More information

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt]

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt] HTML CSS / 2011 HTML CSS 1/ 47 1 2 HTML 3 4 HTML 5 5 : CSS 6 CSS 7 HTML CSS 2/ 47 HTML CSS 3/ 47 ( BOM) UTF-8 Notepad++ (Winodws), Fraise/Smultron (Mac), VIM ( ) HTML CSS 4/ 47 UTF-8? UTF-8 (unicode),

More information

css-03.pdf

css-03.pdf 3 71 7 2 r e d p u r p l e H1 {color: maroon;} H1 {color: gray;} H2 {color: silver;} H3 {color: black;} 7 3 H1 {color: orange;} H 1 o r a n g e 7 4 o r a n g e RGB rgb(100%,100%,100%) 7 5 0 % H1 {color:

More information

HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS

HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS 12 Chapter 12-1 12-2 12-3 HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS 3 http://www.w3.org/tr/css3-color/ 12-1-1 color ( ) (foreground color)

More information

大漠 伪前端, 就职于淘宝

大漠 伪前端, 就职于淘宝 CSS Grid Layout 2016-12-17 @ 大漠. #CSSConf https://www.flickr.com/photos/19139526@n00/8331063530/ 大漠 伪前端, 就职于淘宝 古老的 table 布局 现代 Web 布局 Float inline-block display: table position (absolute 或 relative)

More information

How to use CSS CSS3 CSS3 CSS3 P.012 -webkit- -webkit- -moz- -webkit- -webkit- -o- -ms- HTML XHTML TIPS 010

How to use CSS CSS3 CSS3 CSS3 P.012 -webkit- -webkit- -moz- -webkit- -webkit- -o- -ms- HTML XHTML TIPS 010 How to use CSS3 2011 4 CSS3 CSS3 CSS3 P.012 -webkit- -webkit- -moz- -webkit- -webkit- -o- -ms- HTML XHTML TIPS 010 W3C CSS3 TIPS CSS3 CSS2.1 CSS3 CSS current work http://www.w3.org/stle/css/current-work.en.html

More information

bootstrap - 2

bootstrap - 2 RITA TEACHING Bootstra p ENTER bootstrap - 2 bootstrap - 3 bootstrap 101 Template

More information

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

05 01 accordion UI containers 03 Accordion accordion UI accordion 54 jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1

More information

Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (

Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 ( Stylin with CSS a Designer s Guide 2/e Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (spacer GIF)

More information

F477

F477 FrontPage & Flash 連 CSIE, NTU September 15, 2007 Outline September 15, 2007 Page 2 連 FrontPage September 15, 2007 Page 3 連 FTP Email FrontPage HTML tag September 15, 2007 Page 4 連 September

More information

css样式大全(整理版)

css样式大全(整理版) css 样式大全 ( 整理版 ) 字体属性 :(font) 大小 {font-size: x-large;}( 特大 ) xx-small;( 极小 ) 一般中文用不到, 只要用数值就可以, 单位 :PX PD 样式 {font-style: oblique;}( 偏斜体 ) italic;( 斜体 ) normal;( 正常 ) 行高 {line-height: normal;}( 正常 ) 单位

More information

投影片 1

投影片 1 Introduction to CSS Cascading Style Sheets 網頁設計 / 林金祥 Webpage Design/ by Chin-Hsiang Lin 網頁設計概念 java, asp: CSS: 特殊功能 式樣設計 HTML: 文字 圖像內容 Webpage Design/ by Chin-Hsiang Lin 2 CSS:Fly! My Webpage! CSS: Cascading

More information

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2.

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2. 2005-06 p.1 HTML HyperText Mark-up Language 1. HTML Logo, Pascal, C++, Java HTML 2. HTML (tag) 3. HTML 4. HTML 1. HTML 2. 3. FTP HTML HTML html 1. html html html cutehtmleasyhtml 2. wyswyg (What you see

More information

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/

More information

F477

F477 FrontPage & Flash 連 CSIE, NTU September 15, 2007 Outline September 15, 2007 Page 2 F477 September 15, 2007 Page 3 September 15, 2007 Page 4 September 15, 2007 Page 5 連 September 15, 2007 Page 6 連 September

More information

网 页 设 计 实 训 教 程 1.4 实 现 过 程 任 务 1: 制 作 诗 词 欣 赏 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 1 1.html, 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 :

网 页 设 计 实 训 教 程 1.4 实 现 过 程 任 务 1: 制 作 诗 词 欣 赏 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 1 1.html, 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 : 实 训 一 实 训 一 制 作 诗 词 欣 赏 页 面 1.1 实 训 目 标 了 解 HTML 网 页 基 本 语 法 和 结 构 了 解 HTML 基 本 元 素 掌 握 对 网 页 中 文 字 格 式 化 的 方 法 掌 握 对 网 页 中 段 落 格 式 化 的 方 法 1.2 实 训 内 容 文 字 是 网 页 的 基 础 部 分, 具 体 内 容 包 括 浏 览 器 中 要 显 示 的

More information

<4D6963726F736F667420576F7264202D20D6D0CEC4B7A88C57B454CABF8C57CEBBD593CEC4D28EB9A0>

<4D6963726F736F667420576F7264202D20D6D0CEC4B7A88C57B454CABF8C57CEBBD593CEC4D28EB9A0> 澳 門 大 學 法 學 院 中 文 法 學 碩 士 學 位 論 文 規 範 一 適 用 範 圍 ( 一 ) 中 文 法 學 碩 士 學 位 論 文 是 中 文 法 學 碩 士 學 位 研 究 生 在 指 導 教 師 的 指 導 下 獨 立 完 成 的, 合 乎 嚴 格 的 寫 作 規 範 並 標 誌 著 獲 得 法 學 碩 士 學 位 的 一 篇 書 面 作 品 中 文 法 學 碩 士 研 究 生

More information

WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic pe

WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic pe WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic personal publishing platform aesthetics web standards

More information

Microsoft Word - 改版式网页全文.doc

Microsoft Word - 改版式网页全文.doc 第 4 章 Dreamweaver CS3 高 级 篇 4.1 表 单 概 述 表 单 是 用 来 收 集 浏 览 者 的 用 户 名 密 码 E-mail 地 址 个 人 爱 好 和 联 系 地 址 等 用 户 信 息 的 输 入 区 域 集 合 浏 览 者 填 写 表 单 的 方 式 一 般 是 输 入 文 本 选 择 单 选 按 钮 或 复 选 框 以 及 从 下 拉 列 表 框 中 选 择

More information

week06.key

week06.key 基礎網 頁設計 第六週 老師 : 蔡孟珂 大綱 HTML 標籤屬性 DOM(Document Object Model) 文件物件模型 樹的概念 CSS 撰寫與常 用語法 HTML 標籤屬性 id 唯 一值 同 一份 html 中, 標籤裡不能有重複的 id 名稱 頁底資訊 1 連結

More information

CSS样式表

CSS样式表 CSS 样 式 表 教 学 重 点 : CSS 样 式 表 基 础 知 识 CSS 样 式 的 分 类 CSS 样 式 的 链 接 添 加 CSS 样 式 的 其 它 相 关 知 识 教 学 难 点 : 如 上 一.CSS 样 式 表 基 础 Css 和 HTML 都 是 一 种 标 示 语 言 Html 用 来 表 现 网 页 文 件 的 内 容 和 结 构, 而 CSS 来 决 定 用 什 么

More information

幻灯片 1

幻灯片 1 第 3 讲 CSS 层叠样式表 信息学院孙辉 内容概要 CSS 的概念与实例 CSS 基本语法 选择器 样式 CSS 深入 CSS 的概念 层叠样式表 定义如何显示 HTML 元素, 样式通常存储在样式表中 解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 CSS 实例 1 CSS 实例 2 内容概要 CSS 的概念与实例 CSS 基本语法 选择器 样式

More information

ebook37-4

ebook37-4 4 4.1 H T M L F r o n t P a g e i m a g e m a p H T M L We b We b 4.1.1 We b We b We b We b 4.1.2 We b 4 35 4.1.3 4-1 G I F 4-2 36 4-1 ( 4-2 ) 4.1.4 We b We b 4-3 4-3 4 37 Ly n x 4-4 4-4 4.1.5 We b We

More information

CSS教學

CSS教學 講師 : 張秀山 CSS 說明 CSS 是 Cascading Style Sheets 的縮寫,Cascading 是串接 連接之意 ;Style 則是風格 款式之意 ; Sheets 則是一頁紙 表的意思 所以呢, 要以中文來解釋 CSS 的話呢, 您可以稱之為 串接樣式表 CSS 放在那裡? 網頁內 CSS 語法放在 之間! CSS 放在那裡?css 檔案 寫在一個

More information

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5

More information

coverage2.ppt

coverage2.ppt Satellite Tool Kit STK/Coverage STK 82 0715 010-68745117 1 Coverage Definition Figure of Merit 2 STK Basic Grid Assets Interval Description 3 Grid Global Latitude Bounds Longitude Lines Custom Regions

More information

PowerPoint 演示文稿

PowerPoint 演示文稿 Lecture 03 DIV + CSS United, Clear, and Simple Web Arts #3 - CSS By Yanju Chen Document Type 文档类型 When creating an HTLM Document in Dreamweaver, we will find the following statement added automatically:

More information

ebook111-4

ebook111-4 Flash 4 Flash 4 F l a s h 5 Flash 4 Flash Flash 4 Flash 4 Flash 4 4.1 Flash 4 Flash 4 Flash 4 Flash Flash 4 Flash 4 4.2 Flash 4 Flash 4 A Flash 4 S h i f t F i l e P r e f e r e n c e s > > Flash 4 Flash

More information

Epson

Epson NPD5660-00 TC 1 BarCode Fonts ( Windows)... 4.... 5 BarCode Fonts... 5 BarCode Fonts.... 6 BarCode Fonts.... 8.... 18 PCL.... 18 ESC/P 2 FX.... 20 I239X.... 21 PS 3.... 21.... 22.... 23.... 23 2.... 24

More information

2. 使用层叠 当有多个样式表时, 有一个层次来定义将这些样式表应用到 (X)HTML 的顺序 同时, 针对不同的应用方法, 同样存在一个顺序, 这个顺序就是 层叠 下 : 对于应用 CSS 的不同方法 内联 内嵌 外部和导入, 其层叠顺序描述如 浏览器首先执行内联规则, 然后执行所有的内嵌规则,

2. 使用层叠 当有多个样式表时, 有一个层次来定义将这些样式表应用到 (X)HTML 的顺序 同时, 针对不同的应用方法, 同样存在一个顺序, 这个顺序就是 层叠 下 : 对于应用 CSS 的不同方法 内联 内嵌 外部和导入, 其层叠顺序描述如 浏览器首先执行内联规则, 然后执行所有的内嵌规则, 2. 使用层叠 当有多个样式表时, 有一个层次来定义将这些样式表应用到 (X)HTML 的顺序 同时, 针对不同的应用方法, 同样存在一个顺序, 这个顺序就是 层叠 下 : 对于应用 CSS 的不同方法 内联 内嵌 外部和导入, 其层叠顺序描述如 浏览器首先执行内联规则, 然后执行所有的内嵌规则, 最后再查找外部文件 来完全理解所创建的 CSS 另外一种层叠的方法是使用多个外部样式表,eg.

More information

12-2 プレート境界深部すべりに係る諸現象の全体像

12-2 プレート境界深部すべりに係る諸現象の全体像 - 452 - - 453 - - 454 - - 455 - - 456 - Table 1 Comparison of phenomena associated with slip event at deep portion along the plate interface. - 457 - ECMJMA LFE 3 8 29 31 3 2-16Hz ECM Fig.1 Comparison

More information

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript

More information

Epson

Epson WH / MS CMP0087-00 TC WH/MS EPSON EPSON EXCEED YOUR VISION EXCEED YOUR VISION Seiko Corporation Microsoft and Windows are registered trademarks of Microsoft Corporation. Mac and Mac OS are registered trademarks

More information

CA-C750К

CA-C750К 1 3 3 4 PC 4 USB 5 5 6 8 9 11 mediasync Manager?...13 mediasync Manager 15 25 38 39 41 41 DRM...44 Image Manager...44 47 49 49 50 50 51 51 51 52 / 52 A-B 53 MP3 53 /FM 54 FM 55 FM 55 BMP56 56 57 57 58

More information

投影片 1

投影片 1 CSS 的運用 Speaker:Kevin Yang Date:2007/3/10 何謂 CSS CSS 的全名是 Cascading Style Sheets( 串接樣式表 ) CSS 是用來延伸 html 而非取代 htnl, 是用來補 html 的不足 CSS 的特點 加快網頁傳輸的速度 : 減少圖檔的使用, 便可以達到文字變化的需求 集中管理樣式 : 當修改時只需針對樣式修改即可 共享樣式設定

More information

影視後製全攻略 Premiere Pro After Effects Encore 自序 Adobe Premiere Pro After Effects Encore 2008 Adobe CS Adobe CS5 Adobe CS4 Premiere Pro After Effect

影視後製全攻略 Premiere Pro After Effects Encore 自序 Adobe Premiere Pro After Effects Encore 2008 Adobe CS Adobe CS5 Adobe CS4 Premiere Pro After Effect 自序 Adobe Premiere Pro After Effects Encore 2008 Adobe CS3 2010 Adobe CS5 Adobe CS4 Premiere Pro After Effects Encore 18 ii Tony Cathy 2010/8 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 iii Premiere

More information

Preface This guide is intended to standardize the use of the WeChat brand and ensure the brand's integrity and consistency. The guide applies to all d

Preface This guide is intended to standardize the use of the WeChat brand and ensure the brand's integrity and consistency. The guide applies to all d WeChat Search Visual Identity Guidelines WEDESIGN 2018. 04 Preface This guide is intended to standardize the use of the WeChat brand and ensure the brand's integrity and consistency. The guide applies

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Perl CGI 1 Perl CGI 2 Perl CGI 3 Perl CGI 4 1. 2. 1. #!/usr/local/bin/perl 2. print "Content-type: text/html n n"; 3. print " n"; 4. print " n"; 3. 4.

More information

基于UML建模的管理管理信息系统项目案例导航——VB篇

基于UML建模的管理管理信息系统项目案例导航——VB篇 PowerBuilder 8.0 PowerBuilder 8.0 12 PowerBuilder 8.0 PowerScript PowerBuilder CIP PowerBuilder 8.0 /. 2004 21 ISBN 7-03-014600-X.P.. -,PowerBuilder 8.0 - -.TP311.56 CIP 2004 117494 / / 16 100717 http://www.sciencep.com

More information

Text 文字输入功能 , 使用者可自行定义文字 高度, 旋转角度 , 行距 , 字间距离 和 倾斜角度。

Text 文字输入功能 , 使用者可自行定义文字  高度, 旋转角度 , 行距 , 字间距离 和 倾斜角度。 GerbTool Wise Software Solution, Inc. File New OPEN CLOSE Merge SAVE SAVE AS Page Setup Print Print PreView Print setup (,, IMPORT Gerber Wizard Gerber,Aperture Gerber Gerber, RS-274-D, RS-274-X, Fire9000

More information

2 SGML, XML Document Traditional WYSIWYG Document Content Presentation Content Presentation Structure Structure? XML/SGML 3 2 SGML SGML Standard Gener

2 SGML, XML Document Traditional WYSIWYG Document Content Presentation Content Presentation Structure Structure? XML/SGML 3 2 SGML SGML Standard Gener SGML HTML XML 1 SGML XML Extensible Markup Language XML SGML Standard Generalized Markup Language, ISO 8879, SGML HTML ( Hypertext Markup Language HTML) (Markup Language) (Tag) < > Markup (ISO) 1986 SGML

More information

Microsoft Word - Ch06.docx

Microsoft Word - Ch06.docx Chapter 6-1 6-2 6-2 l ASP.NET 6-1 (theme) ASP.NET (skin).skin ButtonLabelHyperLink (cascading style sheet).css TreeView 1. 2. (page theme) (global theme) IIS l 6-3 6-1-1 (page theme) (global theme) App_Themes

More information

Microsoft Word - 最新正文.doc

Microsoft Word - 最新正文.doc 2 2 Web 2.0 Ajax StarTrackr! GPS RFID jquery JavaScript StarTrackr! JavaScript jquery 1 jquery jquery jquery JavaScript HTML jquery JavaScript jquery jquery jquery $(document).ready()! jquery jquery (document)

More information

lnag_ch_v2.01.doc

lnag_ch_v2.01.doc 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. % Any line starting with "%" is a comment. % "\" (backslash) is a special Latex character which introduces a Latex %

More information

06 01 action JavaScript action jquery jquery AJAX CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS b

06 01 action JavaScript action jquery jquery AJAX CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS b 06 01 action JavaScript action jquery jquery AJAX 04 4-1 CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS background-color camel-cased DOM backgroundcolor.css()

More information

Bus Hound 5

Bus Hound 5 Bus Hound 5.0 ( 1.0) 21IC 2007 7 BusHound perisoft PC hound Bus Hound 6.0 5.0 5.0 Bus Hound, IDE SCSI USB 1394 DVD Windows9X,WindowsMe,NT4.0,2000,2003,XP XP IRP Html ZIP SCSI sense USB Bus Hound 1 Bus

More information

RUN_PC連載_10_.doc

RUN_PC連載_10_.doc PowerBuilder 8 (10) Jaguar CTS ASP Jaguar CTS PowerDynamo Jaguar CTS Microsoft ASP (Active Server Pages) ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar Server ASP

More information

CSS

CSS CSS 吳錦昂老師整理 CSS 是什麼 CSS 的全名為 Cascading Style Sheets W3C 所制訂的標準 可以將資料層及顯示層分開 HTML 文件就只包括資料 ( 資料層 ) CSS 則是告訴瀏覽器這些資料應該要如何顯現出來 ( 顯示層 ) 目的是為了對標記語言例如 XHTML 及 HTML 之類的提供一個顯示層 學會 CSS 可以自由的變化自己部落格的樣式 CSS 語法 選擇器

More information

XP11067_內文.pdf

XP11067_內文.pdf Adobe Flash Steve Jobs 2010 ios Flash http://www.apple.com/ hotnews/thoughts-on-flash/ ios Flash ios HTML5 NimbleKit ipad HTML5 HTML5 NimbleKit Objective-C iphone ipod touch HTML5 ipad iphone ipod touch

More information

1. 2. Flex Adobe 3.

1. 2. Flex Adobe 3. 1. 2. Flex Adobe 3. Flex Adobe Flex Flex Web Flex Flex Flex Adobe Flash Player 9 /rich Internet applications/ria Flex 1. 2. 3. 4. 5. 6. SWF Flash Player Flex 1. Flex framework Adobe Flex 2 framework RIA

More information

付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探

付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探 付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探索建设中 成时间 : 2017-07-20 12:13:21 Since 8.6 定义键盘 定义键盘使

More information

Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发 第3章.doc

Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发 第3章.doc 第 3 章 3.1 CSS 背景及特点 CSS 指层叠样式表 (Cascading Style Sheets), 它是继 HTML 语言之后诞生的前端样式语言 起初,HTML 因为控制的样式字体等前端文字样式过于繁琐复杂, 从而造成它的可维护性极低 为了解决这个问题,CSS 诞生了 3.1.1 CSS 背景 HTML 标签原本是用于定义文档内容 起初, 通过使用 这样的标签,HTML

More information

COCO18-DensePose-BUPT-PRIV

COCO18-DensePose-BUPT-PRIV * Beijing University of Posts and Telecommunications (BUPT) COCO 2018 DensePose Test AP AP50 AP75 APm APl BUPT-PRIV (Ours) 64 92 75 57 67 PlumSix 58 89 66 50 61 ML_Lab 57 89 64 51 59 Sound of silent 57

More information

(Guangzhou) AIT Co, Ltd V 110V [ ]! 2

(Guangzhou) AIT Co, Ltd V 110V [ ]! 2 (Guangzhou) AIT Co, Ltd 020-84106666 020-84106688 http://wwwlenxcn Xi III Zebra XI III 1 (Guangzhou) AIT Co, Ltd 020-84106666 020-84106688 http://wwwlenxcn 230V 110V [ ]! 2 (Guangzhou) AIT Co, Ltd 020-84106666

More information

(CIP) Web /,. :,2005. 1 ISBN 7 81058 782 X.W............T P393.4 CIP (2004) 118797 Web ( 99 200436) ( http:/ / www.shangdapress.com 66135110) : * 787

(CIP) Web /,. :,2005. 1 ISBN 7 81058 782 X.W............T P393.4 CIP (2004) 118797 Web ( 99 200436) ( http:/ / www.shangdapress.com 66135110) : * 787 Web (CIP) Web /,. :,2005. 1 ISBN 7 81058 782 X.W............T P393.4 CIP (2004) 118797 Web ( 99 200436) ( http:/ / www.shangdapress.com 66135110) : * 787 1092 1/ 16 30.75 748 2005 1 1 2005 1 1 : 1 3 100

More information

Microsoft PowerPoint - ch16_1.ppt

Microsoft PowerPoint - ch16_1.ppt CSS 16-1 認識 CSS CSS (Cascading Style Sheets, 串接樣式表 ) 是由 W3C 所提出, 主要的用途是控制網頁的外觀 最早的版本是 W3C 於 1996 年公布的 CSS 1, 接著 W3C 於 1998 年公布 CSS 2, 之後 W3C 於 2002 年公布 CSS 2.1 如果您想進一步瞭解 CSS, 可以參考 W3C 的 CSS 首頁 http://www.w3.org/style/css/

More information

第一章

第一章 第 二 章 建 築 研 究 與 分 析 第 二 章 建 築 研 究 與 分 析 第 一 節 清 代 科 舉 與 考 棚 建 築 一 科 舉 與 貢 院 建 築 清 代 政 府 拔 取 人 才, 大 體 延 續 明 代, 但 也 有 改 進 之 處, 例 如 詔 舉, 由 皇 帝 下 詔 徵 取 人 才 為 國 家 所 用, 有 博 學 鴻 詞 孝 廉 方 正 直 言 山 林 隱 逸 孝 子 等 科

More information

Epson

Epson NPD5126-00 TC 1 Epson BarCode Fonts ( Windows)... 5.... 6 Epson BarCode Fonts... 6 Epson BarCode Fonts.... 7 Epson BarCode Fonts.... 9.... 19 PCL.... 19 ESC/P 2 FX.... 21 I239X.... 22 PS 3.... 22.... 24....

More information

衛星影像分類

衛星影像分類 年 理 理 立 立 列 SPOT 立 年 理 2 , 量 不 料 -Raster 量,, -Vector? 立 年 理 3 料 (Binary Data) 省 理 率 料來 CCD (Charge Couple Device) (Scanner) 數, 數 錄? 立 年 理 4 :Picture Element or Pixel : 不 不 狀 X,Y Column,Row Sample,Line

More information

VB程序设计教程

VB程序设计教程 高 等 学 校 教 材 Visual Basic 程 序 设 计 教 程 魏 东 平 郑 立 垠 梁 玉 环 石 油 大 学 出 版 社 内 容 提 要 本 书 是 按 高 等 学 校 计 算 机 程 序 设 计 课 程 教 学 大 纲 编 写 的 大 学 教 材, 主 要 包 括 VB 基 础 知 识 常 用 程 序 结 构 和 算 法 Windows 用 户 界 面 设 计 基 础 文 件 处

More information

C/C++程序设计 - 字符串与格式化输入/输出

C/C++程序设计 - 字符串与格式化输入/输出 C/C++ / Table of contents 1. 2. 3. 4. 1 i # include # include // density of human body : 1. 04 e3 kg / m ^3 # define DENSITY 1. 04 e3 int main ( void ) { float weight, volume ; int

More information

4.5 页 面 主 体 元 素 的 样 式 属 性 页 面 主 体 元 素 的 样 式 属 性 用 来 给 页 面 内 容 定 义 级 联 样 式 表, 其 中 包 括 style 属 性 和 class 属 性 4.6 背 景 音 乐 的 使 用 页 面 中 添 加 背 景 音 乐 的 元 素 是

4.5 页 面 主 体 元 素 的 样 式 属 性 页 面 主 体 元 素 的 样 式 属 性 用 来 给 页 面 内 容 定 义 级 联 样 式 表, 其 中 包 括 style 属 性 和 class 属 性 4.6 背 景 音 乐 的 使 用 页 面 中 添 加 背 景 音 乐 的 元 素 是 精 选 HTML 属 性 麦 田 技 术 博 客 http://itmyhome.com 第 四 章 页 面 主 体 元 素 4.1 页 面 主 体 元 素 背 景 图 片 属 性 背 景 颜 色 属 性 标 题 属 性 左 边 界 属 性 上 边 界 属 性 background bgcolor title leftmargin topmargin 4.2 页 面 主 体 元 素 的

More information

簡報技巧

簡報技巧 2 Q & A 4 7 Presenter Audienc e 7 10 / 11 7 / 11 / 7 55 11 / 7 55 38 11 12 13 14 Q & A 1. : 1. : 1. : / 5W Who What When Where Why 1. : / 5W Who What When 5W2H How to do How much Where Why 1.

More information

XML/DTD (1) XML (Markup) SGML HTML XML XML XML 2004/7/ All Rights Reserved 2

XML/DTD (1) XML (Markup) SGML HTML XML XML XML 2004/7/ All Rights Reserved 2 XML/DTD (1) XML (Markup) SGML HTML XML XML XML 2004 All Rights Reserved 2 SGML Standard Generalized Markup Language ( ) XML Extensible Markup Language HTML HyperText Markup Language 2004 All Rights Reserved

More information

TX-NR3030_BAS_Cs_ indd

TX-NR3030_BAS_Cs_ indd TX-NR3030 http://www.onkyo.com/manual/txnr3030/adv/cs.html Cs 1 2 3 Speaker Cable 2 HDMI OUT HDMI IN HDMI OUT HDMI OUT HDMI OUT HDMI OUT 1 DIGITAL OPTICAL OUT AUDIO OUT TV 3 1 5 4 6 1 2 3 3 2 2 4 3 2 5

More information

cover1-4.ai

cover1-4.ai 求 职 指 南 101 Job Seeking 101 理 想 的 职 业 步 步 为 营 理 想 的 职 业 步 步 为 营 求 职 及 职 业 转 换 是 一 个 很 艰 辛 的 过 程 本 指 南 的 宗 旨 正 是 为 您 提 供 求 职 和 职 业 转 换 的 建 议 和 工 具, 帮 助 您 更 快 更 好 地 找 到 适 合 自 己 的 工 作 这 本 指 南 的 每 一 个 章 节

More information

fi-4990c

fi-4990c C150-E192-01ZH fi-4990c fi-4990c 01 No. C150-E192-01ZH Le pésent appareil numérique n ément pas de bruits radioélectriques dépassant les limites applicables aux appareils numériques de la classe A prescridtes

More information

领导,我不想写CSS代码.key

领导,我不想写CSS代码.key 领导 我不想写 CSS 张鑫旭 25MIN 2018-03-31 YUEWEN USER EXPERIENCE DESIGN 01 1 YUEWEN USER EXPERIENCE DESIGN 砖家 02 CSS - 艺术家 YUEWEN USER EXPERIENCE DESIGN 03 CSS - 砖家 艺术家 YUEWEN USER EXPERIENCE DESIGN 04 领导, 我不想写

More information

Improved Preimage Attacks on AES-like Hash Functions: Applications to Whirlpool and Grøstl

Improved Preimage Attacks on AES-like Hash Functions: Applications to Whirlpool and Grøstl SKLOIS (Pseudo) Preimage Attack on Reduced-Round Grøstl Hash Function and Others Shuang Wu, Dengguo Feng, Wenling Wu, Jian Guo, Le Dong, Jian Zou March 20, 2012 Institute. of Software, Chinese Academy

More information

区 域 活 动 进 入 中 班 我 们 区 域 的 设 置 和 活 动 材 料 都 有 所 变 化, 同 时 也 吸 引 孩 子 们 积 极 的 参 与 学 习 操 作 区 的 新 材 料 他 们 最 喜 欢, 孩 子 们 用 立 方 块 进 行 推 理 操 作 用 扑 克 牌 进 行 接 龙 游

区 域 活 动 进 入 中 班 我 们 区 域 的 设 置 和 活 动 材 料 都 有 所 变 化, 同 时 也 吸 引 孩 子 们 积 极 的 参 与 学 习 操 作 区 的 新 材 料 他 们 最 喜 欢, 孩 子 们 用 立 方 块 进 行 推 理 操 作 用 扑 克 牌 进 行 接 龙 游 日 常 生 活 本 月 我 们 日 常 生 活 活 动 的 重 点 :1. 让 孩 子 养 成 良 好 的 生 活 习 惯, 注 重 生 活 细 节 如 : 在 换 好 鞋 子 后 能 将 鞋 子 整 齐 的 摆 放 进 鞋 架 坐 在 椅 子 上 换 鞋 正 确 的 收 放 椅 子 等 2 让 孩 子 有 自 我 照 顾 的 意 识 如, 让 孩 子 感 受 自 己 的 冷 热 并 告 知 老 师,

More information

Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005

Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005 Photoshop / Illustrator Q&A STEP STEP CHECK Point Column 004 Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005 Chapter 01 CS5 CS6 CC 01 CMYK97 130px STEP_01 Adobe Illustrator

More information

untitled

untitled .Net ADF ArcGIS Server ESRI ( ) .NET (ADF.NET) ADF.NET Web Controls Demo .NET (ADF.NET) ADF.NET ArcGIS Web C# and VB.NET Web Server Page Layout, Map, TOC, Overview Map ArcGIS Server.NET ? GIS web ArcGIS

More information

Business Objects 5.1 Windows BusinessObjects 1

Business Objects 5.1 Windows BusinessObjects 1 Business Objects 5.1 Windows BusinessObjects 1 BusinessObjects 2 BusinessObjects BusinessObjects BusinessObjects Windows95/98/NT BusinessObjects Windows BusinessObjects BusinessObjects BusinessObjects

More information

C/C++ - 字符输入输出和字符确认

C/C++ - 字符输入输出和字符确认 C/C++ Table of contents 1. 2. getchar() putchar() 3. (Buffer) 4. 5. 6. 7. 8. 1 2 3 1 // pseudo code 2 read a character 3 while there is more input 4 increment character count 5 if a line has been read,

More information

User ID 150 Password - User ID 150 Password Mon- Cam-- Invalid Terminal Mode No User Terminal Mode No User Mon- Cam-- 2

User ID 150 Password - User ID 150 Password Mon- Cam-- Invalid Terminal Mode No User Terminal Mode No User Mon- Cam-- 2 Terminal Mode No User User ID 150 Password - User ID 150 Password Mon- Cam-- Invalid Terminal Mode No User Terminal Mode No User Mon- Cam-- 2 Mon1 Cam-- Mon- Cam-- Prohibited M04 Mon1 Cam03 Mon1 Cam03

More information

States and capital package

States and capital package : 1 Students are required to know 50 states and capitals and their geological locations. This is an independent working packet to learn about 50 states and capital. Students are asked to fulfill 4 activities

More information

1 1 大概思路 创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由 编写 Jquery EasyUI 界面 运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->

1 1 大概思路 创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由 编写 Jquery EasyUI 界面 运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 -> 目录 1 大概思路... 1 2 创建 WebAPI... 1 3 创建 CrossMainController 并编写... 1 4 Nuget 安装 microsoft.aspnet.webapi.cors... 4 5 跨域设置路由... 4 6 编写 Jquery EasyUI 界面... 5 7 运行效果... 7 8 总结... 7 1 1 大概思路 创建 WebAPI 创建 CrossMainController

More information

Microsoft Word - Lab3.doc

Microsoft Word - Lab3.doc Web 应用基础 Lab 3: CSS 层叠样式表 2009.3.6 准备知识 1 对文档应用样式 样式可以通过多种方式指定 样式可以位于 HTML 的 标签中, 也可以存放在外部的 CSS 文件中 一个 HTML 可以链接多个外部的样式表 当对于一个 HTML 元素通过多种方式指定了多个重复样式的时候, 最终那一种会生效呢? 例如我们在多个样式表中对 元素定义了不同背景色,

More information

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue010101.html vue010104.html vue0101 01 04 Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code https://code.visualstudio.com/ Chrome XAMP Visual Studio

More information

嘉義市政府暨附(所)屬機關電話禮貌測試實施要點

嘉義市政府暨附(所)屬機關電話禮貌測試實施要點 嘉 義 市 政 府 暨 所 屬 機 關 電 話 禮 貌 測 試 實 施 要 點 83 年 8 月 17 日 83 府 計 研 字 第 50337 號 函 頒 90 年 10 月 12 日 90 府 企 研 字 第 87210 號 修 訂 95 年 12 月 20 日 95 府 企 研 字 第 0950141214 號 函 修 訂 97 年 3 月 21 日 97 府 企 研 字 第 0970110046

More information

3. 必 需 的 文 件 此 套 表 格 包 含 必 填 的 申 请 表 和 其 它 表 格, 以 及 一 份 文 件 核 对 表 文 件 核 对 表 可 帮 你 明 确 哪 些 表 格 及 文 件 必 须 递 交, 以 及 可 能 适 用 的 特 殊 要 求 4. 如 何 递 交 申 请 请 将

3. 必 需 的 文 件 此 套 表 格 包 含 必 填 的 申 请 表 和 其 它 表 格, 以 及 一 份 文 件 核 对 表 文 件 核 对 表 可 帮 你 明 确 哪 些 表 格 及 文 件 必 须 递 交, 以 及 可 能 适 用 的 特 殊 要 求 4. 如 何 递 交 申 请 请 将 Visa Section Suite 668, East Tower Shanghai Centre 1376 Nanjing Xi Rd., Shanghai 200040 PRC 临 时 居 民 访 问 签 证 申 请 加 拿 大 总 领 事 馆, 上 海 加 拿 大 总 领 事 馆 签 证 处 南 京 西 路 1376 号 东 峰 668 室 中 国 上 海 200040 请 在 递 交 申

More information

Gerotor Motors Series Dimensions A,B C T L L G1/2 M G1/ A 4 C H4 E

Gerotor Motors Series Dimensions A,B C T L L G1/2 M G1/ A 4 C H4 E Gerotor Motors Series Size CC-A Flange Options-B Shaft Options-C Ports Features 0 0 5 5 1 0 1 0 3 3 0 0 SAE A 2 Bolt - (2) 4 Bolt Magneto (4) 4 Bolt Square (H4) 1.0" Keyed (C) 25mm Keyed (A) 1.0' 6T Spline

More information

jsj0.nps

jsj0.nps 第 3 章 Word 基 础 应 用 制 作 求 职 简 历 3 畅 1 求 职 简 历 案 例 分 析 本 章 以 制 作 求 职 简 历 为 例, 介 绍 Word 强 有 力 的 文 字 处 理 功 能, 包 括 Word 的 字 符 格 式 的 设 置 段 落 格 式 的 设 置 表 格 的 制 作 图 片 的 插 入 制 表 位 的 使 用 页 面 边 框 的 设 置 打 印 输 出 等

More information

RUN_PC連載_8_.doc

RUN_PC連載_8_.doc PowerBuilder 8 (8) Web DataWindow ( ) DataWindow Web DataWindow Web DataWindow Web DataWindow PowerDynamo Web DataWindow / Web DataWindow Web DataWindow Wizard Web DataWindow Web DataWindow DataWindow

More information

國立暨南國際大學圖書館

國立暨南國際大學圖書館 國 立 暨 南 國 際 大 學 圖 書 館 學 位 論 文 繳 交 注 意 事 項 本 校 畢 業 生 辦 理 畢 業 離 校 手 續 須 完 成 圖 書 館 相 關 作 業 程 序, 請 參 見 以 下 說 明 壹 離 校 程 序 說 明 01 貳 繳 交 論 文 說 明 03 參 轉 檔 注 意 事 項 及 操 作 09 肆 上 傳 檔 案 注 意 事 項 及 操 作 16 伍 紙 本 論 文

More information

计算机文化

计算机文化 1 Web 前端开发技术与实践 第 10 章 : 盒子模型 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科河南中医学院网络信息中心 2015.11 2 本章主要内容 盒子 盒子类型 盒子的属性 浏览器的盒子调试 3 1. 盒子 1.1 元素盒子 盒子是一个概念, 也可以说是容器, 可以在里面放置网页中需要显示的内容,

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验教学指导 实验七 :JQuery 实现网页动画 一 实验目的 1 理解 Web 交互的基本模式和概念 ; 2 掌握 Web 中 JavaScript 使用的基本方法 ; 3 了解 jquery 的特性及用法 ; 4 熟悉的 jquery 基本语法 ; 5 编写代码实现 jquery 的基本动画效果 二 实验环境 1 Windows XP/Windows Server 2003

More information

Important Notice SUNPLUS TECHNOLOGY CO. reserves the right to change this documentation without prior notice. Information provided by SUNPLUS TECHNOLO

Important Notice SUNPLUS TECHNOLOGY CO. reserves the right to change this documentation without prior notice. Information provided by SUNPLUS TECHNOLO Car DVD New GUI IR Flow User Manual V0.1 Jan 25, 2008 19, Innovation First Road Science Park Hsin-Chu Taiwan 300 R.O.C. Tel: 886-3-578-6005 Fax: 886-3-578-4418 Web: www.sunplus.com Important Notice SUNPLUS

More information

User's Guide

User's Guide CHI LBP5360 激 光 打 印 机 用 户 指 南 本 打 印 机 的 手 册 本 打 印 机 的 手 册 划 分 如 下 要 了 解 详 细 信 息, 请 查 阅 这 些 手 册 CD-ROM 标 记 此 符 号 的 指 南 是 PDF 手 册, 在 随 附 的 CD-ROM 中 包 含 这 种 格 式 的 手 册 安 装 连 接 计 算 机 基 本 操 作 故 障 排 除 设 置 用 于

More information

Microsoft Word - 《师范教育信息参考》 2011年第2期

Microsoft Word - 《师范教育信息参考》 2011年第2期 师 范 教 育 信 息 参 考 北 华 大 学 图 书 馆 参 考 咨 询 服 务 部 主 办 师 范 教 育 信 息 参 考 本 期 导 读 热 点 聚 焦 教 育 部 2011 年 工 作 要 点 ( 下 ) 温 总 理 在 东 北 师 大 免 费 师 范 生 来 信 上 作 出 重 要 批 示 首 届 免 费 师 范 生 全 部 到 中 小 学 任 教 教 育 基 础 道 德 : 通 往 幸

More information

MODEL COLOR LIST UZ125D2 YMW GRAY YNF RED YRG BLUE 30H WHITE

MODEL COLOR LIST UZ125D2 YMW GRAY YNF RED YRG BLUE 30H WHITE MODEL COLOR LIST UZ125D2 YMW GRAY YNF RED YRG BLUE 30H WHITE MODEL COLOR LIST UZ125D2K K13 BLACK YRG BLUE YPK WHITE MODEL COLOR LIST UZ125X2 G22 Q05 GRAY ORANGE GREEN WHITE N28 W08 PREFACE When it becomes

More information

Microsoft PowerPoint - ch6 [相容模式]

Microsoft PowerPoint - ch6 [相容模式] UiBinder wzyang@asia.edu.tw UiBinder Java GWT UiBinder XML UI i18n (widget) 1 2 UiBinder HelloWidget.ui.xml: UI HelloWidgetBinder HelloWidget.java XML UI Owner class ( Composite ) UI XML UiBinder: Owner

More information

OVLFx3C7_Series_A3_bgry-KB.pub

OVLFx3C7_Series_A3_bgry-KB.pub (5 mm) x High brightness with well-defined spatial radiation patterns x U-resistant epoxy lens x Blue, green, red, yellow Product Photo Here Each device in the OLFx3C7 series is a high-intensity LED mounted

More information

WinMDI 28

WinMDI 28 WinMDI WinMDI 2 Region Gate Marker Quadrant Excel FACScan IBM-PC MO WinMDI WinMDI IBM-PC Dr. Joseph Trotter the Scripps Research Institute WinMDI HP PC WinMDI WinMDI PC MS WORD, PowerPoint, Excel, LOTUS

More information

week04.key

week04.key 基礎網 頁設計 第四週 老師 : 蔡承洋 大綱 HTML 的圖片使 用 HTML5 播放 音樂 影片 網站加上 favicon DOM(Document Object Model) 文件物件模型 樹的概念念 開始來來寫 CSS CSS 常 用屬性 HTML 的圖片使 用 html 使 用 img 標籤顯 示圖片 圖片格式有 jpg : 不需 用到透明底, 檔案容量量 小 png: 可有透明底, 但檔案較

More information

接线端子--Connectors规格书.doc

接线端子--Connectors规格书.doc Connectors with/without wire protector high-temperature resistant* High grade flexible strips Resistant to temperature up to 100 C (to 140 C) Multiple approvals Raised base Available with or without wire

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验指导 : 实验八 : 下拉菜单 一 实验目的 1 掌握 CSS 动画 JS 动画和 jquery 动画的基本原理和基本方法 ; 2 掌握下拉菜单制作的基本原理; 3 理解技术多样性的概念 二 实验环境 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址 ; 3 支持互联网访问; 4 Adobe CS 6 组件支持

More information

Microsoft Word - template.doc

Microsoft Word - template.doc HGC efax Service User Guide I. Getting Started Page 1 II. Fax Forward Page 2 4 III. Web Viewing Page 5 7 IV. General Management Page 8 12 V. Help Desk Page 13 VI. Logout Page 13 Page 0 I. Getting Started

More information