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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

香橙派 AIpro开发板开箱测评（代码开源）

香橙派 AIpro开发板开箱测评（代码开源）

前言&#xff1a;有幸能够收到一块梦寐以求的 AI 边缘计算开发板 OrangePi AIpro&#xff0c;非常感谢官方大大给予的宝贵机会。OrangePi AIpro是香橙派官方跟华为昇腾合作的新一代边缘计算产品&#xff0c;其使用华为昇腾 AI 技术路线&#xff0c;搭配集成图像处理器&#xff…
阅读更多...
颈椎引起的头晕，背后的秘密震惊你！

颈椎引起的头晕，背后的秘密震惊你！

颈椎引起的头晕相对来说还是比较少见的。国外呢一些文献基本上你就见不到颈性眩晕这个词。 有一个病叫弓猎人综合征&#xff0c;可能和颈椎有关系&#xff0c;就是在军队上&#xff0c;军人在拉弓的时候出现眩晕这种情况&#xff0c;后来发现在旋转颈部的时候&#xff0c;压迫到…
阅读更多...
今日好料推荐（Altium Designer + 仿真器驱动）

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

今日好料推荐&#xff08;Altium Designer 仿真器驱动&#xff09; 参考资料在文末获取&#xff0c;关注我&#xff0c;获取优质资源。 Altium Designer Altium Designer 是一种高度集成的电子设计自动化 (EDA) 软件工具&#xff0c;广泛应用于电子电路和印刷电路板 (PCB) …
阅读更多...
Java核心: 使用asm操作字节码

Java核心: 使用asm操作字节码

在上一篇<Java核心: 注解处理器>中我们提到&#xff0c;通过实现AbstractProcessor&#xff0c;并调用javac -processor能够生成代码来实现特殊逻辑。不过它存在两个明显的问题: 只能新增源文件来扩展逻辑&#xff0c;无法修改现有的类或方法 必须有一个单独的编译过程&a…
阅读更多...
酒店提前线上订房小程序源码系统 PHP+MySQL组合开发 源码开源可二开 带完整的安装代码包以及搭建教程

酒店提前线上订房小程序源码系统 PHP+MySQL组合开发 源码开源可二开 带完整的安装代码包以及搭建教程

系统概述 随着移动互联网的普及&#xff0c;越来越多的人习惯通过手机进行酒店预订。传统的线下订房方式逐渐无法满足用户的需求&#xff0c;酒店提前线上订房小程序的出现成为必然趋势。该源码系统的开发旨在为酒店提供一个便捷、高效的线上订房平台&#xff0c;提升用户体验…
阅读更多...
UE5 CommonUI的使用（附源码版）

UE5 CommonUI的使用（附源码版）

UE5 CommonUI的使用 前言快速配置配置Game Viewport Client ClassCommonGameViewportClient源代码 创建CommonInputAction表默认导航Action设置CommonUIInputData源码 Bind CommonInputBaseControllerDataCommonInputBaseControllerData源码 Common UI控件库和控件样式CommonUs…
阅读更多...
深度神经网络——贝叶斯与朴素贝叶斯定理

深度神经网络——贝叶斯与朴素贝叶斯定理

概述 贝叶斯定理是概率论中一个非常重要的概念&#xff0c;它提供了一种在已知某些相关事件的概率时&#xff0c;计算另一个事件发生概率的方法。在你提供的内容中&#xff0c;贝叶斯定理被描述为一种“魔法”&#xff0c;因为它能够使计算机通过分析大量的数据来预测人们可能…
阅读更多...
亚马逊自养号与机刷有何区别？

亚马逊自养号与机刷有何区别？

在亚马逊这一全球电商巨头中&#xff0c;买家评价的重要性如同指南针般引领着消费者的购买决策。在购买前&#xff0c;消费者们往往会驻足查看产品的评论&#xff0c;仔细比较不同产品的买家口碑&#xff0c;以确保自己的选择既明智又满意。因此&#xff0c;测评成为了各大电商…
阅读更多...
安装sbt利用开发工具IntelliJ IDEA编写Spark应用程序（Scala+SBT）参考林子雨教程

安装sbt利用开发工具IntelliJ IDEA编写Spark应用程序（Scala+SBT）参考林子雨教程

文章目录 1、安装sbt2、下载安装IDEA3、给IDEA安装中文插件4、在Intellij里安装scala插件&#xff0c;构建基于SBT的Scala项目利用SBT 添加依赖包 创建WordCount实例 1、安装sbt sbt&#xff08;Simple Build Tool&#xff09;是对Scala或Java语言进行编译的一个工具&#xff…
阅读更多...
多态(C++)

多态(C++)

