前言

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

正文

成品

样式参考    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. oracle连表语法

    1.笛卡尔积 (表一乘以表二) (表连接建立在笛卡尔积上过滤) select * from emp,dept; 2.等值连接 (表与表之见有相同的列表) select ename,dname from ...

  2. TypeScript初探

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

  3. KXO151 Programming & Problem Solving

    Page 1 of 9KXO151 Programming & Problem SolvingAIEN-SOU - 2019Assignment 2Deadline for Submissio ...

  4. 如何把原生小程序项目合并的mpvue项目中

    当时的情景是这样的: 使用mpvue写微信小程序,写着写着项目写到一半了,突然间不想这样继续写了,想切换回原生小程序语法去写剩余部分. 如下图,红色框里的功能是已经用mpvue完成的功能,绿色框部分的 ...

  5. Flask 接入第三方云通讯平台时出现 {‘172001’:’网络错误’}

    错误:{‘172001’:’网络错误’},经过上网查找原因,原来是 Python 升级到 2.7.9 之后引入了一个新特性,当打开一个 https 链接时,会验证一次 SSL 证书.而当目标网站使用的 ...

  6. 写一个方法，用于解读 url 后面的请求参数，最终得到 {"a"：2，"b"：3，"c"：4}；

    function getUrlParams(url){ let searchParam = url.split("?")[1]; let searchItemParams = se ...

  7. PHPExcel 读取 xls

    <?php $xlsPath = './test.xls'; //指定要读取的exls路径 //$type = 'Excel2007'; //设置要解析的Excel类型 Excel5(2003或 ...

  8. weblogic的基础安装

    安装java环境 不能使用centos自带的openjdk  必须使用源码安装 把下载的jdk-8u181-linux-x64.tar 解压到 /usr/src目录下      tar zxvf jd ...

  9. xtrabackup工具备份与恢复

    1.xtrabackup简介 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好的替代品.它能对 ...

  10. 接口自动化框架(java)--2.接口用例POST请求，参数配置

    这套框架的报告是自己封装的 Post类型的接口通常有请求参数,请求参数也是json类型,所以需要写一个类将请求参数序列化成json对象 以常见的登录接口为例 新建一个package,和postPara ...