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>
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>
本例效果浏览如图: