东师 HTML5开发基础与应用带答案.docx

上传人：b****3 文档编号：4312755 上传时间：2022-11-29 格式：DOCX 页数：24 大小：344.18KB

下载相关举报

第1页 / 共24页

第2页 / 共24页

第3页 / 共24页

第4页 / 共24页

第5页 / 共24页

点击查看更多>>

下载资源

资源描述

东师 HTML5开发基础与应用带答案.docx

《东师 HTML5开发基础与应用带答案.docx》由会员分享，可在线阅读，更多相关《东师 HTML5开发基础与应用带答案.docx（24页珍藏版）》请在冰豆网上搜索。

东师 HTML5开发基础与应用带答案.docx

东师HTML5开发基础与应用带答案

要求：

在本文档中的题目下作答，提交本word文档即可。

新一轮的挑战开始啦~

在导航部位新添加一个照片墙超链接（见图一），点击进入新页面（见图二）。

大家要多加尝试练习，让你的页面更加丰富炫目。

做一个照片墙来回忆一下度过的美好时光。

任务：

在空白处补全代码，将照片列表中喜欢的照片拖放到心形当中，并且可以再次拖回照片列表，打造出一个完美的照片墙。

（图一）

（图二）

……此处省略N行代码……

functiondrag（ev）{

ev.dataTransfer.setData（“Text”,ev.target.id）;

ev.preventDefault（）;

}

functionallowDrop（ev）{

ev.preventDefault（）;

}

functiondrop（ev）{

vardata=ev.dataTransfer.getData（“Text”）;

ev.target.appendChild（document.getElementById（data））;

}

1.请在第一处横线上补充drag（ev）方法中的代码。

2.请在第二处横线上补充drop（ev）方法中的代码。

首页代码

（1）

DOCTYPEhtml>

Page1

$axure.utils.getTransparentGifPath=function（）{return'resources/images/transparent.gif';};

$axure.utils.getOtherPath=function（）{return'resources/Other.html';};

$axure.utils.getReloadPath=function（）{return'resources/reload.html';};

--Unnamed（矩形）-->

我的摄影相片

--Unnamed（矩形）-->

这是我们的导航区域

--Unnamed（矩形）-->

这是侧边

区域

--Unnamed（矩形）-->

这是我们主要内容区域

--Unnamed（矩形）-->

这是我们的低部区域

运行之后图

（1）

相片代码

（2）

DOCTYPEhtml>

页面1

$axure.utils.getTransparentGifPath=function（）{return'resources/images/transparent.gif';};

$axure.utils.getOtherPath=function（）{return'resources/Other.html';};

$axure.utils.getReloadPath=function（）{return'resources/reload.html';};

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visibility:

hidden">

--Unnamed（矩形）-->

none;visib

展开阅读全文