七、利用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.xdnf.cn/news/18177.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

动态规划 —— 子数组系列-等差数列划分

1. 等差数列划分 题目链接&#xff1a; 413. 等差数列划分 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/arithmetic-slices/description/ 2. 算法原理 状态表示&#xff1a;以某一个位置为结尾或者以某一个位置为起点 dp[i]表示&#xff1a;以i位置为…

vue使用List.reduce实现统计

需要对集合的某些元素的值进行计算时&#xff0c;可以在计算属性中使用forEach方法 1.语法&#xff1a;集合.reduce ( ( 定义阶段性累加后的结果 , 定义遍历的每一项 ) > 定义每一项求和逻辑执行后的返回结果 , 定义起始值 ) 2、简单使用场景&#xff1a;例如下面…

TensorFlow 2.0 windows11 GPU 训练环境配置

前言 在一切开始之前&#xff0c;请确保你的cmd命令行和powershell命令行可以正常打开。如果不能&#xff0c;建议重装系统。我不确定这是否会影响你最终的结果&#xff0c;毕竟windows的坑太多了。 安装顺序&#xff1a;visual studio -> cuda -> cudnn -> python…

MyISAM和InnoDB介绍及切换存储引擎方法

MyISAM 和 InnoDB 都是 MySQL 数据库管理系统中常用的存储引擎&#xff08;Storage Engine&#xff09;。存储引擎决定了数据库如何存储、读取、更新数据以及如何管理事务、锁定等操作。 1. MyISAM 存储引擎 MyISAM 是 MySQL 的默认存储引擎之一&#xff0c;尤其是在早期版本…

什么是嵌入式?

目录 一、什么是嵌入式 二、嵌入式系统的特点 &#xff08;一&#xff09;专用性与隐蔽性 &#xff08;二&#xff09;高可靠性与实时性 &#xff08;三&#xff09;资源固定与小型化 三、嵌入式系统的发展历史 &#xff08;一&#xff09;20 世纪 60 年代早期雏形 &am…

在几分钟内将数据从 Oracle 迁移到 ClickHouse

ClickHouse 是一个开源的面向列的数据库管理系统。它在实时数据处理方面的出色性能显着增强了数据分析和业务洞察力。将数据从 Oracle 迁移到 ClickHouse 可以释放数据在决策中的力量&#xff0c;这是单独使用 Oracle 无法实现的。 本教程介绍如何使用 BladePipe 将数据从 Orac…

Linux网络:HTTPS协议

Linux网络&#xff1a;HTTPS协议 加密方式对称加密非对称加密混合加密中间人攻击 证书数据签名CA认证 HTTPSSSL/TSLHTTPS 在HTTP协议中&#xff0c;所有的数据都采用明文的形式传输&#xff0c;这就会导致数据非常容易泄露&#xff0c;只要拿到HTTP报文&#xff0c;就可以窃取各…

(计算机毕设)基于springboot免税商品购物商城的设计与实现

博主可接毕设设计&#xff01;&#xff01;&#xff01; 各种毕业设计源码只要是你有的题目我这里都有源码 基于springboot免税商品购物商城的设计与实现 摘 要 Abstract 第一章 绪论 1.1 课题开发的背景 1.2 课题研究的意义 1.3 研究内容 第二章 系统开发关键技术…

计算机能力挑战赛c语言2024

先看看答题页面长啥样&#xff1a;选择题15道&#xff0c;编程题4道 选择题&#xff08;楼主个人答案&#xff09; 编程题

Java集合HashMap——针对实习面试

目录 Java集合MapHashMap的特性是什么&#xff1f;HashMap和Hashtable的区别&#xff1f;HashMap和HashSet的区别&#xff1f;HashMap和TreeMap的区别&#xff1f;说说HashMap的底层实现什么是hash冲突&#xff1f;有什么办法减少hash冲突&#xff1f;为什么HashMap的容量总是2…

