前言

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

正文

成品

样式参考    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. Tarjan求割点 || Luogu P3388 【模板】割点（割顶）

    题面:P3388 [模板]割点(割顶) 题解:无 代码: #include<cstdio> #include<iostream> #include<cstring> ...

  2. gitIgnore说明

    有些内容不需要提交到git服务器上,这时我们可以配置.gitIgnore文件.可参考:https://www.cnblogs.com/kevingrace/p/5690241.html 可能有时候你会 ...

  3. c#重命名文件，报错“System.NotSupportedException”类型的未经处理的异常在 mscorlib.dll 中发生”

    修改远程服务器的文件名,报错“System.NotSupportedException”类型的未经处理的异常在 mscorlib.dll 中发生”,“System.NotSupportedExcept ...

  4. jQuery实现图片懒加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. TypeScript初探

    TypeScript初探 TypeScript什么? 官方给的定义:TypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript类型的超集,可以编译成纯JavaScript,本 ...

  6. iOS 代码混淆

    一般做了防调试的话,被调试进程会退出的,是防动态分析措施. 代码混淆加花这些是防静态分析措施. 反调试是防动态分析措施. 混淆的方法方法名混淆其实就是字符串替换,有2个方法可以,一个是#define, ...

  7. XXL-JOB之本地环境搭建

    一.源码下载 1.官网地址 登录以下地址查看详细搭建步骤: https://www.cnblogs.com/xuxueli/p/5021979.html 2.下载源码 根据1中打开的页面,下载源码,如 ...

  8. less命令查看文件时的常用操作

    下键或者回车:往下一行 D:往下半页 空格和f:往下一页 上键:往上一行 B:往上一页 shift+G:直接切到末尾 ?+搜索条件:从下往上搜索 /+搜索条件:从上往下搜索

  9. phpstudy2018 安装xdebug扩展

    第一步:查看PHP版本信息 第二步:到xdebug下载页去下载最新的版本(注意:要下载PHP对应版本) 第三步:把扩展php_xdebug-2.7.0alpha1-7.2-vc15-nts.dll放到 ...

  10. 【心得】-NO.114.面试.1 -【To HR And Interviewer】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...