html+CSS部分基础运用7

于 2024-05-28 12:10:20 发布
阅读量1k 收藏 7
点赞数 35
分类专栏： 前端3剑客运用（html+css+js） 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55709044/article/details/139263256
版权

项目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

-Initiation
关注
专栏目录
【Web前端基础】实验4 图像与多媒体文件
Lailalalala的博客
07-30 4572
构建基础HTML网页：设计建议灯箱画廊、设计含音频播放网页
web浮动框架 简易灯箱画廊设计
tf617的博客
04-13 8652
<!-- 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; he
【HTML/CSS/JavaScript】网页设计实验三（超链接与多媒体文件应用）
热门推荐
qq_52384627的博客
11-09 1万+
网页设计实验三一 设计简易灯箱画廊二 设计支持音频、视频播放的网页三 设计简易网站导航四 设计新生课程简介五 设计中国名牌大学简介页面 一 设计简易灯箱画廊 实训 3 超链接与多媒体文件应用 项目 1 设计简易灯箱画廊 使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 3-1 所示： （1）文件名：prj_3_1.html。 （2）页面标题：“简易灯箱画廊设计”。 （3）实验所需素材：在 trees 文件夹中提供一个 MP3 文件和 18 个 JPG 文件， 设计页面时可以使用。
Web前端：简易灯箱画廊案例设计
零小唬的博客
10-02 2253
【代码】Web前端：简易灯箱画廊案例设计。
html 灯箱效果,基于 BootStrap 4 的图片灯箱效果 | 智慧宫
weixin_34194829的博客
06-04 722
智慧宫的 WordPress 的主题一直没有添加灯箱效果，近日得闲，在Github上了一个插件，并结合wordpress主题做了修改，实现了基于BootStrap 4 的灯箱效果，将经验写在这里，供大家参考，所需文件请在文章尾部下载。基于BootStrap 4的灯箱效果思路灯箱效果利用的是BootStrap 模态框 写的插件利用JS修改我们需要的Html结构灯箱效果 HTML 结构* 灯箱效果使用...
创建一个HTML5画廊可以通过多种方式完成，但基本的思路是使用HTML来结构化内容，CSS来美化它
BLOG域名:programb.blog.csdn.net
07-03 1993
创建一个HTML5画廊可以通过多种方式完成，但基本的思路是使用HTML来结构化内容，CSS来美化它，以及可能的JavaScript来增加交互性。以下是一个简单的画廊示例，它使用HTML5和CSS3，不包含JavaScript。如果你想添加更多交互性或功能，如模态窗口（在不离开当前页面的情况下查看全尺寸图片），你将需要使用JavaScript或引入一个JavaScript库，如jQuery和Bootstrap模态窗口。此外，你可能需要根据你的具体需求和偏好来调整这个示例。添加更多图片链接和缩略图。
前端三剑客（html+css+js）加vue部分基础运用2
最新发布
06-11
在IT行业中，前端开发是构建Web应用程序的重要组成部分，而“前端三剑客”指的是HTML、CSS和JavaScript，这三种技术是构建任何现代网页的基础。Vue.js是近年来非常流行的一个前端框架，它使得JavaScript的开发更加...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
首先，HTML（HyperText Markup Language）是网页的基础结构语言，用于定义页面内容的布局和意义。HTML元素由标签组成，如`<div>`、`<p>`、`<img>`等，这些标签告诉浏览器如何显示内容。在webdemo-master项目中，HTML...
HTML+Javascript+CSS测试题
06-08
HTML、JavaScript和CSS是网页开发的三大核心技术，它们各自承担着不同的职责，共同构建了丰富的交互式和动态的网络体验。 HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义网页的元素和布局。...
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
08-10
1. **HTML/CSS**: 项目的基础，用于构建网页的结构和样式。 - **DIV+CSS布局**: 是当前网页设计中非常流行的一种布局方式，能够实现更灵活的页面布局和更优的SEO效果。 - **响应式设计**: 使用百分比单位和媒体...
lightbox:一个使用 HTML、CSS 和 jQuery 的简单灯箱
06-26
灯箱演示 这是使用 HTML、CSS 和 jQuery 的灯箱演示。 该演示的灵感来自 一些笔记 灯箱只是一个用半透明黑色覆盖覆盖整个屏幕的div 灯箱有属性position: fixed; , top: 0; ， left: 0; , width: 100% , and height: 100%保证div覆盖整个窗口 图像显示在灯箱内是为了 a) 将观众的眼睛吸引到图像 b) 促进清晰的展示 灯箱 div 初始化为display: none ，并在单击链接时出现 通过$("#lightbox").show()灯箱 div 后，单击处理程序会侦听单击以再次隐藏 div
lightbox:用普通的 Javascript 和 CSS3 实现简单的灯箱
06-25
灯箱 在普通的 Javascript 和 CSS3 中实现简单的灯箱。 看 可以在在线查看演示 建造 不需要那个。 这真的很简单！ :) 去做 将其转换为 Polymer/React 友好的 Web 组件
设计画廊CSS3网页模板
12-13
设计画廊CSS3网页模板
jquery 实现的简单画廊
06-03
jquery 实现的简单画廊 有上一张、下一站、暂停、图片缩略图
纯html+javascript+css webpack打包的项目
04-12
本项目以HTML、JavaScript和CSS为基础，结合Webpack进行资源的管理和打包，使得项目结构清晰，易于理解和维护。以下是关于这个项目及其相关技术的详细说明： **HTML** HTML（HyperText Markup Language）是网页内容...
WEB前端人机导论实验-实训3超链接与多媒体文件应用
gyeolhada的博客
01-14 1750
WEB前端人机交互导论实验-实训3超链接与多媒体文件应用
html灯箱效果代码,WordPress纯代码实现图片灯箱lightbox效果
weixin_33355385的博客
06-05 885
「WordPress从入门到放弃」QQ交流群：782332434(资源和技术交流)今天在群里唠嗑的时候，有个朋友问有没有推荐的图片点击放大预览的WordPress插件，我心想这不就是图片灯箱的效果吗，这玩意儿还要用插件吗？于是便本着助人为乐的心态给答应他用代码整一个，其实也挺简单的，就2 3个文件而已，整个文件就14k大小，总比插件好好些吧。最终效果如下图所示下面详细写下使用方法。下载文件1、首先...
html 灯箱效果样式,jQuery灯箱效果插件-Swipebox
weixin_29195615的博客
06-03 455
插件描述：Swipebox 是一款可触摸的 jQuery 灯箱效果插件，可用于桌面，移动和平板电脑。 支持移动设备滑动手势导航，桌面电脑上可以用键盘导航，不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理，支持视网膜显示，能够通过 CSS 轻松定制。主要特点滑动手势移动键盘导航的桌面CSS过渡使用jQuery后备针对UI图标支持视网膜简单的CSS定制基本用法使用Javascript在您...
html 拿到图片流 如何展示_卡布灯箱：卡布灯箱的形象展示，如何让产品在灯箱图片上充分展示？赶紧看过来！...
weixin_39692037的博客
12-22 307
卡布灯箱的靓丽是每个人都知道的，而它的功效也是相当大的，关于在卡布灯箱的图片制作上；大家可能还存在很多错误方法，无法设计它的展现效果，下面随小编一块来看看卡布灯箱它在图片上改如何进行设计？现在卡布灯箱图片的整体规划现已完全由专业的整体规划公司来完结，关于许多大企业来说他们期待自身的广告图更加的酷炫、更加的美丽动人；可是卡布灯箱图片有的时候规定也更加的专业化，如果有专业的卡布灯箱整体规划公...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-Initiation

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值