1.用盒模型技术,制作一个“走进内心的文学”页面。
参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>走进内心文学</title>
<style>
.div{
width: 700px;
height: 600px;
}
.h1{
width: 100%;
height: 100px;
text-align: center;
background-image:url(img/top-bg.png);
line-height: 100PX;
}
.x1{
width: 345px;
height: 100px;
float: left;
text-align: center;
background-image:url(img/menu-bg.png);
margin-right: 10px;
}
.x2{
margin-right: 0px;
}
.p{
text-indent: 2em;
}
.b{
width: 700px;
height: 30px;
font-family:'楷体';
text-align: center;
line-height: 30PX;
border-top: 1px #000000 solid;
background-image:url(img/menu-bg.png);
}
</style>
</head>
<body>
<div class="div">
<div class="h1">
<h1>走进内心文学</h1>
</div>
<div class="x1">
<h2>生活随笔</h2>
<a href="#">感动心灵</a>
<a href="#">人生哲理</a>
<a href="#">励志文章</a>
</div>
<div class="x1 x2">
<h2>抒情散文</h2>
<a href="#">唯美句子</a>
<a href="#">美文欣赏</a>
<a href="#">爱情诗句</a>
</div>
<p class="p">当你终于站在时光这头,回首过往的种种,会毫无遗憾地告别此生吗?一位白发苍的老者,面对镜头说道:这辈子做自己的时光太少,一直在为别人活,从来没有为自己真正活一场,人这一生,确实有许多牵绊,让我们放不开手脚,仿佛作茧自缚,一生都在别人服光做成的无形大网中挣扎,从没糖席快快为自己而活。这样的人生,值得留恋吗?这样的人生,值得回首吗?</p>
<p class="p">人总会被别人的成功影响,别人混得好,心里总会咯噔一下,仿佛有一块石头堵着,很不舒服。为何不放宽心,多看看自己有的,不要总想着别人有的,如此就能释怀很多。</p>
<p class="p">人生十之八九都是在自寻烦恼,很多事本和自己八竿子打不着,亲戚的儿子混得好,又和你有什么关系呢?世界上混得好的人那么多,难道每一个人都要拿出来让自己难受一次吗?多看看自己有的,才能知足常乐。</p>
<div class="b">版权所有©走进内心文学</div>
</div>
</body>
</html>
结果展示:
2.用盒模型技术,制作一个“人生哲理”页面。
参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人生哲理</title>
<style type="text/css">
.div{
width: 800px;
height: 600px;
float: left;
}
.x{
width:600px;
height: 600px;
margin: 0px 50px;
float: left;
writing-mode: vertical-lr;
background-image: url(img/bg.jpg);
}
.x1{
font-size: 25px;
font-family: '楷体';
letter-spacing: 10px;
margin: 160px 100px 0px 250px;
}
.x2{
font-size: 30px;
letter-spacing: 10px;
margin-top: 100px;
}
.right{
width:30px;
height:200px;
margin: 100px 50px 200px 50px;
font-size: 25px;
writing-mode: vertical-lr;
text-align: center;
background-image:url(img/bg1.JPG);
}
</style>
</head>
<body>
<div class="div">
<div class="x">
<div class="x1">定而后能静,静而后能安</div>
<div class="x2">让生活简单一点</div>
</div>
<div class="right">进入网站</div>
</div>
</body>
</html>
结果展示: