第五章课后作业

最新推荐文章于 2024-11-12 11:19:19 发布

猫咪朵朵

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量418

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_80634189/article/details/142830955

版权

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

代码：

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

结果：

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

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人生哲理</title>
		<style>
			.all{
						width:680px;
						height:850px;
					}
					.main{
						width:600px;
						height:600px;
						float: left;
						background-image: url(img/bg.jpg);
					}
					.text1{
						width:100px;
						height:650px;
						float: left;
						font-size: 20px;
						font-family:"楷体";
						color: #0000ff;
						letter-spacing: 10px;
						margin:200px 200px 50px 130px;
						writing-mode: vertical-rl;
					}
					.text2{
						width:100px;
						height:700px;
						float: left;
						font-size: 40px;
						letter-spacing: 10px;
						margin:100px 50px 0px -120px;
						writing-mode: vertical-lr;
						
					}
					.right{
						width:40px;
						height:120px;
						font-size: 30px;
						float: left;
						margin:150px 5px 0px 20px;
						writing-mode: vertical-lr;
						text-align:start;
						background-color: aqua;
					}
				</style>
	</head>
	<body>
		<div class="all">
					<div class="main">
						<div class="text1">定而后能静，静而后能安</div>
						<div class="text2">让生活简单一点</div>
					</div>
					<!-- <br /><br /><br /><br /><br /> -->
					<div class="right">进入网站</div>
				</div>
	</body>
</html>