八、利用CSS制作导航栏菜单的习题

伏飞而行2024-12-02 13:35

题目一：

利用CSS技术，结合链接和样表，设计并实现" 山水之间 "页面。

运行效果：

代码

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>山水之间</title>
		<style type="text/css">
			.all{
				margin-left: 20px;
				width: 1000px;
			}
			.top{
				margin-top: 15px;
				background: url(img1/top.jpg);
				height: 100px;
				width: 1000px;
			}
			ul{
				list-style-type: none;
			}
			li{
				float: right;
			}
			.top ul li{
				float: right;
				margin: 1px;
			}
			a{
				display: block;
				margin-top: -42px;
				padding: 10px;
				width: 35px;
				text-decoration: none;
				color: black;
			}
			a:hover,a:active{
				background-color: black;
				color: greenyellow;
			}
			h1{
				vertical-align: middle;
				display: inline-block;
				font-style: italic;
			}
			.two{
				background: url(img1/banner.jpg) no-repeat;
				height: 200px;
			}
			p{
				padding-top: 10px;
				padding-left: 30px;
			}
			img{
				border: 1px solid black;
				padding: 10px;
				margin: 15px;
				margin-left: 0px;
			}
			.admire{
				width: 1000px;
			}
			.bottom{
				text-align: center;
				margin-top: 15px;
				color: #838b83;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				&emsp;<h1>山水之间</h1>
				<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="two">
				<p>山和水的融合，是静和动的搭配</p>
				<p>单调与精彩的结合，也就组成了最美的风景</p>
				<p>在青山间探索，在绿水间泛舟......</p>
			</div>
			<div>
				<h2>风光欣赏</h2>
				<table class="admire">
					<tr>
						<td><img src="img1/img1.jpg"/></td>
						<td><img src="img1/img2.jpg"/></td>
						<td><img src="img1/img3.jpg"/></td>
						<td><img src="img1/img4.jpg"/></td>
					</tr>
					<tr>
						<td><h3>绿松</h3></td>
						<td><h3>瀑布</h3></td>
						<td><h3>青山</h3></td>
						<td><h3>泛舟</h3></td>
					</tr>
					<tr>
						<td>这几棵松树向阳一边的枝桠，向下斜斜地伸着，像搭起一道绿色的天梯。</td>
						<td>流云奔涌,群山浮动,滚滚的云流翻山而过,直汽深谷,气势磅礴,宏伟壮观。</td>
						<td>湖治生活在山脚下，绿绿的青山环抱着她，清澈的湖水映出身边的生机勃勃</td>
						<td>泛舟一日最，垂钓一片湖。</td>
					</tr>
				</table>
			</div>
			<div class="bottom">版权所有&copy;山水之间
			</div>
		</div>
	</body>
</html>

代码讲解：

（1）

html 复制代码 
.top ul li{
				float: right;
				margin: 1px;
			}
  • top ul li 是一个复合选择器，它的含义是 ul 元素是top 的元素内部的 ，并且这个 li 又是 ul 元素内部的。
  • 在本例中就是为" 首页、诗文、风景、留言、关于"设置右浮动，外边距为1px

（2）

  • 1. 整体容器设定 ：
    • 使用**class** 为**all** 的**<div>** 作为整个页面内容的主要容器，通过设置**margin-left** 和**width**来限定内容的展示范围并使其在页面上有一定的偏移和宽度约束。
  • 2. 页面区域划分 ：
    • 顶部区域 ：通过 class为 top 的**<div>** 构建，包含一个标题**<h1>** （"山水之间"）和一个导航栏（由无序列表 <ul> 及其中的**<li>** 和**<a>** 组成）。导航栏的**<li>** 元素通过浮动设置实现从右向左的横向排列，每个**<a>**链接设置了特定的样式，如块级显示、垂直偏移、内边距等，并在鼠标悬停和点击时改变背景色和文本颜色。
    • 横幅区域 ：class 为**two** 的**<div>** 用于展示与山水主题相关的描述性段落**<p>**，并设置了特定的背景图片以增强视觉效果。
    • 风光欣赏区域 ：通过一个无类名的**<div>** 包含一个标题**<h2>** （"风光欣赏"）和一个**class** 为**admire** 的**<table>** 。表格用于整齐地展示多幅山水风景图片，每张图片下方配有相应的标题**<h3>**和描述性文字。
    • 底部区域 ：class 为**bottom** 的**<div>**用于显示版权信息，通过设置文本居中、顶部边距和文本颜色来规范其样式。

题目二

利用CSS技术，结合链接和样表，设计并实现" 茶韵 "页面。

运行效果：

代码：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶韵</title>
		<style type="text/css">
			.all{
				width: 900px;
			}
			.MainBody{
				width: 380px;
				float: left;
				margin-left: 30px;
			}
			.MainBody a{
				float: right;
				text-decoration: none;
				color: black;
				margin-right: 30px;
			}
			ul,ol{
				list-style-type: none;
				margin: 0px;
				padding: 0px;
			}
			ul li{
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				top: -1px;
				right: 100px;
			}
			ul li:hover,ul li:active{
				background-color: gray;
				font-weight:bolder;
			}
			ul li:hover ol{
				display: block;
			}
			.NavBar{
				float: right;
				margin-top: -190px;
				margin-right: 40px;
			}
			.TeaP,.MainBody{
				margin-top: 20px;
			}
			.MainBody a{
				
			}
			img{
				margin-left: 30px;
			}
			ul li a,ul li ol li a{
				text-align: center;
				width: 100px;
				color: black;
				text-decoration: none;
				line-height: 35px;
				font-size: 20px;
				display: block;
			}
			.bottom{
				background: url(img1/footer-bg.jpg);
				text-align: center;
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<img src="img1/top-bg.jpg"/>
			<div class="MainBody">
				&emsp;&emsp;闲暇时刻，约上三五志同道合知己，去幽静深林寻一景色优美之亭，沏一壶好茶，知已们吟诗作处，赋，品品茶道。又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、轴药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。
				<a href="#">更多茶文化>></a>
			</div>
			<div class="TeaP">
			<img src="img1/main.jpg"/>
			<br />
			</div>
			<nav>
			<div class="NavBar">
							<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>
			</div>
			</nav>
			<br /><br />
			<div class="bottom">
				版权所有&copy;茶韵
			</div>
		</div>
		
	</body>
</html>
 
​

代码讲解：

（1）

  • 图上" 茶品 "、" 普洱茶 "的背景颜色不同于其他的文字，是因为在这里

    html 复制代码 
    ul li:hover,ul li:active{
				background-color: gray;
				font-weight:bolder;
			}

    设置了鼠标悬停和鼠标点击时的样式

（2）

  • 本例中的默认隐藏二级导航的实现

  • 对于有二级导航的 "茶品" 选项，在其**<li>** 标签内部嵌套了一个**<ol>** （有序列表）。这个**<ol>** 中的**<li>** 元素就构成了 "茶品" 的二级导航，每个**<li>** 中的**<a>** 标签用于定义链接。

    html 复制代码 
    <li><a href="#">茶品</a>
	<ol>
		<li><a href="#">乌龙茶</a></li>
		<li><a href="#">普洱茶</a></li>
		<li><a href="#">高山绿茶</a></li>
	</ol>
</li>

  • 默认隐藏可以使用 CSS 的**display** 属性来实现。

    html 复制代码 
    ul li ol {
    display: none;
}

（3） 页面布局

  1. 整体容器设定 ：
    • 使用class为all的<div>作为整个页面内容的主要容器，通过设置width来限定内容的展示范围。
  2. 页面区域划分 ：
    • 顶部图片区域 ：在class为all的<div>内首先放置一张通过<img>标签引入的img1/top-bg.jpg图片，作为页面顶部的装饰或背景元素。
    • 主体内容区域 ：
      • 茶文化描述部分 ：通过class为MainBody的<div>来呈现关于品茶情境及茶杯制作学问等相关的文字描述内容，并且在结尾处设置了一个指向更多茶文化内容的链接<a>。该<div>通过设置width、float等属性进行布局定位，使其在页面中占据一定位置并与其他元素协调排列。
      • 茶相关图片部分 ：通过class为TeaP的<div>展示一张img1/main.jpg的图片，用于直观呈现茶相关的视觉元素，与文字描述部分相互补充。
    • 导航栏区域 ：利用<nav>标签包裹一个class为NavBar的<div>，其中包含一个<ul>无序列表构建导航栏。导航栏中的每个<li>代表一个主要导航选项，对于 "茶品" 选项还通过嵌套<ol>有序列表实现了二级导航，展示不同种类的茶。通过设置float、margin等属性将导航栏定位在页面右侧合适位置。
    • 底部区域 ：通过class为bottom的<div>展示版权信息，设置了背景图片img1/footer-bg.jpg并使文本居中显示，以规范其样式并作为页面底部的标识。
相关推荐
yanmengying27 分钟前
VUE脚手架练习
前端·javascript·vue.js
APItesterCris30 分钟前
对于大规模的淘宝API接口数据，有什么高效的处理方法？
linux·服务器·前端·数据库·windows
突然暴富的我34 分钟前
html button 按钮单选且 高亮
前端·javascript·html
用户49430538293801 小时前
一种简单粗暴的大屏自适应方案，原理及案例
前端
fury_1231 小时前
怎么获取键值对的键的数值？
java·前端·数据库
午后书香1 小时前
看两道关于异步的字节面试题...
前端·javascript·面试
用户2404817096211 小时前
我来助你：Coze帮你零代码生成智能体
前端·人工智能·coze
是程序喵呀1 小时前
CSS 定位
前端·css·html
心肝到爆1 小时前
vue3项目最新eslint9+prettier+husky+stylelint+vscode配置
前端·javascript·vue.js·git·前端框架·node.js
爱吃羊的老虎2 小时前
【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题（小心踩坑）
开发语言·前端·javascript
热门推荐
01【halcon】halcon字符识别——OCR02【postgresql 基础入门】多表联合查询 join与union 并，交，差等集合操作，两者的区别之处03玄机平台应急响应—webshell查杀04使用FModel提取游戏资产05Docker 夺命连环 15 问06【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总072024数学建模国赛高教社杯C题:农作物的种植策略 思路代码文章助攻手把手保姆级08软件工程从理论到实践客观题汇总(头歌第一章至第八章)09PyTorch机器学习实现液态神经网络10扩展大型视觉-语言模型的视觉词汇：Vary 方法