第五章课后作业-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_83184791/article/details/142875942

用盒模型制作一个“走进内心的文学”页面

代码：

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

运行结果：

用盒模型制作一个“人生哲理”页面

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人生哲理</title>
		<style type="text/css">
			.father{
				width:600px;
				height:600px;
				background-image: url(img/1.8.jpg);
				float: left;
			}
			.text1{
				width:100px;
				height:400px;
				float: left;
				font-size: 20px;
				font-family: "楷体";
				letter-spacing: 15px;
				margin:150px 200px 50px 130px;
				writing-mode: vertical-rl;
			}
			.text2{
				width:100px;
				height:350px;
				float: left;
				font-size: 30px;
				font-family: "黑体";
				letter-spacing: 15px;
				margin:100px 50px 0px -120px;
				writing-mode: vertical-lr;
				
			}
			.right{
				width:50px;
				height:300px;
				font-size: 30px;
				float: left;
				margin:100px 5px 0px 20px;
				writing-mode: vertical-lr;
				text-align: center;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<div class="father">
				<div class="text1">定而后能静，静而后能安</div>
				<div class="text2">让生活简单一点</div>
			</div>
			<div class="right">进入网站</div>
		</div>
	</body>
</html>

运行结果：