第五章CSS盒模型（第五次作业）

最新推荐文章于 2024-11-14 17:40:35 发布

榴莲千丞

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量339

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/H2629896520/article/details/142861167

版权

题一：

效果图如下：

Html代码如下：

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

CSS代码如下：


.top{
	width: 700px;
	height: 100px;
	line-height: 3;
	background-image:url("../img/top-bg.png");
}
.all{
	width: 700px;
	height: 650px ;
	margin: 20px;
}

.left{
	text-align: center;
	width: 345px;
	height: 100px;
	float: left;
	background-image: url("../img/menu-bg.png");
		background-color: #fff;
}
a{
	padding: 20px;
}

.right{
	text-align: center;
	width: 345px;
	height: 100px;
	float: right;
	padding-left: 0px;
	background-image: url("../img/menu-bg.png");
}
.both{
	width: 700px;
	height: 100px;
}
.center{
	width: 700px;
	height: 250px;
	background-color: #bbeeff;
}
.last{
	width: 700px;
	height: 30px;
	font-family:'楷体';
	text-align: center;
	border-top: 1px #000000 solid;
	background-image:url("../img/menu-bg.png");	
}

题二：

效果图如下：

Html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人生哲理</title>
		<style type="text/css">
			@import url("../js/work10.css");
		</style>
	</head>
	<body>
		<div class="div">
		<div class="all">
			<div class="left">
				定而后能静，静而后能安
			</div>
			<div class="right">
				让生活简单一点
			</div>
		</div>
		<div class="last">进入网站</div>
		</div>
	</body>
</html>

CSS代码如下：

.div{
	width: 800px;
	height: 600px;
	float: left;
}
.all{
	width: 600px;
	height: 600px ;
	margin: 0px 50px;
	float: left;
	writing-mode: vertical-lr;
	background-image: url("../img/bg.jpg");
}
.left{
	font-size: 25px;
	font-family: '楷体';
	letter-spacing: 10px;
	margin: 160px 100px 0px 250px;
}
.right{
	font-size: 30px;
	letter-spacing: 10px;
	margin-top: 120px;
}
.last{
	width:30px;
	height:200px;
	margin: 100px 50px 200px 50px;
	letter-spacing: 10px;
	font-size: 25px;
	padding: 5px;
	writing-mode: vertical-lr;
	text-align: center;
	background-color:#acacac;
}