第7章 利用CSS和多媒体美化页面作业

2.用表格布局页面,利用CSS技术,及添加多媒体,制作并美化“心灵之音”页面。

浏览效果如下:

实例代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>心灵之音</title><style type="text/css">body{background-image: url(../img/bg-0.jpg);background-repeat: no-repeat;}.k1{width: 700px;height: 800px;border: 1px solid #000000;margin-left: 300px;background-color: #fffff0;}.k2{width: 700px;height: 30px;border: 1px solid #000000;margin-left: 300px;margin-top: -30px;background-color: #808080;}.k3{width: 200px;height: 770px;border: 1px solid #000000;border-bottom: none;margin-left: 300px;margin-top: -800px;}.k4{width: 500px;height: 700px;border: 1px solid #000000;border-left: none;margin-left: 500px;margin-top: -770px;background-color: #ffffff;background-image: url(../img/list.jpg);background-repeat: no-repeat;background-size: 580px;}.k5{width: 500px;height: 70px;border-right: 1px;margin-left: 500px;border-left: none solid #000000;border-top: none;border-bottom: none;background-color: #808080;}#font1{font-family: heiti;font-size: 100px;padding-left: 45px;}#font2{font-size: 15px;text-align: center;}li{font-size: 20px;margin-left: 20px;}a{color: #000000;font-size: 20px;}</style></head><body><table class="k1" id="font1"><tr><td><p>心<br />灵<br />之<br />音</p></td></tr></table><table class="k2" id="font2"><tr><td>版权所有&copy心灵之音网站</td></tr></table><table class="k3"><tr><td></td></tr></table><table class="k4"><tr><td><ol><!--audio要搭配controls才可以正常运行--><br /><br /><br /><br /><br /><br /><br /><li>陈小朵 - 匆匆那年</li><br /><audio src="../media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio><br /><br /><br /><li>陈颖恩 - 那些你很冒险的梦</li><audio src="../media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio><br /><br /><br /><li>黄霄雲 - 左手指月</li><audio src="../media/黄霄雲 - 左手指月.mp3" controls="controls"></audio><br /><br /><br /><li>李健 - 抚仙湖</li><audio src="../media/李健 - 抚仙湖.mp3" controls="controls"></audio></ol></td></tr></table><table class="k5"><tr><td>&nbsp;&nbsp;<a href="流行音乐">流行音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="摇滚音乐">摇滚音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="现代音乐">现代音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="民族音乐">民族音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;<a href="蓝调歌曲">蓝调歌曲</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="管弦乐队">管弦乐队</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="合奏乐">合奏乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="更多...">更多...</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table></body>
</html>

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

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

相关文章

Cisco Packet Tracer 8.0 路由器的基本配置和Telnet设置

文章目录 构建拓扑图配置IP地址配置路由器命令说明测试效果 构建拓扑图 1&#xff0c;添加2811路由器。 2&#xff0c;添加pc0。 3&#xff0c;使用交叉线连接路由器和pc&#xff08;注意线路端口&#xff09;。 4&#xff0c;使用配置线连接路由器和pc&#xff08;注意线路…

Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)

项目源码&数据源获取 利用Python实现全国岗位招聘信息可视化分析 项目背景&#xff1a; 1.为企业招聘决策提供科学的依据和参考&#xff0c;可以帮助人力资源部门、招聘机构和求职者了解当前的就业形势、行业趋势和人才需求&#xff0c;从而做出更明智的招聘和求职决策。…

(九)JavaWeb后端开发3——Servlet

目录 1.Servlet由来 2.Servlet快速入门 3.Servlet执行原理 4.Servlet生命周期 1.Servlet由来 在JaveEE API文档中对Servlet的描述是&#xff1a;可以运行在服务器端的微小程序&#xff0c;但是实际上&#xff0c;Servlet就是一个接口&#xff0c;定义了Java类被浏览器访问…

C++设计模式结构型模式———桥接模式

文章目录 一、引言二、桥接模式三、总结 一、引言 桥接&#xff08;Bridge&#xff09;模式也叫桥梁模式&#xff0c;简称桥模式&#xff0c;是一种结构型模式。该模式所解决的问题非常简单&#xff0c;即根据单一职责原则&#xff0c;在一个类中&#xff0c;不要做太多事&…

【android12】【AHandler】【4.AHandler原理篇ALooper类方法全解】

AHandler系列 【android12】【AHandler】【1.AHandler异步无回复消息原理篇】-CSDN博客 【android12】【AHandler】【2.AHandler异步回复消息原理篇】-CSDN博客 【android12】【AHandler】【3.AHandler原理篇AHandler类方法全解】-CSDN博客 其他系列 本人系列文章-CSDN博客…

基于SSM志愿者招募系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;志愿组织管理&#xff0c;组织信息管理&#xff0c;组织申请管理&#xff0c;志愿活动管理活动报名管理 用户账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;…

selinux介绍和Linux中的防火墙

selinux 1、selinux的说明 2、selinux的工作原理 3、selinux的启动、关闭与查看 防火墙 1、什么是防火墙 2、iptables &#xff08;1&#xff09;iptables介绍 参数说明 3、firewalld firewalld-cmd的参数说明

