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

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

正文
成品

文章图片

样式参考http://tenhou.net/
上边框http://tenhou.net/img/f0ta.gif
下边框http://tenhou.net/img/f0ba.gif
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; }

【【WEB】带边框的网页页面实现】
将CSS代码如下放置：

即可。

转载于:https://www.cnblogs.com/syui-terra/p/7774509.html