前言

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

正文

成品

样式参考    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. postman上传图片时已经添加cookie，但仍显示未登陆

    postman上传图片时,已经添加过cookie,但是返回的结果是用户未登陆,如下图所示: 我的解决办法是:清楚cookie code中的cookie 最终的结果如下:成功

  2. PHP算法学习（8） 环形链表 解决约瑟夫问题

    2019年2月25日17:29:17 Josephus有过的故事:39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓.于是决定了自杀方式,41个人排成一个圆圈 ...

  3. Django登录与注销

    一:Django中自带着登录,验证功能不用自己再去写登录功能. 1.从相应模块导入组件功能 from django.contrib.auth import authenticate,login 2.从 ...

  4. 64IE无法显示网页

    1.碰到如下图情况ie浏览器打开之后显示不了网页,但是试了下电脑上其他的浏览器都可以正常的打开网页. 2.解决办法为:打开浏览器-选择“工具”-“Internet选项”-“高级”-重置,重启浏览器后能 ...

  5. VisualStudioCode创建的asp.net core控制台程序部署到linux

    1.asp.net core控制台程序 static void Main(string[] args) { ; ) { Console.WriteLine("Hello World!&quo ...

  6. 搭建docker私有仓库（https）

    1.修改openssl.cnf,支持IP地址方式,HTTPS访问在Redhat7或者Centos系统中,文件所在位置是/etc/pki/tls/openssl.cnf.在其中的[ v3_ca]部分,添 ...

  7. python学习笔记3-列表

    # 1.列表长度可变,内容可修改 a = [0,1,2,3] a[0] = 'a0' a # ['a0', 1, 2, 3] # 2.添加元素 # 2.1列表末尾添加元素 a.append(4) a ...

  8. 下载安装Git

    1.下载地址:https://git-scm.com/download/win  这里是下载64位的 2.安装步骤 (1)下载完成得到一个exe文件,双击傻瓜式安装 (2)开始安装 (3)选择安装的工 ...

  9. PCL近邻搜索相关的类

    首先PCL定义了搜索的基类pcl::search::Search<PointInT> template<typename PointT> class Search 其子类包括: ...

  10. 10个用于处理日期和时间的 Python 库

    Python本身提供了处理时间日期的功能,也就是datetime标准库.除此之外,还有很多优秀的第三方库可以用来转换日期格式,格式化,时区转化等等.今天就给大家分享10个这样的Python库. 上期入 ...