多态(C) 本文如果有错误或者不足的地方&#xff0c;希望各位大佬多多指点。 【本文目录】 1.多态的概念2.多态的定义及实现3.抽象类4.多态的原理5.单继承和多继承的虚函数表 1.多态的概念 多态的概念就是&#xff1a;多种形态 多态就是可以有多种的形态。不同的身份去实现同一…
阅读更多...
【JavaScript】P2 JavaScript 书写位置

【JavaScript】P2 JavaScript 书写位置

本博文总结&#xff1a; JavaScript 书写位置&#xff1a; 内部外部行内 注意事项&#xff1a; 书写的位置尽量写到 </body> 之前外部 js 标签中间不写任何内容&#xff0c;因为不予以展示 正文&#xff1a; 交互效果示例 一个简单的交互效果示例&#xff1b; <…
阅读更多...
Echarts图表库推荐以及使用Echarts实现饼图端头弧形效果

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

推荐Echarts图表库官方链接http://www.ppchart.com/#/ 下面是一段实现饼图端头弧形效果的Echarts代码 虽然有了上面的图表库&#xff0c;里面案例也挺多&#xff0c;但是就是没找到我想要的这种效果&#xff0c;索性就手写了一个 下面代码可以直接去我上面的图标库运行看效果…
阅读更多...
【CTF Web】CTFShow web11 Writeup（RCE+PHP+代码审计）

【CTF Web】CTFShow web11 Writeup（RCE+PHP+代码审计）

web11 1 阿呆听完自己菜死了&#xff0c;自己呆了。决定修好漏洞&#xff0c;绝对不能让自己再菜死了。 解法 可知 flag 在 config.php。 <?php # flag in config.php include("config.php"); if(isset($_GET[c])){$c $_GET[c];if(!preg_match("/system…
阅读更多...
线性稳压电路和开关稳压电路

线性稳压电路和开关稳压电路

稳压二极管稳压电路 电网电压增大&#xff0c;导到u1端的电压增大&#xff0c;从而使输出电压&#xff0c;稳压二极管两端的电压增大&#xff0c;稳压二极管两端电压增大&#xff0c;使流过的电注增大。那么&#xff0c;流过线性电阻R的总电流增大。 Ur电压增大&#xff0c;从…
阅读更多...
数据挖掘与机器学习——分类算法

数据挖掘与机器学习——分类算法

目录 机器学习算法最普通分类&#xff1a; 分类算法的定义&#xff1a; 分类算法的应用&#xff1a; 分类器实现分类&#xff1a; 分类器的构建标准&#xff1a; 概率模型&#xff1a; 贝叶斯公式&#xff1a; 朴素贝叶斯算法&#xff08;朴素贝叶斯分类器&#xff09;…
阅读更多...
ShardingSphere使用案例

ShardingSphere使用案例

文章目录 一、分表1. 项目架构搭建2. 数据库搭建3. 案例开发一、分库1. 创建新的库2. 修改配置文件一、分表 1. 项目架构搭建 创建Maven项目导入相关依赖<dependencies><
阅读更多...
【头歌】计算机网络DHCP服务器配置第二关access口配置答案

【头歌】计算机网络DHCP服务器配置第二关access口配置答案

头歌计算机网络DHCP服务器配置第二关access口配置操作步骤 任务描述 本关任务&#xff1a;创建 vlan &#xff0c;并且将与 pc 机相连接口划分 vlan 。 操作要求 在第一关的拓扑图的基础上&#xff0c;配置交换机&#xff0c;具体要求如下&#xff1a; 1、在特权模式下进入 vla…
阅读更多...
WebGL技术在教育培训中的应用

WebGL技术在教育培训中的应用

WebGL技术在教育培训中的应用非常广泛&#xff0c;通过其强大的三维图形处理能力&#xff0c;能够为教育培训提供更加生动、互动和沉浸式的学习体验。以下是WebGL在教育培训中的几个主要应用及其具体实现。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xf…
阅读更多...
萨科微和金航标

萨科微和金航标

宋仕强说&#xff0c;在现代企业中&#xff0c;员工每天都会花费大量的时间在办公工具上。这些办公工具可以协助员工快速完成工作任务&#xff0c;更潜移默化地规范和影响员工的行为&#xff0c;引导他们的思考方向&#xff0c;促进公司经营目标的达成。对于萨科微kinghelm&…
阅读更多...
C# 反射GetProperties和GetFields的坑

C# 反射GetProperties和GetFields的坑

有时候使用反射&#xff0c;获取类的所有字段和所有属性&#xff0c;一般情况下是按照我们写的先后顺序返回的。 但是我今天碰到了一次不是按照顺序返回的&#xff01;&#xff01;&#xff01; 翻看文档&#xff1a; GetProperties&#xff1a; https://learn.microsoft.com/…
阅读更多...
最新文章

Copyright @ 2022~2023