第八章课后习题

牢白

已于 2024-12-03 13:07:20 修改

阅读量191

点赞数 4

文章标签： css 前端 html

于 2024-11-01 20:56:24 首次发布

本文链接：https://blog.csdn.net/2302_80345247/article/details/143440523

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>山水之间</title>
		<style type="text/css">
			.all{
				width: 800px;
				height: 600px;
			}
			.top{
				width: 800px;
				height: 100px;
				background: url(img/top.jpg)no-repeat;
			}
			.left{
				width: 200px;
				font-size: 25px;
				line-height: 30px;
				padding-top: 25px;
			}
			a{
				text-decoration: none;
				width: 50px;
				padding: 5px;
				line-height: 10px;
				color: black;
				float: right;
			}
			a:hover,a:active{
				background-color: red;
				color: white;
			}
			ul{
			list-style-type: none;
			}
			li{
				float: right;
			}
			.one{
				width: 800px;
				height: 200px;
				margin-top: 10px;
				padding-left: 25px;
				padding-top: 1px;
				background: url(./img/banner.jpg)no-repeat;
			}
			p{
				font-size: 15px;
				margin-top: 20px;
			}
			td{
				text-align: left;
				padding-left: 20px;
			}
			img{
				width: 150px;
				height: 100px;
				border: 5px solid black;
			}
			.bottom{
				width: 800px;
				height: 30px;
				margin-top: 50px;
			}
			h1{
				line-height: 100px;
				width: 150px;
			}
			
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<div class="left">山水之间</div>
				<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="one">
				<p>山和水的融合，是静和动的搭配</p>
				<p>单调和精彩的结合，也组成了最美的风景</p>
				<p>在青山间探索，也在绿水间方舟......</p>
			</div>
			<h1>风光欣赏</h1>
			<table>
				<tr>
				<td><img src="img/img1.jpg"/></td>
				<td><img src="img/img2.jpg"/></td>
				<td><img src="img/img3.jpg"/></td>
				<td><img src="img/img4.jpg"/></td>
				</tr>
				<tr>
					<td >绿松<br />这几颗松树向阳一边的枝桠，向下斜斜地伸着，像搭起一道绿色的天梯。</td>
					<td>瀑布<br />流云奔涌，群山浮动，滚滚的云流翻山而过，直泄深谷，气势磅礴，宏伟壮观。</td>
					<td>青山<br />湖泊生活中山脚下，绿绿的青山环抱着她，清澈的湖水映出身边的生机勃勃。</td>
					<td>泛舟<br />泛舟一日景，垂钓一片湖。</td>
				</tr>
			</table>
		<div class="bottom">
			<p align="center">版权所属&copy;山水之间</p>
		</div>
		</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>

运行结果：