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

效果图如下:

Html代码如下:

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代码如下:

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代码如下:

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代码如下:

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;
}
相关推荐
懒大王爱吃狼20 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
深度学习实战训练营25 分钟前
基于CNN-RNN的影像报告生成
人工智能·深度学习
秃头佛爷1 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
昨日之日20062 小时前
Moonshine - 新型开源ASR(语音识别)模型,体积小,速度快,比OpenAI Whisper快五倍 本地一键整合包下载
人工智能·whisper·语音识别
浮生如梦_2 小时前
Halcon基于laws纹理特征的SVM分类
图像处理·人工智能·算法·支持向量机·计算机视觉·分类·视觉检测
深度学习lover2 小时前
<项目代码>YOLOv8 苹果腐烂识别<目标检测>
人工智能·python·yolo·目标检测·计算机视觉·苹果腐烂识别
热爱跑步的恒川3 小时前
【论文复现】基于图卷积网络的轻量化推荐模型
网络·人工智能·开源·aigc·ai编程
API快乐传递者3 小时前
淘宝反爬虫机制的主要手段有哪些?
爬虫·python
阡之尘埃5 小时前
Python数据分析案例61——信贷风控评分卡模型(A卡)(scorecardpy 全面解析)
人工智能·python·机器学习·数据分析·智能风控·信贷风控
孙同学要努力7 小时前
全连接神经网络案例——手写数字识别
人工智能·深度学习·神经网络