第8章利用CSS制作导航菜单(第八次作业)

news2024/11/23 8:31:56

效果图如下:

Html代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>山水之间</title>
		<style type="text/css">
			@import url("../css/work1.css");
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"><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>
				<h2>山水之间</h2>
			</div>
			<br />
			<div class="center">
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;山和水的融合,是静和动的搭配</p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单调和精彩的结合,也就组成了最美的风景</p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在青山间探索,在绿水中方舟......</p>
			</div>
			<div class="final">
				<h3>风光欣赏</h3>
				<table>
					<tr>
						<td><img src="../img/山水之间img/img1.jpg"/></td>
						<td><img src="../img/山水之间img/img2.jpg"/></td>
						<td><img src="../img/山水之间img/img3.jpg"/></td>
						<td><img src="../img/山水之间img/img4.jpg"/></td>
					</tr>
					<tr>
						<td><p>绿松</p>
							这几棵松树向阳一边的枝芽,下下斜斜的伸着,像搭着一道绿色的天梯。</td>
						<td><p>瀑布</p>
							流云奔涌,群山浮动,滚滚的水流翻山而过,直泻深谷,气势磅礴,宏伟壮观。</td>
						<td><p>青山</p>
							湖泊生活在山脚下,绿绿的青山环抱着他青山湖水印在身边,生机勃勃。</td>
						<td><p>方舟</p>
							泛舟一日能垂钓一片湖。
							<br /><br /><br /></td>
					</tr>
				</table>
				<div class="last">版权所有&copy;山水之问</div>
			</div>
			
		</div>
	</body>
</html>

 CSS代码如下:

