JavaScript（事件句柄）+CSS+HTML5实现页面布局设计

岁羽浴尘

已于 2022-12-03 15:46:00 修改

阅读量465

点赞数

文章标签： javascript 前端 css html5 html

于 2022-11-17 16:02:17 首次发布

本文链接：https://blog.csdn.net/weixin_64227570/article/details/127904861

版权

1.页面内容设计

body 标记中插人 div form、input、h3、hr 等标记，完成页面布局设计
①在body 中插人1个div,设置 id属性为mybody，分别给 onMouseOver、 onMouseOut、onClick、 onMouseDown 、onDblClick等事件句柄鄉定 __mover () mout( )、mclick()、mdown()、mdclick()__等事件处理程序。图层事件句柄与事件处理程序绑定的方法如下所示：
② 在 div中插人h3 标记，内容为“鼠标动作捕获与响应”，设置对齐属性为居中，
③ 在div 中插人 hr标记，设置颜色为白色、大小为 1px
④ 在div 中插人 form 标记，设置name属性为 form1,其他为默认设置
⑤ 在form 标记中插入单行文本输人框，设置 id 为mtext,用于放置鼠标状态信息
⑥ 在 div 中插入img 标记放置图片，设置src和id属性

2.表现设计

在 style标记中分别定义图层、表单及h3标记样式，样式定义如下所示
①定义form 标记样式。form 样式为文本居中对齐
②定义div 标记样式。div样式为宽度 400px,高度200px，,边界上下30px、左右自动，
背景颜色＃00CC99

3.定义javaScript 函数

在head 标记中插人 script 标记，在 script 标记中分别定义＄(id)、mover() 、mout()、mclick( )、mdown() ,mdclick等函数
注：获取页面对象的函数＄(id)，代码如下所示：
function $(id) {return document.getElementById(id);}

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//获取页面对象的函数
			function $(id) {
     return document.

最低0.47元/天解锁文章

岁羽浴尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
JavaScript（事件句柄）+CSS+HTML5实现页面布局设计

在head 标记中插人 script 标记，在 script 标记中分别定义＄(id)、mover() 、mout()、mclick( )、mdown() ,mdclick等函数注：获取页面对象的函数＄(id)，代码如下所示：}
复制链接

扫一扫