七、利用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++开发日志——委托(持续更新中)

委托 官方文档&#xff1a;Delegates and Lamba Functions in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 简单地说&#xff0c;委托就像是一个“函数指针”&#xff0c;但它更加安全和灵活。它允许程序在运行时动态地调用不…

Linux:自定义Shell

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

如何更改手机GPS定位

你是否曾想过更改手机GPS位置以保护隐私、玩游戏或访问受地理限制的内容&#xff1f;接下来我将向你展示如何使用 MagFone Location Changer 更改手机GPS 位置&#xff01;无论是在玩Pokmon GO游戏、发布社媒贴子&#xff0c;这种方法都快速、简单且有效。 第一步&#xff1a;下…

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

文章目录 每日一句正能量前言流程与模式介绍【传统软件开发 VS AI参与的软件开发】一、传统软件开发流程与模式二、AI参与的软件开发流程与模式三、AI带来的不同之处 结论 AI在软件开发流程中的优势、挑战及应对策略AI在软件开发流程中的优势面临的挑战及应对策略 结论 后记 每…

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 操作(图…

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

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

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时代,百度的三大主义

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

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

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

算法——两两交换链表中的节点(leetcode24)

这是一道对于链表节点进行操作的题目非常考验对于链表操作的基本功&#xff1b; 解法: 本题的解法结合下图来进一步解释 创建一个虚拟节点指向头结点以便使代码逻辑看起来更为简便且操作节点容易,定义cur是为了方便找到cur之后的两个节点进行交换操作定义pre和aft是为了保存执…

【提效工具开发】管理Python脚本执行系统实现页面展示

Python脚本执行&#xff1a;工具管理Python脚本执行系统 背景 在现代的软件开发和测试过程中&#xff0c;自动化工具和脚本的管理变得至关重要。为了更高效地管理工具、关联文件、提取执行参数并支持动态执行Python代码&#xff0c;我们设计并实现了一套基于Django框架的工具…

鸿蒙开发:ForEach中为什么键值生成函数很重要

前言 在列表组件使用的时候&#xff0c;如List、Grid、WaterFlow等&#xff0c;循环渲染时都会使用到ForEach或者LazyForEach&#xff0c;当然了&#xff0c;也有单独使用的场景&#xff0c;如下&#xff0c;一个很简单的列表组件使用&#xff0c;这种使用方式&#xff0c;在官…

Figma插件指南:12款提升设计生产力的插件

在当今的设计领域&#xff0c;Figma已经成为许多UI设计师和团队的首选原型和数字设计软件。随着Figma的不断更新和插件库的扩展&#xff0c;这些工具极大地提升了设计工作的效率。本文将介绍12款实用的Figma插件&#xff0c;帮助你在UI设计中更加高效。 即时AI 即时AI利用先进…

揭秘云计算 | 5、关于云计算效率的讨论

一、 公有云效率更高&#xff1f; 解&#xff1a;公有云具有更高的效率。首先我们需要知道效率到底指的是什么。这是个亟须澄清的概念。在这里效率是指云数据中心&#xff08;我们将在后文中介绍其定义&#xff09;中的IT设备资源利用率&#xff0c;其中最具有代表性的指标就是…

Flutter:AnimatedPadding动态修改padding

// 默认top为10&#xff0c;点击后修改为100&#xff0c;此时方块会向下移动 padding: EdgeInsets.fromLTRB(left, top, right, bottom),class _MyHomePageState extends State<MyHomePage> {bool flag true;overrideWidget build(BuildContext context) {return Scaffo…

【c++丨STL】stack和queue的使用及模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C、STL 目录 前言 一、什么是容器适配器 二、stack的使用及模拟实现 1. stack的使用 empty size top push和pop swap 2. stack的模拟实现 三、queue的…

JavaEE初学07

JavaEE初学07 MybatisORMMybatis一对一结果映射一对多结果映射 Mybatis动态sqlif标签trim标签where标签set标签foreach标签补充 在这里插入图片描述右击运行即可 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c71d44d027374a399d5d537ce96f00e1.png) Mybatis Myba…

《Spring Cloud 微服务架构探秘》

一、Spring Cloud 微服务架构概述 Spring Cloud 是基于 Spring Boot 构建的微服务开发框架&#xff0c;它充分利用了 Spring Boot 的便利性&#xff0c;极大地简化了分布式系统基础设施的开发。 Spring Cloud 具有诸多显著特点。首先&#xff0c;它提供了丰富的组件&#xff0…

【AIGC】破解ChatGPT!如何使用高价值提示词Prompt提升响应质量

文章目录 为什么高价值提示词如此重要&#xff1f;&#x1f50d;1.1 提升响应的相关性和准确性1.2 节省时间与资源1.3 增强用户体验 了解ChatGPT的工作原理&#x1f9e0;2.1 语言模型的训练过程2.2 上下文理解与生成2.3 限制与挑战 高价值提示词的核心要素✍️3.1 清晰明确的指…

D74【 python 接口自动化学习】- python 基础之HTTP

day74 http基础定义 学习日期&#xff1a;20241120 学习目标&#xff1a;http定义及实战 -- http基础介绍 学习笔记&#xff1a; HTTP定义 HTTP 是一个协议&#xff08;服务器传输超文本到浏览器的传送协议&#xff09;&#xff0c;是基于 TCP/IP 通信协议来传递数据&…