七、利用CSS和多媒体美化页面的习题

题目一：

        利用CSS技术，结合表格和列表，制作并美化 “ 翡翠阁 ”页面。运行效果如下

运行效果：

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>翡翠阁</title><style type="text/css">#whole{text-align: center;}h2{background-image: url(img/cap.jpg);background-repeat: no-repeat;background-position: center;}table{border: 2px solid black;margin: auto;}.top{border-collapse: separate;border-spacing: 15px 20px;}img{border: 2px solid black;}</style></head><body><div id="whole"><caption><h2>翡翠阁</h2></caption><div><table class="top"><tr><td><img src="img/li1.jpg"/></td><td><img src="img/li2.jpg"/></td><td><img src="img/li3.jpg"/></td><td><img src="img/li4.jpg"/></td></tr><tr><td>翡翠项链坠子<br />￥1500元</td><td>羊腊玉戒指<br />￥2300元</td><td>紫玉手镯<br />￥2880元</td><td>羊头黄玉<br />￥999元</td></tr><tr><td><img src="img/li5.jpg"/></td><td><img src="img/li6.jpg"/></td><td><img src="img/li7.jpg"/></td><td><img src="img/li8.jpg"/></td></tr><tr><td>翡翠挂件<br />￥1800元</td><td>翡翠蝴蝶胸扣<br />￥3300元</td><td>翡翠耳坠<br />￥2380元</td><td>翡翠白金镯子<br />￥9999元</td></tr></table></div></div></body>
</html>

代码讲解

  • border-collapse: separate;
    它防止了相邻单元格的边框合并在一起。每个单元格的边框都会独立显示，而不是与其他单元格的边框合并成一条线。
  • border-spacing: 15px 20px;
    这个属性定义了相邻单元格边框之间的距离。这个属性仅在border-collapse 设置为separate时才有效。border-spacing接受两个值：
  • 第一个值（15px）定义了单元格边框的水平间距，即行与行之间的边框距离。
  • 第二个值（20px）定义了单元格边框的垂直间距，即列与列之间的边框距离。

题目二：

        用表格布局页面，利用CSS技术，及添加多媒体，制作并美化“ 心灵之音 ”页面，运行效果如下

运行效果：

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>心灵之音</title><style type="text/css">body{background-image: url(img2/bg-0.jpg);}table{border-collapse: collapse;margin: auto;background-color: white;}table,tr,td{border: 1px solid black;}.left{writing-mode: vertical-lr;text-align: center;font-size: 40px;letter-spacing: 10px;color: royalblue;}a{color: black;}.bottom1{text-align: center;background-color: burlywood;}.bottom2{background-color: burlywood;}</style></head><body><div><table><tr><td class="left" rowspan="2">心灵之音</td><td><img src="img2/list.jpg"/><ol type="1"><li>陈小朵-匆匆那年</li><audio src="media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio><li>陈颖恩-那些你很冒险的梦</li><audio src="media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio><li>黄霄雲-左手指月</li><audio src="media/黄霄雲 - 左手指月.mp3" controls="controls"></audio><li>李健 - 抚仙湖</li><audio src="media/李健 - 抚仙湖.mp3" controls="controls"></audio></ol></td></tr><tr><td class="bottom1">&nbsp;<a href="#">流行音乐</a>&emsp;<a href="#">摇滚音乐</a>&emsp;<a href="#">现代音乐</a>&emsp;<a href="#">民族音乐</a><br />&nbsp;<a href="#">蓝调歌曲</a>&emsp;<a href="#">管弦乐队</a>&emsp;<a href="#">合奏乐</a>&emsp;<a href="#">更多···</a></td></tr><tr><td class="bottom2" colspan="2"><center>版权所有&copy;心灵之音网站</center></td></tr></table></div></body>
</html>

代码讲解

  • rowspan="2"
    它的作用是让一个单元格跨越（合并）多行。简单来说，就是使一个单元格占据表格中垂直方向上的多行位置。在本例中跨越2行合并。
  • <ol type="1">
    当type="1"时，表示有序列表的编号将以阿拉伯数字（1、2、3、4 等）显示。
  • writing-mode: vertical-lr;
    文本垂直排列，但是是从右向左（right - to - left）排列。writing-mode的属性是文本的流向和方向。

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

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

相关文章

学习虚幻C++开发日志——委托（持续更新中）

学习虚幻C++开发日志——委托（持续更新中）

