admin 管理员组

文章数量: 894082

项目1 设计简易灯箱画廊 实训要求: (1)利用超链接和图像标记设计简易灯箱画廊。 (2)给简易灯箱画廊增加背景音乐效果。

html5

项目1 设计简易灯箱画廊 实训要求:
(1)利用超链接和图像标记设计简易灯箱画廊。
(2)给简易灯箱画廊增加背景音乐效果。``

知识点

(1)超链接标记

  <a href="" title="" target="">链接内容</a>

(2)图像img标记

<img src="url" width="" height="" alt="" vspace="" hspace="" border="" align="">

(3)使用embed标记播放背景音乐

<embed src="tree/Sleep Away,mp3" loop="true" autostart="true" widtd="0" height="0"></embed>

部分HB内置浏览器会崩溃,建议使用谷歌浏览。

(4)浮动框架iframe标记

<iframe scr="" name="iframe" width="500px" height="300px"></iframe>

实例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset="utf-8"><title>简易灯箱画廊</title><style type = "text/css">body{text-align: center;}.div1{width: 900px;height: 500px;margin: 0px;text-align: center;background-color: white;}ul{margin-left: 45%;width: 1000px;list-style-type: none;height: 900px;}li{float: left;width: 200px;height: 200px;margin: 60px;}img{border: 0;width: 300px;height: 300px;}h3{font-size:24px;padding: 10px auto;color:red;}/*超链接a伪类样式*/a{color: #ffffff;text-decoration: none;}a:link,a:visited,a:active{color:#0033cc;} a:hover{border-bottom: 4px solid #FF0000} 	/*鼠标悬停时有红色的底边线出现*/</style></head><body><h3 style="color: blue;text-align:center;">3图画廊设计</h3>	<audio autoplay="" loop=""><source src="../mp3/3.mp3"></audio><div class="div1" id=""><ul><li><a href="1.jpg" target="_top"><br><img src="../img/1.jpg"/></a></li><li><a href="bgimags.jpg" target="_top"><br><img src="../img/bgimags.jpg"/></a></li><li><a href="ddd.jpg" target="_top"><br><img src="../img/ddd.jpg"/></a></li></ul></div></body>
</html>

本文标签: 项目1 设计简易灯箱画廊 实训要求(1)利用超链接和图像标记设计简易灯箱画廊 (2)给简易灯箱画廊增加背景音乐效果