教程一
如果您是HTML的初学者,请您先自学HTML。因为DHTML是现有的HTML技术的一个综合,所以HTML语言对学习动态HTML是非常重要的。
自从HTML 4.0出现以后,引入了“层叠样式表”(CSS),于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计,并且使网页具有交互性。其实动态Html(DHtml)并不是一种专门的技术,而是Html技术的一个综合,说白了就是一种技巧,但往往是这样或那样的小技巧使我们的网页变得更加好看、实用。好了,废话少说,下面开始以实例来说明动态HTML在网页设计中的应用。
例1 使用<style>和</style>标志对修饰文本
<html> <head> <title>DHtml举例1</title> <style><!-- h2 {font-family:"宋体";font-size=12pt;text-align:center;color:blue} --> </style> </head> <body> <h2>被修饰文本</h2> </body> </html>
本例中,我们使用了<style>和</style>标志对来修饰文本,请留意蓝色字,<style>和</style>标志对是加在<head>和</head>标志对之间的,而加上<!--和-->是为了让不支持<style>和</style>标志对的浏览器跳过样式表,否则可能会出错。本例先对<h2></h2>标志对中的文本样式在<style>和</style>标志对中进行定义,于是在后边<h2></h2>中就依样式表定义的内容对文本进行修饰。font-family定义字体,font-size定义字体大小,text-align定义文本对齐方式,color定义前景颜色。
除此之外,我们还可以采用另一种方法来实现。请看下边的例子。
例2 直接用style属性修饰文本
<html> <head> <title>DHtml举例2</title> </head> <body> <h2style="font-family:'宋体';color:blue;font-size:12pt;text-align:center">被修饰文本</h2> </body> </html>
请务必注意font-family后是用单引号来定义字体的(font-family:'宋体')。好了,现在您已经初步掌握了样式单的用法了,现在我们开始让您的主页动起来,请看下边的例子。
例3 使用鼠标触发事件和动态样式表改变文本
<html> <head> <title>DHtml举例3</title> </head> <body> <h2onmouseover="this.style.textDecoration='underline'"onmouseout="this.style.textDecoration='underline'"style="font-size:12;text-align:center">请将鼠标移到上面!</h2> <br> <h3align="center"onmouseover="this.style.color='red'"onmouseout="this.style.color='green'">我是变色龙!</h3> </body> </html>
在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发,于是执行其后的style定义,此时文字下加了一条直线(this.style.textDecoration='underline'的作用),this用来指代当前的对象,即<h2></h2>标志对。当您把光标移开文字时onmouseout事件被触发,此时文字下的直线消失了(this.style.textDecoration='underline'的作用),这样网页就有了动态的效果。同理,我们可以通过触发鼠标事件来改变文本的颜色,如上例中的第二行黑体字所示。
再次提醒读者,在使用样式单的时候一定要注意格式。比如,在<style></style>标志对中进行样式单定义时应使用text-decoration:underline,而不是用textDecoration='underline'来修饰文本,后者是用于事件触发中的(如onmouseover或onmouseout事件)。许多CSS属性的名字中都有连字符(像text-decoration),但是连字符在许多脚本语言(如JavaScript)中是不合法的标识符,因此,在HTML或样式表中指明CSS属性的时候用连字符命名方式,但在作为一个脚本属性时,就必须去掉连字符,并将它后面的第一个字母大写。例如:
text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。
您可能想用鼠标点击文本来改变其的颜色,要做到这一点很简单,只要在onclick事件中定义样式即可,onclick的用法与onmouseover、onmouseout相似。请看下边的例子。
例4 使用onclick动态改变字体的颜色
<html> <head> <title>DHtml举例4</title> </head> <body> <h3align="center"onmouseover="this.style.color='red'"onmouseout="this.style.color='green'"onclick="this.style.color='blue'">我是变色龙!</h3> </body> </html>
在这一例子中,当您把鼠标移动到文字上时,文字颜色变为红色,当鼠标离开文字时,文字颜色变为绿色,当在文字上单击鼠标时,文字颜色变成了蓝色。
下面是我用样式单制作的一个自认为比较漂亮的Html文件。
例5 “轻松自学动态HTML”的图形标志
<html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"> <title>DHtml举例5</title> <style> <!-- body {font-family:"宋体";font-size:9pt;color:#00aaff} h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)} h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt} --> </style> </head> <bodybgcolor="#000000"> <br> <tablealign="center"border="0"width="27%"bgcolor="#000000"cellpadding="12"> <tr> <tdwidth="168"><h2class="top">轻 松 自 学 动 态 HTML</h2> <h2class="bottom"><spanstyle="font-size:50pt;color:lime"><i>t</i></span> each youself DHtml</h2> </td> </tr> </table> </body> </html>
例5的效果如下图,请注意例子中的蓝色部分,class属性是用来定义标志对使用的样式类,如<h2 class="top">……</h2>指定了 <h2></h2>标志对中使用样式类“top”,而“top”则是在<style></style>标志对中定义的。
OK,您会了吗?样式单就这么简单。
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
- 1尚硅谷前端学科全套视频[AVI][130.72GB]
- 2深入理解php:高级技巧、面向对象与核心技术(原书第3版) 【PDF】
- 3开发高质量PHP框架与应用的实际案例解析【PDF】
- 4响应式Web图形设计 ([美]Christopher Schmitt) 中文【PDF】
- 5响应式Web设计:HTML5和CSS3实践指南【PDF】
- 6响应式Web设计:HTML5和CSS3实战 第2版 (本·弗莱恩) 中文【PDF】
- 7Axure RP8 实战手册 网站和APP原型制作案例精粹(小楼一夜听春语) 试读版【PDF】【15.4MB】
- 8[马上学Android]安卓开发视频教程
- 9Android开发视频教程
- 10PHP100视频教程
- 1Java编程思想On Java 8[PDF][中文][英文][源码][15.31MB]
- 2PostgreSQL实战 (谭峰等著)【PDF】【221.29MB】
- 3【机器学习】菜菜的sklearn课堂(1-12全课)[PDF][源码][157.45MB]
- 4UNREAL ENGINE 4蓝图完全学习教程[PDF][66.67MB]
- 5加密与解密(第4版)[PDF][光盘源码][1.15GB]
- 6Qt 5.9 C++开发指南[PDF][276.26MB]
- 7Python数据分析与应用PPT、教案、实训数据、习题答案[PPT][142.49MB]
- 8数据中台:让数据用起来[PDF][12.80MB]
- 9计算机网络:自顶向下方法(第7版) 【PDF】【英文】【17.46MB】
- 10大话5G:走进万物互联新时代【PDF】【37.31MB】