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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人生哲理</title>
    <style>
		.parent {
		    display: flex;
		    justify-content: center; /* 水平居中 */
		}
 
        .container {
            position: relative;
            display: inline-block;
			
        }
        .container img {
            display: block;
        }
        .ww {
            position: absolute;
            top: 100px;
            left: 350px;
            padding: 5px;
			font-size: 2em;
			font-weight: bolder;
			letter-spacing: 10px;
			writing-mode: vertical-rl;
        }
		.ww1 {
		    position: absolute;
		    top: 160px;
		    left: 250px;
		    padding: 5px;
			letter-spacing: 10px;
			writing-mode: vertical-rl;
		}
		
		 .button {
			position: absolute;
			right: -80px;
			top: 25%;
		    display: inline-block;
		    color: black;
		    font-size: 20px;
			letter-spacing: 10px;
		    cursor: pointer;
		    writing-mode: vertical-rl; /* 垂直书写模式 */
		        
		    }
    </style>
</head>
<body>
	<div class="parent">
    <div class="container">
        <img src="照片/bg.jpg">
        <div class="ww">让生活简单一点</div>
		<div class="ww1">定而后能静,静而后能安。</div>
		<!-- <div class="text2"><input type="button" name="button" value="进入网站" /></div> -->
        <button class="button">进入网站</button>
	</div>
	</div>
</body>
</html>