第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;
}
相关推荐
sp_fyf_20241 小时前
【大语言模型】ACL2024论文-19 SportsMetrics: 融合文本和数值数据以理解大型语言模型中的信息融合
人工智能·深度学习·神经网络·机器学习·语言模型·自然语言处理
CoderIsArt1 小时前
基于 BP 神经网络整定的 PID 控制
人工智能·深度学习·神经网络
编程修仙1 小时前
Collections工具类
linux·windows·python
开源社1 小时前
一场开源视角的AI会议即将在南京举办
人工智能·开源
FreeIPCC1 小时前
谈一下开源生态对 AI人工智能大模型的促进作用
大数据·人工智能·机器人·开源
芝麻团坚果1 小时前
对subprocess启动的子进程使用VSCode python debugger
linux·ide·python·subprocess·vscode debugger
机器之心1 小时前
全球十亿级轨迹点驱动,首个轨迹基础大模型来了
人工智能·后端
z千鑫1 小时前
【人工智能】PyTorch、TensorFlow 和 Keras 全面解析与对比:深度学习框架的终极指南
人工智能·pytorch·深度学习·aigc·tensorflow·keras·codemoss
EterNity_TiMe_1 小时前
【论文复现】神经网络的公式推导与代码实现
人工智能·python·深度学习·神经网络·数据分析·特征分析
Stara05112 小时前
Git推送+拉去+uwsgi+Nginx服务器部署项目
git·python·mysql·nginx·gitee·github·uwsgi