第五章作业

东隅412

于 2024-10-11 21:25:08 发布

阅读量128

点赞数 7

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2302_81317864/article/details/142856511

版权

1.用盒模型技术，制作一个“走进内心的文学”页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>走进内心的文字</title>
		<style>
			.all{
				width: 700px;
				height: 600px;
			}
			.father{
				background-image: url(img/top-bg.png);
			}
			.one,.two{
				background-image: url(img/menu-bg.png);
				width: 340px;
				height: 100px;
			}
			.content{
				text-indent: 2em;
				
			}
			.three{
				background-image: url(img/menu-bg.png);
			}
		</style>
	</head>
	<body>
	<div class="all">
		<div class="father">
			<br />
			<h1 align="center">走进内心的文字</h1>
			<br />	
		<div class="one" style="float: left;">
			<h2 align="center">生活随笔</h2>
			&emsp;&emsp;<a href="#">感动心灵</a>
			&emsp;&emsp;<a href="#">人生哲理</a>
			&emsp;&emsp;<a href="#">励志文章</a>
		</div>
		<div class="two" style="float: right;">
			<h2 align="center">抒情散文</h2>
			&emsp;&emsp;<a href="#">唯美句子</a>
			&emsp;&emsp;<a href="#">美文欣赏</a>
			&emsp;&emsp;<a href="#">爱情是聚</a>
		</div>
		</div>		
		<div class="content">
			<p>当你终于站在时光这头，回首过往的种种，会无遇憾地告别此生吗?一位白发态的老者，面对镜头说道:这辈子做自己的时光太少，一直在为别人活，从来没有为自日真正活一场。人这一生，确实有许多牵绊，让我们放不开手脚，仿佛作茧自缚，一生都在别人眼光做成的无形大网中挣扎，从没痛痛快快为自己而活。这样的人生，值得留吗?这样的人生，值得回首吗?</p>
			<p>人总会被别人的成功影响，别人混得好，心里总会咯噔一下，仿佛有一块石头堵着，很不舒服。为何不放宽心，多看看自己有的，不要总想着别人有的，如此就能释怀很多。</p>
			<p>人生十之八九都是在自寻烦恼，很多事本和自己八竿子打不着，亲戚的儿子混得又和你有什么关系呢?世界上混得好的人那么多，难道每一个人都要拿出来让自己难好受一次吗?多看看自己有的，才能知足常乐。</p>
		</div>	
		<div class="three">
			<hr color="#000000"/>
			<center style="font-family: '楷体'";>版权所有&copy;走进内心的文学</center>
		</div>
	</div>
	</body>
</html>

2.用盒模型技术，制作一个“人生哲理”页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>人生哲理</title>
		<style>
		.all{
			width: 700px;
			height: 600px;
			float: left;
		}
		.one{
			background-image: url(img/bg.jpg);
			width: 600px;
			height: 600px;
			writing-mode: vertical-lr;
			float: left;
		}
		.two{
			font-size: 25px;
			font-family: 楷体;
			color: #838b83;
			letter-spacing: 5px;
			margin: 190px 100px 0px 250px;
		}
		.three{
			font-size: 30px;
			letter-spacing: 5px;
			margin: 130px 60px 0px 45px;
		}
		.right{
			font-size: 25px;
			width: 40px;
			height: 150px;
			text-align: center;
			float: right;
			margin: 130px 30px 200px 10px;
			writing-mode: vertical-lr;
			background-image: url(img/bg1.JPG);
		}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="one">
				<div class="two">定而后能静，静而后能安</div>
				<div class="three">让生活简单一点</div>
			</div>
			<div class="right">进入网站</div>
		</div>
	</body>
</html>