【Web前端基础】实验4 图像与多媒体文件

最新推荐文章于 2022-10-02 17:11:45 发布

Lailalalala

最新推荐文章于 2022-10-02 17:11:45 发布

阅读量3.9k

点赞数 15

分类专栏： Web前端基础文章标签：前端 html

本文链接：https://blog.csdn.net/Lailalalala/article/details/126072186

版权

Web前端基础专栏收录该内容

9 篇文章 17 订阅

订阅专栏

项目1 设计简易灯箱画廊

页面效果图：

页面效果图

要求：

鼠标单击任一个图像超链接，在底部浮动框架中显示大图像。在trees文件夹中提供一个MP3文件和18个JPG文件，设计页面时可以使用。

HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简易灯箱画廊设计</title>
        <style title type ="text/css">
        h3{font-size:24px;color:white;padding:10px auto;}
        img{border:0;width:100px;height:80px;}
        ul{margin:0 auto;width:800px;list-style-type:none;height:120px;}
        li{float:left;width:100px;height:90px;margin:5px;}
            div{text-align:center;}
            </style>
    </head>
    <body bgcolor="#33cc99">
        <embed src="trees/Sleep Away.mp3" autostart="true" loop="true" width="0" height="0"></embed>
        <div class>
            <h3>简易灯箱画廊设计</h3>
            <hr size="2" color="red" width="100%"/>
            <ul>
                <li><a href="t1.jpg" target="iframe">T1<img src="t1.jpg"></a></li>
                <li><a href="t2.jpg" target="iframe">T2<img src="t2.jpg"></a></li>
                <li><a href="t3.jpg" target="iframe">T3<img src="t3.jpg"></a></li>
                <li><a href="t4.jpg" target="iframe">T4<img src="t4.jpg"></a></li>
                <li><a href="t5.jpg" target="iframe">T5<img src="t5.jpg"></a></li>
                <li><a href="t6.jpg" target="iframe">T6<img src="t6.jpg"></a></li>
            </ul>
            <iframe src="t1.jpg" name="iframe" width="800px" height="700px" frameborder="0"></iframe>
        
        </div>   
    </body>
</html>

项目2 设计支持音频、视频播放的网页

页面效果图：

页面效果图

要求：

音频、视频资源在embed子目录下。

文字材料：
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年。
我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。
转朱阁，抵绮户，照无眠。
不应有恨，何事偏向别时圆。
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。

HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多媒体及滚动字幕应用</title>
        <style title type ="text/css">
        /*h3{font-size:24px;color:white;padding:10px auto;}*/
        img{border:0;width:100px;height:80px;}
        ul{list-style-type:none ;}
        li{float:left;margin:20px;}
            div{text-align:center;}
            #div1{background:#a6d81d;height:250px;}
            marquee{font-size:16px;padding:4px auto;background-color: rgb(74, 133, 211);}
            </style>
    </head>
    <body>
        <div>
            <h1 align=center>明月几时有</h1>
            <hr size="1" color="#3300ff" width="100%">
            <font face="隶书" size="+1" color="#3300ff">明月几时有？把酒问青天。</font><br>
            <font face="隶书" size="+1" color="#3300ff">不知天上宫阙，今夕是何年。</font><br>
            <font face="隶书" size="+1" color="#3300ff">我欲乘风归去，又恐琼楼玉宇，</font><br>
            <font face="隶书" size="+1" color="#3300ff">高处不胜寒，起舞弄清影，何似在人间。 </font><br>
            <font face="隶书" size="+1" color="#3300ff">转朱阁，抵绮户，照无眠。</font><br>
            <font face="隶书" size="+1" color="#3300ff">不应有恨，何事偏向别时圆。</font><br>
            <font face="隶书" size="+1" color="#3300ff">人有悲欢离合，月有阴晴圆缺，此事古难全。</font><br>
            <font face="隶书" size="+1" color="#3300ff">但愿人长久，千里共婵娟。</font><br>
            <hr size="1" color="red" width="100%">

        </div>
        <div id="div1" class="">
            <ul>
            <li><embed src="embed\htmlexample.mpeg" width="300" height="200"; autostart="true" loop="true";></embed></li>
            <li><embed src="embed\蔡琴明月几时有.mp3" width="300" height="200"; autostart="true" loop="true";></embed></li>
            <li><embed src="embed\0303.swf" width="300" height="200"; autostart="true" loop="true";></embed></li>
       </ul> </div>
        <marquee direction="right" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">欢迎来到我的多媒体世界</marquee>
    </body>