第八章作业-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_87184057/article/details/143457098

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>山水之间</title>
		<style>
			h1{
				font-style: italic;
				padding-left: 10px;
				float: left;
			}
			a{
				text-decoration: none;
				display: block;
				width: 50px;
				padding: 8px;
				float: right;
				text-align: center;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding-top: 60px;
			}
			a:link,a:visited{
				color: #000000;
			}
			a:hover,a:active{
				background-color: #ffffff;
				color: #ff0000;
			}
			table{
				width: 100%;
				height: 150px;
				padding: 0;
				margin: 0;
				border-collapse: separate;
				border-spacing: 100px;
			}
			.top{
				background-image: url(img/top.jpg);
				width: 100%;
				height: 100px;
			}
			.banner{
				background-image: url(img/banner.jpg);
				width: 100%;
				height: 180px;
				padding-left: 30px;
				padding-top: 10px;
				margin-top: 10px;
			}
			.main{
				width: 100%;
				height: 550px;
			}
			.img{
				float: left;
				padding: 50px;
				margin-left: 60px;
			}
			.wen{
				width: 188px;
				height: 138px;
				float: left;
				margin-top: -40px;
				padding-left: 50px;
				padding-right: 50px;
				margin-left: 60px;
			}
			.bottom{
				width: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<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="banner">
			山与水的融合，是静和动的搭配<br /><br />
			单调与精彩的结合，也就组成了最美的风景<br /><br />
			在青山间探索，在绿水间泛舟......
		</div>
		<div class="main">
			<h2>风光欣赏</h2>
			<div class="img">
				<img src="img/img1.jpg"/>
			</div>
			<div class="img">
				<img src="img/img2.jpg"/>
			</div>
			<div class="img">
				<img src="img/img3.jpg"/>
			</div>
			<div class="img">
				<img src="img/img4.jpg"/>
			</div>
			<div class="wen">
				<h3>绿松</h3>
				这几颗松树向阳一边的枝芽，向下斜斜地伸着，向搭起一道绿色的天梯。
			</div>
			<div class="wen">
				<h3>瀑布</h3>
				流云奔涌，群山浮动、滚滚的云流翻山而过，直泻深谷，气势磅礴，宏伟壮观。
			</div>
			<div class="wen">
				<h3>青山</h3>
				湖泊生活在山脚下，绿绿的青山环抱着她，清敞的湖水映出身边的生机勃勃。
			</div>
			<div class="wen">
				<h3>泛舟</h3>
				泛舟一日景，垂钓一片湖。
			</div>
		</div>
		<div class="bottom">
			版权所有&copy;山水之间
		</div>
	</body>
</html>

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