前言
这是编程入学者尝试各种技术的备忘记录和自我激励，内容非常简单而单纯。
正文
成品
样式参考 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>
即可。