第八章 利用CSS制作导航菜单课后习题

embedded/2024/11/3 1:23:24/
htmledit_views">

1.利用CSS技术,结合链接和列表,设计并实现“山水之间”页面。

参考代码:

html"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>山水之间</title><style>.all{width:900px;}.top{width:900px;height: 100px;background-image: url(img/top.jpg);}.biaoti{line-height: 100px;font-size: 60px;font-family: "楷体";font-style: italic;float: left;}.middle{background-image: url(img/banner.jpg);height: 200px;margin-top: 10px;padding-left: 30px;}ul{list-style-type: none;}li{width: 80px;float:right;margin-top: 60px;}a{display: block;font-size: 20px;text-align: center;line-height: 40px;text-decoration: none;color: black;}a:hover{background-color: #aaaacc;color: white;}td{width: 80px;padding-right: 25px;}img{border:7px solid #aaaacc;}p{font-size: 20px;}</style></head><body><div class="all"><div class="top"><div class="biaoti">山水之间</div><ul><li><a href="#">关于</a></li><li><a href="#">留言</a></li><li><a href="#">风景</a></li><li><a href="#">诗文</a></li><li><a href="#">首页</a></li></ul></div><div class="middle"><p>山和水的融合,是静和动的搭配</p><p>单调与精彩的结合,也就组成了最美的风景</p><p>在青山间探索,在绿水间泛舟......</p></div><h1>风光欣赏</h1><table><tr><td><img src="img/img1.jpg"/></td><td><img src="img/img2.jpg"/></td><td><img src="img/img3.jpg"/></td><td><img src="img/img4.jpg"/></td></tr><tr><td><p>绿松</p>这几颗松树向阳一边的枝桠,向下斜斜地伸着,像搭起一道绿色的天梯</td><td><p>瀑布</p>流云奔涌,群山浮动,滚滚的云流翻山而过,直污深谷,气势磅碍,宏伟壮观。</td><td><p>青山</p>湖泊生活在山脚下,绿线的青山环抱着她,清澈的湖水映出身边的生机勃勃。</td><td><p>泛舟</p>泛舟一日景,垂钓一片金</td></tr></table><center><br /><br /><p>版权所有&copy;山水之间</p></center></div></body>
</html>

页面效果:

1.利用CSS技术,结合链接和列表,设计并实现“山水之间”页面。

参考代码:

html"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>茶韵</title><style type="text/html" title=css>css">.all{width: 900px;}.top{height: 200px;margin: auto;background: url(img/top-bg.jpg) no-repeat;}.wenzi{text-indent: 2em;line-height: 25px;width: 380px;float: left;}.wenzi a{display: block;font-size: 20px;width:180px;line-height: 40px;text-align: center;text-decoration: none;float: right;}.nav{float: right;margin-right: 50px;}a{text-decoration: none;text-align: center;display: block;width: 100px;line-height: 50px;font-size: 20px;color: black;}img{margin-top: 20px;margin-left: 20px;float: left;}ul,ol{list-style-type: none;margin: 0;padding: 0;}ul li ol{display: none;position: absolute;top: -1px;right:100px;}ul li:hover ol{display: block;}ul li{position: relative;}ul li:hover,ul li:active{color: black;font-size: 25px;font-weight: bold;background-color: darkgray;}ul li a:hover,ul li a:active{color: black;font-size: 25px;font-weight: bold;background-color: darkgray;}.last{background-image: url(img/footer-bg.jpg);text-align: center;margin-top: 300px;}</style></head><body><div class="all"><div class="top"></div><div class="wenzi"><span>闲暇时刻,约上三五志同道合知己,去幽静深林处,寻一最色优美之亭,沏一壶好茶,知已们吟诗作赋,品品茶道。又或是下几盘好棋,又或是各抒已见,聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯,蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结,茶杯在制作的每一个环节,都蕴藏着大学问。越是小茶杯越有品茶的韵味,轻轻抿一口,在嘴间感受一下茶的沁香,仿佛沁透心间。</span><a href="#">更多茶文化>></a></div><img src="img/main.jpg"/><br /><div class="nav"><nav><ul><li><a href="#">首页</a></li><li><a href="#">茶品</a><ol><li><a href="#">乌龙茶</a></li><li><a href="#">普洱茶</a></li><li><a href="#">高山绿茶</a></li></ol></li><li><a href="#">企业</a></li>	<li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></nav></div><div class="last">版权所有&copy;茶韵</div></div></body>
</html>

页面效果:


http://www.ppmy.cn/embedded/134565.html

相关文章

Mac 电脑 使用sudo创建项目后,给了读写权限,仍报权限问题

问题&#xff1a;sudo创建的项目&#xff0c;都已经改成读写权限了&#xff0c;但是修改项目中的内容还是报没权限。 原因&#xff1a;当你使用 sudo 创建项目时。这是因为 sudo 会以 root 用户的身份创建文件和目录&#xff0c;这些文件和目录默认属于 root 用户&#xff0c;…

C++算法竞赛入门常用知识点

万能头文件 #include<bits/stdc.h>遍历容器 带&&#xff1a;取地址&#xff0c;及取出来的是原元素。 不带&&#xff1a;引用&#xff0c;及取出来的是副本&#xff0c;不会对原元素造成影响。 for (auto &ele : st) //auto为类型 st为容器名cout <&l…

Node.js 发展史

自从 Node.js 诞生以来&#xff0c;它经历了许多版本的演进和改进。Node.js 于2009年首次发布&#xff0c;由 Ryan Dahl 创建&#xff0c;从那时起&#xff0c;它经历了许多重要版本和里程碑。在这篇文章中&#xff0c;我将为你介绍 Node.js 从发布至今的一些重要版本&#xff…

LeetCode (206单链表反转)

目录 题目描述: 代码: 第一种: 第二种: 第三种: 第四种: 第五种: 主函数: ListNode类: 题目描述: 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3…

uniapp iOS打包证书过期——重新下载证书及更新文件

证书过期&#xff0c;重新生成步骤 关于所需的证书、标识符、描述文件等请查看iOS打包证书申请流程证书有效期为1年 过期提示 生成证书 点击 钥匙串访问 → 证书助理 → 从证书颁发机构请求证书 &#xff1b; 我这里选择 存储到磁盘 &#xff0c;邮件、名称 可自定义&#…

【折腾一上午】Java POI 导出 Excel 自适应列宽行高

主要方法&#xff1a; 调用 sheet.autoSizeColumn(f) // f是需要自适应的列的序号注&#xff1a; 1. 在设置自适应之前需要调用以下方法&#xff0c;否则会报跟踪列错误。 sheet.trackAllColumnsForAutoSizing() 2. 当你去调用上个方法的时候发现&#xff0c;sheet并没有…

深度学习中的核心概念详解

目录 前言1. 深度神经网络与残差网络1.1 深度神经网络的挑战1.2 残差网络的提出与实现1.3 残差网络的作用 2. 词向量&#xff1a;语义理解的基础2.1 词向量的基本概念2.2 词向量的实现方法与作用 3. 对象嵌入&#xff1a;从词向量到对象表示3.1 对象嵌入的概念3.2 对象嵌入的应…

手机备忘录怎么导出到电脑,

在忙碌的现代生活中&#xff0c;我们常常需要在手机和电脑之间切换工作&#xff0c;手机里的备忘录记录了我们的重要事项&#xff0c;有时候需要在电脑端查看和处理。那么&#xff0c;如何将手机备忘录的内容导出到电脑呢&#xff1f;其实&#xff0c;这个问题的解决方法并不复…