Java Web应用开发技术与案例教程 张继军 第2章_静态网页开发技术新.pptVIP

2、利用CSS对网页文件ch02_zy_1.html（练习1）做如下设置： （1）h1标题字体颜色为白色、背景颜色为蓝色、居中、四个方向的填充值15px （2）使文字环绕在图片周围，图片边线：粗细1px,颜色#9999cc，虚线，与周围元素的边界5px （3）段落格式：字体大小12px，首行缩进两字符、行高1.5倍行距、填充值5px （4）消除网页内容与浏览器窗口边界间的空白、并设置背景色#ccccff （5）给两个段落加不同颜色的右边线：3px double red和3px double orange 3. 简单设计题 （1）在网页上显示当前时间（客户端机器），一秒刷新一次。 （2）延迟执行某段代码，如让网页3秒钟后转到网页。 （3）在网页上显示当前日期, 星期（客户端机器）。如果时间在6:00－12:00之间，输出“早上好”；如果时间在12:00－18:00，输出“下午好”；如果时间在18:00－24:00之间，输出“晚上好”；如果时间在0:00－6:00，输出“凌晨好”。 * 2.2.2 CSS常用属性 主要有字体属性、颜色属性、背景属性、文本段落属性等。 1. 字体属性 属性名 属性含义 属性值 font-family 字体 取值（如“宋体”） font-size: 字体大小（字号） 取值单位：pt（点数），例“12pt” font-style 字体风格 normal（普通，默认值），italic斜体，oblique中间状态 font-weight 字体加粗 normal（普通，默认值），bold（一般加粗），bolder（重加粗），lighter（轻加粗），number:100-900之间的加粗 font 字体复合属性 用来简化css代码，可以取值以上所有属性值，之间用空格分开 2．颜色和背景属性 属性名 属性含义 属性值 color 颜色 （颜色值是英文名称或16进制RGB值）例，red为#ff0000） background-color 背景颜色 同color属性 background-image 背景图像 none:不用背景；url：图像地址 background-position 背景图片位置 top，left，right，bottom，center等 background 背景复合属性 简化css代码，可取值以上所有属性值，之间用空格分开 3．文本段落属性 属性名 属性含义 属性值 text-decoration 文字修饰 none,underline:下划线,overline:上划线,line-through:删除线,blink：文字闪烁 vertical-align 垂直对齐 baseline:默认的垂直对齐方式，super文字的上标，sub文字的下标，top垂直靠上，text-top使元素和上级元素的字体向上对齐，middle垂直居中对齐，text-bottom使元素和上级元素的字体向下对齐 text-align 水平对齐 left,right,center,justify:两段对齐 text-indent 文本缩进 缩进值（长度或百分比 line-height 文本行高 行高值（长度，倍数，百分比） white-space 处理空白 normal将连续的多个空格合并,nowrap强制在同一行内显示所有文本，直到文本结束或者遇到br对象 2.2.3 案例——利用CCS对注册页面实现修饰 【例2-8】设计如图所示的注册网页，该页面没有修饰，不够美观，采用CCS修饰页面，重新设计页面。 【分析】 为了便于理解其设计过程，这里采用分两步实现，逐渐完善设计： 第1步：按所给出的原始界面，设计HTML文档：ch02_8_1_register.html； 第2步：设计CCS文档：ch02_8_Css.css，在该文档中包含所需要的格式控制，从而形成修饰后的页面。 第3步：利用ch02_8_Css.css中定义的样式，重新设计ch02_8_1_register.html，形成新网页ch02_8_2_registerCss.html。 【实现】实现步骤及其源代码如下。 2.3 JavaScript脚本语言 JavaScript是一种脚本语言，可以在浏览器中直接运行，是一种在浏览器端实现网页与客户交互的技术。 JavaScript代码可以直接嵌套在HTML网页中，它响应一系列的事件，当一个JavaScript函数响应的动作发生时，浏览器就执行对应的JavaScript代码。 本节主要内容： 2.3.1 JavaScript的基本语法 2.3.2 JavaScript的事件 2.3.3 JavaScript