数据结构:图(二)---- 最小生成树算法

接着上回的分享&#xff0c;继续分享一下图中比较重要的一类应用 那就是求最小生成树 最小生成树的定义 连通图中的每一棵生成树&#xff0c;都是原图的一个极大无环子图&#xff0c;即&#xff1a;从其中删去任何一条边&#xff0c;生成树 就不在连通&#xff1b;反之&#xf…

编程语言的前后端分离:可用JavaScript运行时作为后端的语言及与传统编程语言的对比 -Typescript、Nim、Moonbit

在现代软件开发中&#xff0c;编程语言的**“前后端分离”**概念鲜有提及&#xff0c;却是语言设计与实现的重要基石。这里的“前端”并非指 Web 开发中的界面部分&#xff0c;而是编程语言实现中的语法解析、词法分析等部分&#xff1b;“后端”则指生成可执行代码或中间代码的…

【蓝牙协议栈】【BLE】【BAS】精讲蓝牙电池服务

1. 蓝牙电池服务(Bluetooth Battery Service)概念 蓝牙电池服务是蓝牙设备与其他设备通信时用于报告其剩余电池电量的标准服务。它让用户能够随时了解蓝牙设备(如无线耳机、智能手表、蓝牙鼠标/键盘等)的电池状态,从而方便地管理这些设备的续航与电源使用。 BAS通常用于在…

dnaMethyAge包学习笔记

1.introduction 许多对甲基化年龄进行计算的文章都是采用网站实现计算的&#xff0c;能够实现对甲基化年龄的计算的R包相对比较少&#xff0c;其中应用最广的是dnaMethyAge包。作者本想寻找能够计算Grimage和Grimage2的R包&#xff0c;奈何没有寻找到&#xff0c;因此只能记录一…

详解八大排序(四)------(归并排序)

文章目录 前言&#xff1a;1 递归版本&#xff08;MergeSort&#xff09;1.1 核心思路1.2 实现代码 2 非递归版本&#xff08;MergeSortNonR&#xff09;2.1 核心思路2.2 实现代码 3.完整代码 前言&#xff1a; 归并排序的核心思路是把数组里面的数两两分成一组&#xff0c;组内…

商城小程序的流程渠道拓展

传统印象里&#xff0c;小程序的开发制作似乎很难&#xff0c;尤其是商城类型且功能体系完善的&#xff0c;事实也确实如此&#xff0c;没有较高的技术和成本投入或团队各个流程的专业人员合作&#xff0c;很难开发出来成品&#xff0c;或者质量较低。 当然对于大公司来说&…

小程序-基于java+SpringBoot+Vue的超市购物系统设计与实现

项目运行 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境&#xff1a;IDEA&#xff0c;Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境&#xff1a;Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

Android开发-Pokémon界面设计

实现效果图&#xff0c;还没更新完 二、功能说明&#xff1a; 在上次实验的基础之上把recycleviewb列表完善并且增加点击效果&#xff0c;点击之后可以跳转到另外一个activity上&#xff0c;并且添加返回按钮&#xff0c;可以放回原列表页面&#xff0c;列表中的每一行都对应的…

jenkins的安装(War包安装)

‌Jenkins是一个开源的持续集成工具&#xff0c;基于Java开发&#xff0c;主要用于监控持续的软件版本发布和测试项目。‌ 它提供了一个开放易用的平台&#xff0c;使软件项目能够实现持续集成。Jenkins的功能包括持续的软件版本发布和测试项目&#xff0c;以及监控外部调用执行…

HopToDesk 安全加密、免费开源,远程桌面新选择!

远程桌面工具越来越成为现代工作生活的刚需。你是否还在为寻找一个既安全又免费的工具而苦恼&#xff1f;HopToDesk&#xff0c;一款支持安全加密、免费开源的远程桌面软件&#xff0c;或许正是你的不二之 HopToDesk与传统的远程桌面工具相比有哪些独特优势&#xff1f;它如何…