前言

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

正文

成品

样式参考    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. spring boot中jsp解析c标签方法

    pro.xml中添加jstl标签 <dependency><groupId>javax.servlet</groupId><artifactId>jst ...

  2. js_2_逻辑分支

  3. linux之间免密操作

    为了方便分布式集群操作,主机master需要免密操作两个节点slave1和slave2(slave1和slave2在对应机器已经修改hosts文件) 操作步骤: 首先测试连接slave1操作: [ro ...

  4. day24:继承

    1,复习1 # 面向对象编程 # 思想:角色的抽象,创建类,创建角色(实例化),操作这些示例 # 面向对象的关键字 class 类名: 静态属性 = 'aaa' def __init__(self): ...

  5. C#中$的用法

    class Program { static void Main(string[] args) { string tbName = "User"; string colName = ...

  6. AIROBOT系统 之 私人存储 和 DLNA 智能电视云

    需求背景 工作多年之后发现有太多的电子资料到处存放.个人电脑是Mac,硬盘都不大,放不了太多东西.并且有时候想随时随地存放一些东西.所有就有了大家一个私有存储的需求 个人休息在家经常喜欢看电影电视剧, ...

  7. poj1164

    #include<iostream> using namespace std; ][]; ][]; int roomnum; int maxroom; int m,n; typedef s ...

  8. 使用java操作elasticsearch(1)

    1.安装elasticsearch 这儿用的是5.6.9的版本,下载安装过程较为简单,在官网上下载好后解压到文件夹.需要注意的是在elasticsearch-5.6.9\config下的elastic ...

  9. [py]python操作zookeeper

    参考: https://blog.csdn.net/heizistudio/article/details/79568188 1.安装zookeeper zookeeper-3.4.6.tar.gz ...

  10. rpm 包的安装:

    参考博客: https://www.cnblogs.com/lzj87980239/p/3611776.html 如果已经安装了一个 rpm 包, 然后这个安装包又重新打了, 但是安装包的名字没有修改 ...