RHCE4

一、web服务器简介 1、什么是www www 是 world wide web 的缩写&#xff0c;也就是全球信息广播的意思。通常说的上网就是使用 www 来查询用户所需要的信息。 www 可以结合文字、图形、影像以及声音等多媒体&#xff0c;并通过可以让鼠标单击超链接的方式将信息以 Internet 传…

推荐一款用来快速开发3D建筑模型软件:Allplan

Nemetschek Allplan是一款用来快速开发3D建筑模型软件的软件&#xff0c;它的简单好用但是功能强大&#xff0c;绝对不输AuToDesk&#xff0c;而且人性化的设计更让你可以快速的建立开发及维护你的建筑模型。是与ArchiCAD称兄道弟的强大建筑设计软件&#xff0c;功能上互有短长…

Python面向对象,实现图片处理案例,支持:高斯模糊、Canny边缘检测、反转边缘图像、生成手绘效果、调亮度......等等

实验图片如下&#xff1a; 命名为img1.jpg, 放在项目下新建文件夹images下 项目构造如下&#xff1a; app.py源码如下 import cv2 import os from matplotlib import pyplot as plt import numpy as npclass ImageProcessor:def __init__(self, image_path):self.image cv…

利用LangChain与LLM打造个性化私有文档搜索系统

我们知道LLM&#xff08;大语言模型&#xff09;的底模是基于已经过期的公开数据训练出来的&#xff0c;对于新的知识或者私有化的数据LLM一般无法作答&#xff0c;此时LLM会出现“幻觉”。针对“幻觉”问题&#xff0c;一般的解决方案是采用RAG做检索增强。 但是我们不可能把…

C++ 基础语法 一

C 基础语法 一 文章目录 C 基础语法 一const 限定符常量指针类型别名autodecltypeQStringvector迭代器指针和数组显示转换static_castconst_cast 函数尽量使用常量引用数组形参不要返回局部对象的引用和指针返回数组指针 C四种转换内联函数constexpr函数函数指针 const 限定符 …

tensorflow案例4--人脸识别(损失函数选取,调用VGG16模型以及改进写法)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 这个模型结构算上之前的pytorch版本的&#xff0c;算是花了不少时间&#xff0c;但是效果一直没有达到理想情况&#xff0c;主要是验证集和训练集准确率…

力扣每日一题 超级饮料的最大强化能量 动态规划(dp)

来自未来的体育科学家给你两个整数数组 energyDrinkA 和 energyDrinkB&#xff0c;数组长度都等于 n。这两个数组分别代表 A、B 两种不同能量饮料每小时所能提供的强化能量。 你需要每小时饮用一种能量饮料来 最大化 你的总强化能量。然而&#xff0c;如果从一种能量饮料切换到…

全国产 V7 690T+FT6678 高性能实时信号处理平台设计原理

1、概述 全国产 V7 690TFT6678 高性能实时信号处理平台组成如图 1 所示&#xff0c;包含 1 片SMQ7VX690TFFG1761 和两片 FT-6678&#xff08;国防科大&#xff09;的 DSP&#xff0c;总共 3 个主芯片&#xff1b;每个主芯片外部各搭配 1 组 64bit 的 DDR3 内存模组以及各芯片启…

0.STM32F1移植到F0的各种经验总结

1.结构体的声明需放在函数的最前面 源代码&#xff1a; /*开启时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_USART1, ENABLE); //开启USART1的时钟RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE); //开启GPIOA的时钟/*GPIO初始化*/GPIO_InitTypeDef GPIO_InitStructu…

Linux高阶——1027—守护进程

1、守护进程的基本流程 1、父进程创建子进程&#xff0c;父进程退出 守护进程是孤儿进程&#xff0c;但是是工程师人为创建的孤儿进程&#xff0c;低开销模式运行&#xff0c;对系统没有压力 2、子进程&#xff08;守护进程&#xff09;脱离控制终端&#xff0c;创建新会话 …

Selective Generation for Language Models 语言模型的选择性生成

生成式语言模型&#xff08;Generative Language Models, GLMs&#xff09;在文本生成任务中取得了显著进展。然而&#xff0c;生成内容的“幻觉”现象&#xff0c;即生成内容与事实或真实语义不符的问题&#xff0c;仍是GLMs在实际应用中的一个重大挑战。为了解决这一问题&…

-bash: ./my_rename.sh: /bin/bash^M: bad interpreter: No such file or directory

在windows上写了一个shell脚本&#xff0c;在Linux上执行时报错&#xff0c;然后看下解决办法&#xff1a; 查了下&#xff0c;其实就是windows系统里文件行尾的换行符和Linux不同引起的&#xff0c; sed -i s/\r$// my.sh用这行代码处理一下&#xff0c;就可以正常运行了。 执…

flutter区别于vue的写法

View.dart 页面渲染&#xff1a; 类似于vue里面使用 <template> <div> <span> <textarea>等标签绘制页面, flutter 里面则是使用不同的控件来绘制页面 样式 与传统vue不同的是 flutter里面没有css/scss样式表&#xff0c; Flutter的理念是万物皆…