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

server/2024/11/18 14:13:20/

题目一:

        利用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.ppmy.cn/server/142930.html

相关文章

IDEA怎么定位java类所用maven依赖版本及引用位置

在实际开发中&#xff0c;我们可能会遇到需要搞清楚代码所用依赖版本号及引用位置的场景&#xff0c;便于排查问题&#xff0c;怎么通过IDEA实现呢&#xff1f; 可以在IDEA中打开项目&#xff0c;右键点击maven的pom.xml文件&#xff0c;或者在maven窗口下选中项目&#xff0c;…

C#从入门到放弃

C#和.NET的区别 C# C#是一个编程语言 .NET .NET是一个在window下创建程序的框架 .NET框架不仅局限于C#,它还可以支持很多语言 .NET包括了2个组件&#xff0c;一个叫CLR(通用语言运行时)&#xff0c;另一个是用来构建程序的类库 CLR 用C写一个程序&#xff0c;在一台8688的机器…

Web前端开发基础知识--主体内容

1、锚点位置 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>锚点链接</title></head><body><p><a href"yingyong">计算机应用技术</a> <a href"#ruanjian&quo…

期权懂|交易股票期权该怎么操作?又该如何开户?

期权小懂每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 交易股票期权该怎么操作&#xff1f;又该如何开户&#xff1f; 一、交易股票期权主要包括以下几个步骤&#xff1a; &#xff08;1&#xff09;选择交易平台‌&#xff1a; 选择…

Win10 安装MySQL 5.7.32(解压版)

1. MySQL 5.7.32 下载 官网下载&#xff1a;官网下载 2. MySQL5.7.32解压安装 将文件解压到指定目录&#xff0c;我的解压目录为&#xff1a;E:\MySQL\mysql-5.7.32-winx64 进入文件创建my.ini文件 用记事本打开my.ini&#xff0c;粘贴下面内容 [Client] #设置3306端口 port…

npm install命令报错:npm ERR Could not resolve dependency npm ERR peer…

在运行前端代码下载依赖时&#xff0c;使用 npm install 命令安装依赖时遇到错误&#xff0c;报错信息如下&#xff1a; npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: project0.1.0 npm ERR! Found: esli…

iOS逆向入门:使用theos注入第三方依赖库

背景 theos是一个跨平台的软件开发框架&#xff0c;常用于管理&#xff0c;开发和部署iOS项目&#xff0c;同时也是开发iOS越狱插件的主要工具。和MonkeyDev不同的是&#xff0c;它不依赖于xcode&#xff0c;可以在多个操作系统上运行。一个完整的iOS越狱开发流程包括&#xf…

【qt】控件

1.frameGeometry和Geometry区别 frameGeometry是开始从红圈开始算&#xff0c;Geometry从黑圈算 程序证明&#xff1a;使用一个按键&#xff0c;当按键按下,qdebug打印各自左上角的坐标&#xff08;相当于屏幕左上角&#xff09;&#xff0c;以及窗口大小 Widget::Widget(QWid…