第五章 CSS盒模型作业

laymo

已于 2024-10-19 16:32:45 修改

阅读量160

点赞数 3

文章标签： css 前端

于 2024-10-13 19:19:44 首次发布

本文链接：https://blog.youkuaiyun.com/dhy_04/article/details/142902576

版权

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人生哲理</title>
		<style type="text/css">
			.photoshop{
				background-image: url(img/bg.jpg);
				width: 600px;
				height: 600px;
				position: relative;
			}
			.wenzi1{
				font-size: 45px;
				padding-left: 350px;
				padding-top: 40px;
				position:absolute;
			}
			.wenzi2{
				font-size: 30px;
				padding-left:250px;
				padding-top: 130px;
				color: #808080;
				font-family: "楷体";
				position:absolute;
			}
			.wangzhan{
				color: #fffff0;
				background-color:#808080;
				font-size: 30px;
				/*margin不会影响内部背景色的显示区域！！*/
				margin-left: 650px;
				margin-top: 100px;
				position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="photoshop">
			<p class="wenzi1">
				让<br>生<br>活<br>简<br>单<br>一<br>点</p>
			<p class="wenzi2">
				定<br>而<br>后<br>能<br>静<br>，<br>静<br>而<br>后<br>能<br>安</p>
			<div class="wangzhan">
				<p>
					进<br>入<br>网<br>站</p>
			</div>
		</div>
	</body>
</html>