委托 官方文档&#xff1a;Delegates and Lamba Functions in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 简单地说&#xff0c;委托就像是一个“函数指针”&#xff0c;但它更加安全和灵活。它允许程序在运行时动态地调用不…
阅读更多...
代替Spinnaker 的 POINTGREY工业级相机 FLIR相机 Python编程案例

代替Spinnaker 的 POINTGREY工业级相机 FLIR相机 Python编程案例

SpinnakerSDK_FULL_4.0.0.116_x64 是一个用于FLIR相机的SDK&#xff0c;主要用于图像采集和处理。Spinnaker SDK主要提供C接口&#xff0c;无法直接应用在python环境。本文则基于Pycharm2019python3.7的环境下&#xff0c;调用opencv,EasySpin,PySpin,的库实现POINTGREY工业级相…
阅读更多...
Linux：自定义Shell

Linux：自定义Shell

本文旨在通过自己完成一个简单的Shell来帮助理解命令行Shell这个程序。 目录 一、输出“提示” 二、获取输入 三、切割字符串 四、执行指令 1.子进程替换 2.内建指令 一、输出“提示” 这个项目基于虚拟机Ubuntu22.04.5实现。 打开终端界面如图所示。 其中。 之前&#x…
阅读更多...
在幸狐picomax SDK里面添加app

在幸狐picomax SDK里面添加app

本次以onvifserver为例&#xff0c;在在幸狐picomax SDK里面添加app 具体步骤 修改编译器&#xff0c;把CCOMPILE&#xff0c; CPPCOMPILE&#xff0c; LINK 改为对应得编译器 把all 提到前面&#xff0c;保证在make得时候第一个执行得是all标签 install 分几步 创建out文件夹…
阅读更多...
如何更改手机GPS定位

如何更改手机GPS定位

你是否曾想过更改手机GPS位置以保护隐私、玩游戏或访问受地理限制的内容&#xff1f;接下来我将向你展示如何使用 MagFone Location Changer 更改手机GPS 位置&#xff01;无论是在玩Pokmon GO游戏、发布社媒贴子&#xff0c;这种方法都快速、简单且有效。 第一步&#xff1a;下…
阅读更多...
基于信号量与共享内存实现客户与服务器进程通信

基于信号量与共享内存实现客户与服务器进程通信

基于信号量与共享内存实现客户与服务器进程通信 发送进程 代码 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <fcntl.h> #include <sys/mman.h> #include <semaphore.h>#define SH…
阅读更多...
【AI大模型引领变革】探索AI如何重塑软件开发流程与未来趋势

【AI大模型引领变革】探索AI如何重塑软件开发流程与未来趋势

文章目录 每日一句正能量前言流程与模式介绍【传统软件开发 VS AI参与的软件开发】一、传统软件开发流程与模式二、AI参与的软件开发流程与模式三、AI带来的不同之处 结论 AI在软件开发流程中的优势、挑战及应对策略AI在软件开发流程中的优势面临的挑战及应对策略 结论 后记 每…
阅读更多...
机器学习的全面解析：从基础到应用

机器学习的全面解析：从基础到应用

引言&#xff1a;机器学习的核心地位 机器学习&#xff08;Machine Learning, ML&#xff09;是人工智能&#xff08;AI&#xff09;的核心分支&#xff0c;它通过算法使计算机能够从数据中学习并进行预测或决策。机器学习技术在许多领域都有广泛应用&#xff0c;包括推荐系统、…
阅读更多...
Chapter 2 - 16. Understanding Congestion in Fibre Channel Fabrics

Chapter 2 - 16. Understanding Congestion in Fibre Channel Fabrics

Transforming an I/O Operation to FC frames A read or write I/O operation (Figure 2-28) between an initiator and a target undergoes a series of transformations before being transmitted on a Fibre Channel link. 启动程序和目标程序之间的读取或写入 I/O 操作（图…
阅读更多...
如何解决Java EasyExcel 导出报内存溢出

如何解决Java EasyExcel 导出报内存溢出

如何解决Java EasyExcel 导出报内存溢出 EasyExcel大数据量导出常见方法 1. 分批写入 EasyExcel支持分批写入数据&#xff0c;可以将数据分批加载到内存中&#xff0c;分批写入Excel文件&#xff0c;避免一次性将大量数据加载到内存中。 示例代码&#xff1a; String fileNa…
阅读更多...
Qt 的事件投递机制：从基础到实战

Qt 的事件投递机制：从基础到实战

