html+CSS部分基础运用7

最新推荐文章于 2024-06-29 11:58:27 发布

-Initiation

最新推荐文章于 2024-06-29 11:58:27 发布

阅读量875

点赞数 34

分类专栏：前端3剑客运用（html+css+js）文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_55709044/article/details/139263256

版权

前端3剑客运用（html+css+js）专栏收录该内容

20 篇文章 0 订阅

订阅专栏

项目1 设计简易灯箱画廊

1.实验所需素材

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

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

图4-1 简易灯箱画廊

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

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

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

2.歌词内容如下：

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

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

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

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

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

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

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

项目1

<!doctype html>

<head>

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

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>

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

<ul>

</ul>

</iframe>

</div>

</body>

</html>

项目2

<!DOCTYPE html>

<head>

@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>

<p >

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

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

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

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

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

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

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

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

</p>

<ul>

</ul>

</div>

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

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

</body>

</html>

项目2

-Initiation

关注

34
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+CSS部分基础运用7

编程实现简易灯箱画廊，鼠标单击任一个图像超链接，在底部浮动框架中显示大图像，效果如图4-1所示的页面。我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。编程设计支持音视、视频播放的网页，效果如图4-2所示的页面。人有悲欢离合，月有阴晴圆缺，此事古难全。人有悲欢离合，月有阴晴圆缺，此事古难全。高处不胜寒，起舞弄清影，何似在人间。我欲乘风归去，又恐琼楼玉宇，不知天上宫阙，今夕是何年。转朱阁，抵绮户，照无眠。但愿人长久，千里共婵娟。转朱阁，抵绮户，照无眠。但愿人长久，千里共婵娟。
复制链接

扫一扫