网页设计实验报告

内容发布更新时间 : 2024/5/19 16:13:07星期一 下面是文章的全部内容请认真阅读。

margin-left:185px;margin-top:23px;font:14px/35px \微软雅黑\.search-text{width:350px;height:25px;backgrond-color:#fff;padding:5px;} .search-btn{width:70px;height:35px; background-color:#F60;}

/*购物车*/

.shopCar{width:145px;height:35px;font-size:14px;font-family:\微软雅黑\.shopText{height:100%;width:87px;border-right:#e27a00 solid 1px;background:url(../image/gou.jpg) 10px center no-repeat;text-indent:40px;font:14px/35px \微软雅黑\

.shopc{width:56px; height:100%;background:url(../image/jianshu.jpg)33px center no-repeat ;text-align:left;font:14px/35px \微软雅黑\YaHei\text-indent:10px;}

/*导航*/

.navBox{height:35px;background-color:#1369c0;color:#FFF;clear:both}

.shopClass{width:190px;text-align:center;font:14px/35px \微软雅黑\YaHei\

.nav{height:35px;}

.nav li{float:left;padding:0 35px;}

.nav a{height:35px;display:inline-block;color:#FFF} .nav a:hover{color:#90C; }

/*小列表*/

.shopClass_box{background-color:#06F;} .shopClass_item{padding:10px 14px;}

2.2.2页面运行截图

实验四 网页程序设计

一、实验目的

通过几个实例练习,了解JavaScript、VBScript

在网页中的应用。

二、实验内容和操作步骤 1.显示一个动态的时钟

操作步骤:进入DW->新建一个页面->点击“HTML”。在指定位置输入以下代码可以实现一个动态的时钟。

在< body >和之间插入下列代码:

//定义时钟显示的函数

欢迎光临我的网站 现在是北京时间:

运行,可以看到浏览器显示如下:

2.鼠标事件和浏览器的提示栏及IF语句的运用 1)鼠标事件和浏览器的提示栏

在DW中的HTML代码中下输入以下源代码:当你把鼠标放在链接上时,看一下状态栏上显示的内容。

新建一个Html文件,运行,把鼠标移到上述链接后,就触发了onMouseOver事件,使得浏览器状态栏(window.status)的内容变成指定的文字了。

2)IF语句的运用

在网页的HTML代码中输入下面的源代码:

对象输入方法\可直接使用以下格式:alert(\窗口对

象输入方法\ 新建一个Html文件,运行,就会出现以下提示:

如果你选择“Y”(大写),则会出现(左图);如果你选择“N”,或是直接回车,则会出现(右图)

三.代码及其实验结果:

2.1设计一个动态的时钟 2.1.1主要代码截图

动态时钟

现在时间是:

2.1.2页面运行截图

2.2鼠标事件和浏览器的提示栏及IF语句的运用

2.2.1主要代码截图

鼠标事件

2.2.2页面运行截图

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4 ceshi