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)给简易灯箱画廊增加背景音乐效果
版权声明:本文标题:项目1 设计简易灯箱画廊 实训要求:(1)利用超链接和图像标记设计简易灯箱画廊。 (2)给简易灯箱画廊增加背景音乐效果。 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1687603675h120084.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论