1.用盒模型技术，制作一个“走进内心的文学”页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>走进内心的文字</title>
<style type="text/css">
.all{
width:700px;
height:850px;
}
.top{
text-align: center;
width: 700px;
height: 100px;
background-image: url(img/top-bg.png);
}
.middle{
width:700px;
height:150px;
}
.left{
width:340px;
height:150px;
text-align: center;
float: left;
background-image: url(img/menu-bg.png);
}
.right{
width:340px;
height:150px;
text-align: center;
float: right;
background-image: url(img/menu-bg.png);
}
.bottom{
width:700px;
height:70px;
text-align: center;
background-image: url(img/menu-bg.png);
}
.main{
width:700px;
height:250px;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="all">
<div class="top">
<h1>走进内心的文字</h1>
</div>
<div class="middle">
<div class="left">
<h2>生活随笔</h2>
<a href="#">感动心灵</a >
<a href="#">人生哲理</a >
<a href="#">励志文章</a >
</div>
<div class="right">
<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. 1.用盒模型技术，制作一个“人生哲理”页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人生哲理</title>
<style type="text/css">
.all{
width:680px;
height:600px;
}
.main{
width:600px;
height:600px;
float: left;
background-image: url(img/bg.jpg);
}
.t1{
width:100px;
height:650px;
float: left;
font-size: 20px;
letter-spacing: 15px;
margin:150px 200px 50px 100px;
writing-mode: vertical-rl;
}
.t2{
width:100px;
height:700px;
float: left;
font-size: 30px;
letter-spacing: 15px;
margin:100px 50px 0px -100px;
writing-mode: vertical-lr;
}
.right{
width:50px;
height:300px;
font-size: 40px;
float: left;
margin:150px 5px 0px 20px;
writing-mode: vertical-lr;
text-align: center;
background-image: url(img/bg1.JPG);
}
</style>
</head>
<body>
<div class="all">
<div class="main">
<div class="t1">定而后能静，静而后能安</div>
<div class="t2">让生活简单一点</div>
</div>
<!-- <br /><br /><br /><br /><br /> -->
<div class="right">进入网站</div>
</div>
</body>
</html>