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，一经查实，立即删除！

相关文章

如果jupyter notebook不能实现网页自动跳转，参考下面的链接

如果jupyter notebook不能实现网页自动跳转，参考下面的链接

一招搞定Jupyter-notebook命令行打开之后不能自动跳转浏览器_一招搞定jupter notebook命令行打开之后-CSDN博客
阅读更多...
使用大模型做应用的一些问题

使用大模型做应用的一些问题

使用了一段时间的大模型应用&#xff0c;遇到一些问题&#xff0c;分享给大家。 使用大模型的基本情况 使用了下面三种大模型&#xff1a; 百度 ERNIE-3 kimi 大模型 chatGPT3.5 使用的大模型应用架构&#xff1a; langchainlangchain RAGlangchain Agentvector 数据…
阅读更多...
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是目…
阅读更多...
[前端] 空值合并运算符（??）原理(笔记)

[前端] 空值合并运算符（??）原理(笔记)

以如下代码为例 const avatar computed(() > props.user.avatar ?? fallbackAvatar)该运算符的工作原理是&#xff0c;如果左侧的表达式props.user.avatar的值为null或undefined&#xff0c;那么它会返回右侧的fallbackAvatar。然而&#xff0c;如果props.user.avatar的…
阅读更多...
大语言模型实战——搭建纯本地迷你版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;推荐一个人…
阅读更多...
python 密码生成器

python 密码生成器

要用 Python 创建一个密码生成器，可以使用 Python 的内置库来生成随机字符。以下是一个简单的密码生成器示例，您可以根据需要进行修改和扩展。 import random import stringdef generate_password(length=12):"""生成一个指定长度的密码"""# …
阅读更多...
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 兼容性。改进了媒体采集…
阅读更多...
世界人口名表前十名排名（2023最新）

世界人口名表前十名排名（2023最新）

截止2023年11月26日&#xff0c;全球 240 个国家和地区人口总数为8,032,122,420人&#xff0c;其中印度以 1,426,711,933 人位居第一&#xff0c;成为世界上人口最多的国家&#xff0c;中国以 1,425,722,992 人位居地球第二&#xff0c;第三至第十名分别是&#xff1a;美国、印…
阅读更多...
5G工厂长啥样

5G工厂长啥样

5G工厂是一种新型的工业互联网基础设施&#xff0c;利用5G为代表的新一代信息通信技术集成&#xff0c;打造新型工业互联网基础设施。在5G工厂中&#xff0c;自动化和智能化设备广泛使用&#xff0c;高度互联的工厂网络得以实现&#xff0c;远程监控和管理成为可能&#xff0c;…
阅读更多...
一千题，No.0035（个位数统计）

一千题，No.0035（个位数统计）

给定一个 k 位整数 Ndk−1​10k−1⋯d1​101d0​ (0≤di​≤9, i0,⋯,k−1, dk−1​>0)&#xff0c;请编写程序统计每种不同的个位数字出现的次数。例如&#xff1a;给定 N100311&#xff0c;则有 2 个 0&#xff0c;3 个 1&#xff0c;和 1 个 3。 输入格式&#xff1a; …
阅读更多...
最新文章

Copyright @ 2022~2023