.all{
	width: 700px;
	height: 700px;
}
.top{
	position: relative; 
	width: 700px;
	height:100px;
	background-image: url("../img/山水之间img/top.jpg");
	padding: 0px;
	font-style: italic;
}
.top ul {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
h2{
	padding-left: 10px;
	line-height: 80px;
}
a{
	text-decoration: none;
	color: black;
	font-weight: bold;
}
li{
	float: left;
	list-style-type: none;
	width: 50px;
	height: 20px;
	display: block;
}
li a:hover{
	color: white;
	background-image: url("../img/山水之间img/menu-bg.jpg");
}
.center{
	width: 700px;
	height: 200px;
	background-image: url("../img/山水之间img/banner.jpg");
}
.final{
	width: 700px;
	height: 400px;
}
img{
	width: 120px;
	height: 80px;
	background-image: url("../img/山水之间img/img-bg.png");
	padding: 10px;
}
.final p{
	font-size: 15px;
}
.final td{
	font-size: 10px;
}
.final table{
	border-collapse: separate; 
	border-spacing: 20px;
}
.last{
	text-align: center;
	background-color: #acacac;
}

效果图如下:

Html代码如下: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶韵</title>
		<style type="text/css">
			@import url("../css/work2.css");
		</style>
	</head>
	<body>
		<div class="all">
			<img src="../img/茶韵img/top-bg.jpg"/><br /><br />
			<div class="left">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闲暇时刻,约上三五志同道合知己,去幽静深林处,寻一景色优美之亭,沏一壶好茶,知己们吟诗作赋,品品茶道。又或是下几盘好棋,又或是各抒己见,聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯,蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结,茶杯在制作的每一个环节,都蕴藏着大学问。越是小茶杯越有品茶的韵味,轻轻抿一口,在嘴间感受一下茶的沁香,仿佛沁透心间。
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;<a href="#">更多茶文化>></a>
			</div>
			<div class="right">
				<img src="../img/茶韵img/main.jpg"/>
				<ul>
					<li><a>首页</a></li>
					<li><a>茶品</a>
					<ol>
						<li><a>乌龙茶</a></li>
						<li><a>普洱茶</a></li>
						<li><a>山高绿茶</a></li>
					</ol>
					</li>
					<li><a>企业</a></li>
					<li><a>联系</a></li>
					<li><a>关于</a></li>
				</ul>
			</div>
			<div class="last">版权所有&copy;茶韵</div>
		</div>
	</body>
</html>

CSS代码如下:

.all{
	
	width: 900px;
}
.left{
	width: 420px;
	float: left;
}
.left a{
	font-style: italic;
	text-decoration: none;
}
.right{
	width: 420px;
	float: right;
	display: flex;
	align-items: flex-start; 
	gap: 60px;
}
ul{
	margin-top: -1px;
	float:right;
	margin-left: -1px;
}
ul li{
	list-style-type: none;
	position: relative;
}
ul li ol {
	display: none;
	position: absolute;
	list-style-type: none;
	top: -1px;
	left: -100px;
}
ul li a{
	text-align: center;
	margin-top: 0;
	line-height: 40px;
	width: 60px;
	display: block;
}
ul li ol li a{
	font-size: 13px;
	font-weight: bold;
}
ul li:hover ol{
	display: block;
}
ul li a:hover{
	font-weight: bolder;
	background-color: #acacac;
}
ul li ol li a:hover{
	background-color: #acacac;
}
.last{
	width: 900px;
	position: absolute;
	bottom: 330px;
	text-align: center; 
	background-color: #acacac;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230104.html

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

相关文章

Ubuntu22.04 安装图形界面以及XRDP教程

一、准备环境 1.一台服务器安装系统ubuntu&#xff08;这里大部分ubuntu系统可以同用&#xff09; 2.安装的ubuntu系统未安装图形界面 二、操作步骤 1.远程ssh或者直接登录服务器命令行界面 ssh -p 远程端口 rootIP 2.更新系统软件包 sudo apt update # 更新本地的软件包…

深度学习基础知识-编解码结构理论超详细讲解

编解码结构&#xff08;Encoder-Decoder&#xff09;是一种应用广泛且高效的神经网络架构&#xff0c;最早用于序列到序列&#xff08;Seq2Seq&#xff09;任务&#xff0c;如机器翻译、图像生成、文本生成等。随着深度学习的发展&#xff0c;编解码结构不断演变出多种模型变体…

扫描电镜的超低温冷冻制样及传输技术(Cryo-SEM)

扫描电镜的超低温冷冻制样及传输技术(Cryo-SEM) 扫描电镜&#xff08;Scanning Electron Microscope&#xff0c;简称SEM&#xff09;是一种利用聚焦电子束扫描样品表面&#xff0c;通过检测二次电子或反射电子等信号来获取样品表面形貌信息的显微观察技术&#xff1b;然而&…

JS手写:从0开始认识【柯里化】【支持占位符的柯里化】

柯里化 功能介绍 柯里化是拆分函数的一种手段&#xff0c;允许我们以偏函数的方式调用这个函数。 比如说&#xff0c;原来的函数A必须传入三个参数才能运行。经过柯里化处理之后的函数KA传入三个参数&#xff0c;能成功运行&#xff1b;传入两个参数也能&#xff0c;但是会返…

WebSocket 连接频繁断开的问题及解决方案

文章目录 WebSocket 连接频繁断开的问题及解决方案1. 引言2. 什么是 WebSocket&#xff1f;2.1 WebSocket 的优势2.2 WebSocket 的工作原理 3. WebSocket 连接频繁断开的常见原因3.1 服务器端问题3.1.1 服务器负载过高3.1.2 服务器配置不当3.1.3 超时设置 3.2 网络问题3.2.1 网…

openGauss开源数据库实战十二

文章目录 任务十二 openGauss逻辑结构:表管理任务目标实施步骤一、准备工作二、创建表1.新建表默认保存在public模式中2.在一个数据库的不同模式下创建表3.创建表的时候定义约束4.创建表时使用自增数据类型5.使用现有的表创建新表 三、查看表的信息1.在gsql中查看表的定义2.查看…

ADI仿真连接有效性检查方法

1、确认仿真器引脚接插OK. A、检查电脑正常连接 B、确认仿真器引脚定义匹配与上电正确连接 2、打开CCES&#xff0c;打开Debug Configurations 3、连接芯片类型选择 4、点击Configuratior… 5、选择Test…,在点Start&#xff0c;确认状态都OK&#xff0c;即可开始仿真调…

docker部署nginx+nacos+redis+java镜像和容器

nginx镜像制作 Dockerfile内容&#xff1a; # 基础镜像 FROM nginx # author MAINTAINER ruoyi# 挂载目录 VOLUME /home/ruoyi/projects/ruoyi-ui # 创建目录 RUN mkdir -p /home/ruoyi/projects/ruoyi-ui # 指定路径 WORKDIR /home/ruoyi/projects/ruoyi-ui # 复制conf文件到路…

SAP RFC 用户安全授权

一、SAP 通讯用户 对于RFC接口的用户&#xff0c;使用五种用户类型之一的“通讯”类型&#xff0c;这种类型的用户没有登陆SAPGUI的权限。 二、对调用的RFC授权 在通讯用户内部&#xff0c;权限对象&#xff1a;S_RFC中&#xff0c;限制进一步可以调用的RFC函数授权&#xff…

Uniapp的H5以及App不支持后端传FormData类型参数的解决方案

在uniapp中不支持FormData的传参&#xff0c;这就很恶心&#xff1b;如果强行传的话会提示&#xff0c;请求失败的报错信息。 因为后端必须要FormData类型的传参&#xff0c;所以在查阅一系列方案后&#xff0c;有一种解决办法可以完美解决。 代码&#xff1a; init() {const…

PyTorch 训练集、验证集、测试集、模型存档、正则化项

为什么要将数据集划分为三个部分&#xff1f;三个部分的作用&#xff1f;三个部分数据集的比例应如何设定&#xff1f; 另外一种常见的数据集划分方法是将数据集划分为两个部分&#xff08;训练集和测试集&#xff09;&#xff0c;这种划分方法存在的问题在于&#xff0c;模型…

Flask轻松上手:从零开始搭建属于你的Web应用

目录 一、准备工作 二、安装Flask 三、创建你的第一个Flask应用 创建一个新的Python文件 编写Flask应用代码 运行Flask应用 四、创建一个简单的博客系统 定义路由和文章列表 创建模板文件 运行并测试博客系统 五、使用数据库存储用户信息 安装Flask-SQLAlchemy 修…

游戏启动失败:8种修复xinput1_3.dll错误的几种方法教程,轻松解决xinput1_3.dll错误

当你准备好在一天的工作后放松一下&#xff0c;启动你最爱的游戏&#xff0c;却突然收到一个“xinput1_3.dll 丢失”的错误消息&#xff0c;这无疑是令人沮丧的。幸运的是&#xff0c;xinput1_3.dll丢失问题通常可以通过几个简单的步骤来解决。本文将详细介绍这些步骤&#xff…

Halcon-模板匹配(WPF)

halcon的代码 dev_open_window (0, 0, 512, 512, black, WindowHandle) read_image (Image, C:/Users/CF/Desktop/image.jpg) dev_display (Image)draw_rectangle1 (WindowHandle, Row1, Column1, Row2, Column2) gen_rectangle1 (Rectangle, Row1, Column1, Row2, Column2) r…

《AI从0到0.5》之提示工程

参考资料&#xff1a;《AI提示工程&#xff1a;基础 应用 实例》万欣 主要内容&#xff1a; 该文章是对《AI提示工程&#xff1a;基础 应用 实例》这本书的浓缩整理&#xff0c;旨在让读者快速的了解AI提示工程的概念和设计原则、策略和技巧、部分应用案例。并结合笔者自…

@FISCO BCOS的朋友们,年度生态大会邀您查收成果集结令

七载春秋&#xff0c;繁星相映。站在开源七周年的重要节点上&#xff0c;FISCO BCOS年度生态大会再次面向全社区发出产业数字化成果集结令&#xff0c;邀请FISCO BCOS的朋友们于今年12月份共探区块链产业的发展现状与未来。 作为深圳国际金融科技节的重要组成部分和特色活动&a…

Linux文件清空的五种方法总结分享

简介&#xff1a; 每种方法各有优势&#xff0c;选择最合适的一种或几种&#xff0c;可以极大提高您的工作效率。更多有关Linux系统管理的技巧与资源&#xff0c;欢迎访问&#xff0c;持续提升您的运维技能。 在Linux操作系统环境下&#xff0c;清空文件内容是日常维护和管理中…

Android文件选择器[超级轻量级FilePicker测试没有问题][挣扎解决自带文件管理器获取不到绝对地址问题而是返回msf%3A1000038197]

超级轻量级FilePicker测试没有问题 本文摘录于&#xff1a;https://blog.csdn.net/gitblog_00365/article/details/141449437只是做学习备份之用&#xff0c;绝无抄袭之意&#xff0c;有疑惑请联系本人&#xff01; 今天真的是发了疯的找文件管理器,因为调用系统自带的文件管理…

向量的基础知识和矩阵向量的坐标旋转

向量的基础&#xff1a; 定义&#xff1a; 既有大小&#xff0c;又有方向的量叫做向量&#xff08;Vector&#xff09;。 在几何上&#xff0c;向量用有向线段来表示&#xff0c;有向线段长度表示向量的大小&#xff0c;有向线段的方向表示向量的方向。其实有向线段本身也是向…

java控制台打印加法口诀

具体代码&#xff1a; public class AdditionTable {public static void main(String[] args) {//add();//add2();//add3();add1();}public static void add(){for(int i2;i<10;i){for(int j1;j<i;j){String format String.format("%-7s",j""(i-j)…