html+CSS部分基础运用7

项目1  设计简易灯箱画廊

1.实验所需素材

在trees文件夹中提供一个MP3文件和18个JPG文件，设计页面时可以使用。

2.编程实现简易灯箱画廊，鼠标单击任一个图像超链接，在底部浮动框架中显示大图像，效果如图4-1所示的页面。

图4-1 简易灯箱画廊

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

1.编程设计支持音视、视频播放的网页，效果如图4-2所示的页面。

图4-2 多媒体及滚动字幕网页设计效果

2.歌词内容如下：

明月几时有？把酒问青天。

        不知天上宫阙，今夕是何年。

        我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。

        转朱阁，抵绮户，照无眠。

        不应有恨，何事偏向别时圆。  

        人有悲欢离合，月有阴晴圆缺，此事古难全。

        但愿人长久，千里共婵娟。

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

项目1

<!-- prj_3_1.html  -->

<!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: 0 auto;

            text-align: center;

            background: #33cc99;

        }

        h3 {

            font-size: 24px;

            color: white;

            padding: 10px auto;

        }

        ul {

            margin: 0 auto;

            width: 800px;

            list-style-type: none;

            height: 120px;

        }

        li {

            float: left;

            width: 110px;

            height: 90px;

            margin: 5px;

        }

        img {

            border: 0;

            width: 100px;

            height: 80px;

        }

        a {

            color: #ffffff;

            text-decoration: none;

        }

        a:link,

        a:visited,

        a:active {

            color: #0033cc;

        }

        a:hover {

            border-bottom: 4px solid #FF0000;

        }

    </style>

</head>

<body>

<embed src="trees/Sleep Away.mp3" autostart="true" loop="true" width="0" height="0"></embed>

<div class="div1">

    <h3>简易灯箱画廊设计</h3>

    <hr color="red" size="3">

    <ul>

        <li><a href="trees/t1.jpg" target="iframe">T1<img src="trees/t1.jpg"></a></li>

        <li><a href="trees/t2.jpg" target="iframe">T2<img src="trees/t2.jpg"></a></li>

        <li><a href="trees/t3.jpg" target="iframe">T3<img src="trees/t3.jpg"></a></li>

        <li><a href="trees/t4.jpg" target="iframe">T4<img src="trees/t4.jpg"></a></li>

        <li><a href="trees/t5.jpg" target="iframe">T5<img src="trees/t5.jpg"></a></li>

    </ul>

    <iframe src="trees/t1.jpg" name="iframe" width="500px" height="300px" frameborder="0"<br>

    </iframe>

</div>

</body>

</html>

项目2

<!DOCTYPE html>

<html lang = "en">

<head>

    <meta charset="utf-8">

    <meta name="keywords" content="Web前端开发，网页设计">

    <title>多媒体</title>

    <style type = "text/css">

            @font-face {

                font-family: 'MyNewFont';

                src: url('font/1.TTF');

            }

            body{

                text-align: center;

            }

            .div1{

                height: 500px;

                text-align: left;

                background-color: #99cc00;

            }

            ul{

                list-style-type: none;

            }

            li{

                float: left;

                margin: 20px;

            }

            marquee{

                font-size: 16px;

                padding: 4px auto;

                background-color: blue

            }

        </style>

</head>

<body>

<h2 align="center">明月几时有</h2>

<hr size="3" color="blue">

<p >

    明月几时有？把酒问青天。<br>

    不知天上宫阙，今夕是何年。<br>

    我欲乘风归去，又恐琼楼玉宇，<br>

    高处不胜寒，起舞弄清影，何似在人间。<br>

    转朱阁，抵绮户，照无眠。<br>

    不应有恨，何事偏向别时圆。<br>

    人有悲欢离合，月有阴晴圆缺，此事古难全。<br>

    但愿人长久，千里共婵娟。<br>

</p>

<hr color="red" >

<div class="div1" id="">

    <ul>

        <li><embed src="embed/蔡琴明月几时有.mp3" loop="true" width="500" height="200"></embed></li>

        <li><embed src="embed/若只如初见.mp4" loop="true" width="500" height="200"></embed></li>

        <li><embed src="embed/王菲 - 但愿人长久.mp3" loop="true" width="500" height="200"></embed></li>

    </ul>

</div>

<marquee direction="left" behavior="alternate" onMouseOver="this.stop()"

         onMouseOut="this.start()">欢迎来到我的多媒体世界！</marquee>

</body>

</html>

项目2

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/842875.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Echarts图表库推荐以及使用Echarts实现饼图端头弧形效果

Echarts图表库推荐以及使用Echarts实现饼图端头弧形效果

推荐Echarts图表库官方链接http://www.ppchart.com/#/ 下面是一段实现饼图端头弧形效果的Echarts代码 虽然有了上面的图表库&#xff0c;里面案例也挺多&#xff0c;但是就是没找到我想要的这种效果&#xff0c;索性就手写了一个 下面代码可以直接去我上面的图标库运行看效果…
阅读更多...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)

书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)

书籍学习平台 目录 基于SprinBootvue的书籍学习平台 一、前言 二、系统设计 三、系统功能设计 1平台功能模块 2后台功能模块 5.2.1管理员功能模块 5.2.2用户功能模块 5.2.3作者功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 …
阅读更多...
工程机械比例阀电流采集方案——IPEhub2与IPEmotion APP

工程机械比例阀电流采集方案——IPEhub2与IPEmotion APP

自从国家实施一带一路和新基建计划以来&#xff0c;工程机械的需求量呈现出快速增长的趋势。而关于工程机械&#xff0c;其比例阀的控制问题不容忽视。比例阀是一种新型的液压控制装置——在普通压力阀、流量阀和方向阀上&#xff0c;用比例电磁铁替代原有的控制部分&#xff0…
阅读更多...
如何使用Cloudways搭建WordPress网站

如何使用Cloudways搭建WordPress网站

如今&#xff0c;搭建网站已经变得非常简单&#xff0c;这主要得益于开源的CMS建站系统的兴起。即使是不懂编程的人也能轻松搭建自己的网站&#xff0c;这些CMS系统提供了丰富的主题模板和插件&#xff0c;使用户可以通过简单的拖放和配置操作来建立自己的网站。 WordPress是目…
阅读更多...
大语言模型实战——搭建纯本地迷你版RAG

大语言模型实战——搭建纯本地迷你版RAG

1. 概念 RAG&#xff08;Retrieval Augmented Generation&#xff09;检索增强生成&#xff0c;它结合了搜索技术和大语言模型的提示词功能&#xff0c;以搜索算法找到的信息作为背景上下文&#xff0c;来辅助大语言模型&#xff08;Large Language Model, LLM&#xff09;生成…
阅读更多...
Oracle数据库操作问题汇总

Oracle数据库操作问题汇总

一、简介 Oracle Database&#xff0c;又名Oracle RDBMS&#xff0c;或简称Oracle。是甲骨文公司的一款关系数据库管理系统。它是在数据库领域一直处于领先地位的产品。可以说Oracle数据库系统是世界上流行的关系数据库管理系统&#xff0c;系统可移植性好、使用方便、功能强&…
阅读更多...
基于SpringBoot+Vue在线动漫信息平台设计和实现(源码+LW+部署讲解)

基于SpringBoot+Vue在线动漫信息平台设计和实现(源码+LW+部署讲解)

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; &#x1f339;推荐一个人…
阅读更多...
Ubuntu20.04安装VINS_Mono 和 VINS_Fusion

Ubuntu20.04安装VINS_Mono 和 VINS_Fusion

文章目录 一、问题描述二、依赖环境1. Eigen 安装2. glog 安装3. gflags 安装4. ceres 安装 三、VINS-Mono 安装1. git 下载并安装2. OpenCV 版本冲突3. 运行 四、VINS—Fusion 安装1. git 下载并安装2. OpenCV 版本冲突3. 运行 五、日常bug1. 动静态库链接冲突 一、问题描述 …
阅读更多...
今日好料推荐（Altium Designer + 仿真器驱动）

今日好料推荐（Altium Designer + 仿真器驱动）

今日好料推荐&#xff08;Altium Designer 仿真器驱动&#xff09; 参考资料在文末获取&#xff0c;关注我&#xff0c;获取优质资源。 Altium Designer Altium Designer 是一种高度集成的电子设计自动化 (EDA) 软件工具&#xff0c;广泛应用于电子电路和印刷电路板 (PCB) …
阅读更多...
操作系统实验--终极逃课方法

操作系统实验--终极逃课方法

找到图片里的这个路径下的文件 &#xff0c;结合当前题目名称&#xff0c;把文件内容全部删除&#xff0c;改为print print的内容为下图左下角的预期输出的内容
阅读更多...
Java---Cloneable接口---浅克隆和深克隆

Java---Cloneable接口---浅克隆和深克隆

在Java中&#xff0c;我们如何实现一个对象的克隆呢&#xff1f; 在Java中实现对象的克隆&#xff0c;我们要用到Cloneable接口。克隆也分为浅克隆和深克隆。 1.实现浅克隆 1.重写clone方法 当我们想直接通过前面已经建立好的对象来调用Object类中的clone方法时&#xff0c;…
阅读更多...
解决mybatis/mybatis plus报错：Invalid bound statement (not found) 的方法汇总

解决mybatis/mybatis plus报错：Invalid bound statement (not found) 的方法汇总

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题&#xff0c;即在mybatis中dao接口与mapper配置文件在做映射绑定的时候接口与xml不匹配&#xff0c;要么是找不到&#xff0c;要么是找到了却匹配不到。 我的问题是项目没有把最新的方法x…
阅读更多...
正版软件 | Internet Download Manager 下载管理器

正版软件 | Internet Download Manager 下载管理器

前言 IDM 是一个下载加速器&#xff0c;可将下载速度提高多达 8 倍&#xff0c;恢复、组织和安排下载。 30 天免费试用&#xff01;https://www.internetdownloadmanager.cc/ 新版本 Internet Download Manager v 6.40&#xff1a;添加了 Windows 11 兼容性。改进了媒体采集…
阅读更多...
5G工厂长啥样

5G工厂长啥样

5G工厂是一种新型的工业互联网基础设施&#xff0c;利用5G为代表的新一代信息通信技术集成&#xff0c;打造新型工业互联网基础设施。在5G工厂中&#xff0c;自动化和智能化设备广泛使用&#xff0c;高度互联的工厂网络得以实现&#xff0c;远程监控和管理成为可能&#xff0c;…
阅读更多...
系统测试需求指南（Word版-软件全套资料下载）

系统测试需求指南（Word版-软件全套资料下载）

1 目的 2 概述 3 测试需求 3.1 测试范围 3.2 测试目标 4 测试需求的现状 5 测试需求的内容 5.1 主体内容 5.2 管理内容 6 测试需求的制定 6.1 需求信息来源 6.2 需求分析 6.2.1 功能性需求 6.2.2 系统功能需求 6.2.3 界面需求 6.2.4 安装需求 6.2.5 业务需求 …
阅读更多...
qmt量化交易策略小白学习笔记第8期【qmt编程之获取股票资金流向数据--内置Python】

qmt量化交易策略小白学习笔记第8期【qmt编程之获取股票资金流向数据--内置Python】

qmt编程之获取股票资金流向数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;需免费开通量化回测与咨询实盘权限&#xff0c;可以和博主联系&#xff01; 获取股票资金…
阅读更多...
【Unity之FGUI】黑神章Fairy GUI控件详解

【Unity之FGUI】黑神章Fairy GUI控件详解

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…
阅读更多...
铜镁合金应用领域广泛 我国具备原材料优势

铜镁合金应用领域广泛 我国具备原材料优势

铜镁合金应用领域广泛 我国具备原材料优势 铜镁合金又称铝青铜&#xff0c;是一种变形铝合金&#xff0c;指将镁金属、铝金属和铜金属经合金化反应制成的合金。与普通铝合金相比&#xff0c;铜镁合金具有比强度高、耐磨性好、减振性能佳、轻量化等优势&#xff0c;在金属冶炼、…
阅读更多...
【前端】XML和HTML的区别详解

【前端】XML和HTML的区别详解

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
猫耳 WebSocket 跨端优化实践

猫耳 WebSocket 跨端优化实践

前言 在现代的移动应用程序中&#xff0c;长连接是一种不可或缺的能力&#xff0c;包括但不限于推送、实时通信、信令控制等常见场景。在猫耳FM的直播业务中&#xff0c;我们同样使用了 WebSocket 长连接作为我们实时通信的基础。 在我们推进用户体验优化的工作中&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023