【WEB】带边框的网页页面实现

前言

这是编程入学者尝试各种技术的备忘记录和自我激励，内容非常简单而单纯。

正文

成品

样式参考    http://tenhou.net/

上边框　　http://tenhou.net/img/f0ta.gif

下边框　　http://tenhou.net/img/f0ba.gif

html代码：

<html lang="zh-Hans">
    <body>
    　　<div class="page-body">
       　　 <div class="page-bottom-backgroup">
            　　<div class="page-body-lining">
                    这里写显示内容
            　　</div>
       　　 </div>
   　　 </div>
    </body>
</html>

CSS代码 ：

/*页面背景设置为黑色*/
body{background-color:#101820;}
.page-body{
     /* 引入上边框，设置为不重复，靠左上显示*/
    background:#FFF url('http://tenhou.net/img/f0ta.gif') no-repeat left top;
    /*设置背景大小，效果为把背景图拉伸*/
    background-size: 100%;
    margin-top : 10px;
　　/*设置页面居中，大小*/
　　marin: 0 auto; width: 880px;
}
/*一个div层只可以设置一层背景，所以需要分层设置下边框，和上边框的背景显示区正好错开了，若页面没有内容则只会显示下边框*/
.page-bottom-backgroup{
    background:url('http://tenhou.net/img/f0ba.gif') no-repeat left bottom;
    background-size:100%;
}
/*设置页面内边距*/
.page-body-lining{padding: 40px 10px 40px 10px;margin: 0px 25px 0px 25px;}

将CSS代码如下放置：

<html>
    <head>
           <style type="text/css">
                <!--这里写CSS代码-->
           </style>
　　　　<!--或者-->
　　　　<link href="d://xxx.css"  rel="stylesheet">
　　</head>
</html>

即可。