第八章课后作业

最新推荐文章于 2025-05-26 20:23:27 发布

辛吉聪

最新推荐文章于 2025-05-26 20:23:27 发布

阅读量113

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/2402_87190919/article/details/143700357

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>山水之间</title>
		<style>
			.class1,.class2{
				float: left;
				position: relative;
			}
			h1 {
				position: absolute;
				top: 10px;
				left: 30px;
			}
			ul {
				position: absolute;
				bottom: -10px;
				right: 5px;
			}
			ul li {
				list-style: none;
				float: right;
				padding: 10px;
			}
			a {	
				text-decoration: none;
				color: black;	
			}
			a:hover {
				background-color: lightgreen;
				color: white;
			}
			p {
				position: absolute;
				top: 10px;
				left: 10px;
				line-height: 2.3em;
			}
			td{
				width: 100px;
				padding-right: 50px;
			}
			td img {
				border:  8px solid gray;
			}
			h2 {
			    clear: both; /* 清除前面的浮动 */
				margin: 20px 0; /* 上下边距 */
			}
			span {
				position: absolute;
				bottom: 10px;
				left: 400px;
			}
		</style>
	</head>
	<body>
		<div class="class1">
			<img src="../照片/top.jpg" alt="" />
			<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="class2">
				<img src="../照片/banner.jpg" alt="">
				<p>山和水的融合，是静和动的搭配<br>
				单调与精彩的结合，也就组成了最美的风景<br>
				在青山间探索，在绿水间泛舟......</p>
		</div>
		<h2>风光欣赏</h2>
		<table>
			<tr>
				<td><img src="../照片/img1.jpg" alt=""></td>
				<td><img src="../照片/img2.jpg" alt=""></td>
				<td><img src="../照片/img3 (2).jpg" alt=""></td>
				<td><img src="../照片/img4 (2).jpg" alt=""></td>
			</tr>
			<tr>
				<td>绿松<br>这几颗松树向阳一边的枝桠，向下斜斜地伸着，像搭起一道绿色的天梯</td>
				<td>瀑布<br>流云奔涌,群山浮动,滚滚的云流翻山而过,直污深谷,气势磅碍,宏伟壮观。</td>
				<td>青山<br>湖泊生活在山脚下，绿线的青山环抱着她，清澈的湖水映出身边的生机勃勃。</td>
				<td>泛舟<br>泛舟一日景，垂钓一片金</td>
			</tr>
		</table>
		<center>
				<br><br>
				<span>版权所有&copy;山水之间</span>
		</center>
 
	</body>
</html>

第二题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶韵</title>
		<style type="text/css">
			.all{
				width: 900px;
			}
			.top{
				height: 200px;
				margin: auto;
				background: url('../照片/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('../照片/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="../照片/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>

第八章 课后作业

第八章课后作业