在 Qt 开发中&#xff0c;事件系统是核心概念之一&#xff0c;几乎每一个 GUI 应用程序都依赖于它来响应用户操作和系统通知。对于有一定 Qt 基础但首次接触事件投递 (QCoreApplication::postEvent) 的开发者而言&#xff0c;理解事件投递机制尤为重要。这篇博客将带你从基本概…
阅读更多...
QDialog中，reject()和close()区别

QDialog中，reject()和close()区别

1. reject()函数 reject()是QDialog类中的一个槽函数&#xff0c;用于以“拒绝”的方式关闭对话框。它通常与对话框的“取消”操作相关联。当调用reject()时&#xff0c;会发出rejected()信号。 行为细节&#xff1a; 从模态对话框的角度来看&#xff0c;当模态对话框调用reje…
阅读更多...
【036】基于51单片机五子棋游戏机【Proteus仿真+Keil程序+报告+原理图】

【036】基于51单片机五子棋游戏机【Proteus仿真+Keil程序+报告+原理图】

☆、设计硬件组成&#xff1a;51单片机最小系统LCD12864液晶显示按键控制。 1、设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片&#xff0c;采用LCD12864液晶作为显示&#xff1b; 2、游戏有 人机对战 和 玩家对战 两种模式&#xff0c;玩家白子先下&#xff1b; …
阅读更多...
HTML通过JavaScript获取访问连接，IP和端口

HTML通过JavaScript获取访问连接，IP和端口

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Get IP Address</title> <script> function displayURL() { var url window.location.href; // 获取当…
阅读更多...
VMWARE虚拟交换机的负载平衡算法

VMWARE虚拟交换机的负载平衡算法

一、基于源虚拟端口的路由 虚拟交换机可根据 vSphere 标准交换机或 vSphere Distributed Switch 上的虚拟机端口 ID 选择上行链路。 基于源虚拟端口的路由是 vSphere 标准交换机和 vSphere Distributed Switch 上的默认负载平衡方法。 ESXi主机上运行的每个虚拟机在虚拟交换…
阅读更多...
slam里的体素滤波

slam里的体素滤波

SLAM系统通常需要处理大量的传感器数据&#xff0c;如激光雷达&#xff08;LiDAR&#xff09;、相机等获取的数据&#xff0c;这些数据往往包含了大量的冗余信息和噪声。为了提高SLAM系统的效率和准确性&#xff0c;数据预处理是非常重要的一步&#xff0c;体素滤波就是一种常用…
阅读更多...
web——sqliabs靶场——第十二关——(基于错误的双引号 POST 型字符型变形的注入)

web——sqliabs靶场——第十二关——(基于错误的双引号 POST 型字符型变形的注入)

判断注入类型 a OR 1 1# 发现没有报错 &#xff0c;说明单引号不是闭合类型 测试别的注入条件 a) OR 1 1# a)) OR 1 1# a" OR 11 发现可以用双引号闭合 发现是")闭合 之后的流程还是与11关一样 爆破显示位 先抓包 是post传参&#xff0c;用hackbar来传参 unam…
阅读更多...
AI时代，百度的三大主义

AI时代，百度的三大主义

现实主义、长期主义、理想主义。 定焦One&#xff08;dingjiaoone&#xff09;原创 作者 | 苏琦 郑浩钧 编辑 | 魏佳 “人工智能很像是一次新的工业革命&#xff0c;这意味着它不会三五年就结束&#xff0c;也不会一两年就出现‘超级应用’&#xff0c;它更像是三五十年对于整…
阅读更多...
C++基础入门篇

C++基础入门篇

C入门 第一个C程序 首先C兼容c语言&#xff0c;所以由c语言实现的内容仍然可以在C中实现&#xff0c;但是c语言的文件后缀是.c但是C的后缀是.cpp。vs对于cpp文件使用C编译器编译&#xff0c;linux需要用g编译而不是gcc #include<stdio> int main() {printf("hello…
阅读更多...
基于YOLOv11的火焰实时检测系统（python+pyside6界面+系统源码+可训练的数据集+也完成的训练模型）

基于YOLOv11的火焰实时检测系统（python+pyside6界面+系统源码+可训练的数据集+也完成的训练模型）

100多种【基于YOLOv8/v10/v11的目标检测系统】目录&#xff08;pythonpyside6界面系统源码可训练的数据集也完成的训练模型 摘要&#xff1a; 本文提出了一种基于YOLOv11算法的火灾检测系统&#xff0c;利用1852张图片&#xff08;1647张训练集&#xff0c;205张验证集&#…
阅读更多...
最新文章

Copyright @ 2022~2023