前言

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

正文

成品

样式参考    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>

即可。

【WEB】带边框的网页页面实现的更多相关文章

  1. web网页 页面布局的几种方式（转）

    web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...

  2. 【JSP】让HTML和JSP页面不缓存从Web服务器上重新获取页面

    用户退出后,如果点击浏览器上的后退按钮,Web应用将不能正确保护受保护的页面——在Session销毁后(用户退出)受保护的JSP页重新在浏览器中显示出来. 然而,如果用户点击返回页面上的任何链接,We ...

  3. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

  4. 5. Web vulnerability scanners （网页漏洞扫描器 20个）

    5. Web vulnerability scanners (网页漏洞扫描器 20个) Burp Suite是攻击Web应用程序的集成平台. 它包含各种工具,它们之间有许多接口,旨在方便和加快攻击应用 ...

  5. web scraper 抓取网页数据的几个常见问题

    如果你想抓取数据,又懒得写代码了,可以试试 web scraper 抓取数据. 相关文章: 最简单的数据抓取教程,人人都用得上 web scraper 进阶教程,人人都用得上 如果你在使用 web s ...

  6. UI设计教程分享：电商网页页面设计常见表现手法

    1.手绘插画  场景.人物以及加上故事的创意绘画 会给人梦幻若隐若现的感觉,留下深刻的印象,适合做活动页面以及宣传自已的品牌 2.简约 颜色少于三色,背景以明度偏低的颜色为主,在信息大爆炸的时代,我们 ...

  7. 让HTML和JSP页面不缓存从Web服务器上重新获取页面

    感谢原文作者:佚名 原文链接:https://www.jb51.net/web/100639.html 问题描述 用户退出后,如果点击浏览器上的后退按钮,Web应用将不能正确保护受保护的页面--在Se ...

  8. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  9. css挤带边框的三角

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 提高你的python:解释 yield 和 Generators（生成器）

    转自:http://www.oschina.net/translate/improve-your-python-yield-and-generators-explained 原文:http://www ...

  2. 汇编入门——使用DOSBox写一个HelloWorld以及相关软件安装

    0.0.0) 在D盘建立一个ASM文件夹 0.0.1) 放入所需要的文件 1所标示的红色框为必须要存在的文件,要处理汇编文件.百度网盘中下载. 2自己编写的汇编(asm)文件. 3编译汇编自己生成的文 ...

  3. js取整数、取余数

    js取整数.取余数 取整 1.取整 // 丢弃小数部分,保留整数部分 parseInt(5/2) // 2 2.向上取整 // 向上取整,有小数就整数部分加1 Math.ceil(5/2) // 3 ...

  4. Python文件的读写

    一.写数据 f = open("hello.txt", "w") f.write("hello world python!") f.clos ...

  5. ide phpStorm注释模板修改

    1.打开设置 2.找到,如下图所示位置,注意是第二个tab(Includes) 3.再任意空白位置,输入/**,按回车即可出现对应注释内容(其实还可以先 Ctrl + Shift + /,然后删少一个 ...

  6. Win10问题汇总

    1.重置网络连接命令 netsh winsock reset ipconfig /flushdns 2.WIN10去除我的电脑上面的6个文件夹 把下面代码复制,保存到.reg中,然后执行即可(修改注册 ...

  7. Android 跨进程数据共享

    Android 开发过程中,基于功能隔离.进程安全.进程保活等等考虑,我们经常需要为应用划分进程,然后不得不面临跨进程通信和跨进程共享数据的挑战. 跨进程通信 相对来说,跨进程通信比较简单,常用的方式 ...

  8. 测试覆盖率工具EclEmma安装与使用

    此文来自于:https://www.cnblogs.com/cnsdhzzl/p/7638883.html EclEmma的简介 一个优秀的开源软件测试工具 eclipse的一个插件 能够对由 Jav ...

  9. sqlplus用户登录

    1.运行SQLPLUS工具 C:\Users\wd-pc>sqlplus 2.直接进入SQLPLUS命令提示符 C:\Users\wd-pc>sqlplus /nolog 3.以OS身份连 ...

  10. 解决安装TensorFlow GPU缺少文件的一个比较终极的办法

    可能的报错信息 TensorFlow 下,导入这份配置的时候 python 停止运行 ImportError: DLL load failed: 找不到指定的模块 或 ImportError: No ...