新建一个页面

今天我刚好要做一个单页面来展示某些东西。

就一起来看看吧,初学者写的不好请自闭双眼。

先上代码吧,大家看看有什么需要修改的地方。

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>####</title>
  9     <style>
 10         html,
 11         body {
 12             margin: 0;
 13             padding: 0;
 14             height: 100%;
 15             background-image: url(image/######.jpg);
 16             background-size: cover;
 17 
 18         }
 19 
 20         * {
 21             font-family: "Microsoft YaHei";
 22             color: #fff;
 23         }
 24 
 25         .bg {
 26             height: 100%;
 27             background-color: rgba(0, 0, 0, 0.795);
 28             position: relative;
 29 
 30         }
 31 
 32         .tongzhi {
 33             height: 65%;
 34             width: 25%;
 35             border-width: 20px;
 36             border-radius: 5px;
 37             box-shadow: 0px 0px 20px rgb(121, 119, 119);
 38             background-color: rgba(29, 28, 28, 0.8);
 39             position: absolute;
 40             left: 900px;
 41             margin-top: 9%;
 42             float: left;
 43             z-index: 999999;
 44         }
 45 
 46         .title {
 47             width: 100%;
 48             height: 50px;
 49             background-color: #07070f;
 50             border-radius: 5px 5px 0px 0px;
 51             line-height: 50px;
 52             text-align: center;
 53             font-size: 25px;
 54         }
 55 
 56         .wen {
 57             width: 98%;
 58             height: 100%;
 59             margin-left: 3%;
 60         }
 61 
 62         .tupian {
 63             height: 80%;
 64             width: 70%;
 65             /* background-color: #fff; */
 66             position: absolute;
 67             left: 50px;
 68             margin-top: 5%;
 69             background-image: url(image/####.png);
 70             background-size: cover;
 71         }
 72 
 73         .input {
 74             height: 10%;
 75             width: 25%;
 76             position: absolute;
 77             left: 920px;
 78             margin-top: 37%;
 79             border-color: #fff;
 80             cursor: pointer;
 81             z-index: 9999999;
 82         }
 83     </style>
 84 </head>
 85 
 86 <body>
 87     <div class="bg">
 88         <div class="tongzhi">
 89             <div class="title">#####</div>
 90             <div class="wen">
 91                 <p>################################</p>
 92             </div>
 93         </div>
 94 
 95         <div class="tupian"></div>
 96         <a href="#">
 97             <div class="input" id="inputid">
 98                 <img src="image/#.png" />
 99             </div>
100         </a>
101     </div>
102 </body>
103 
104 </html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369135.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java并发:隐藏线程死锁

大多数Java程序员熟悉Java线程死锁概念。 它本质上涉及2个线程&#xff0c;它们彼此永远等待。 这种情况通常是平面&#xff08;同步&#xff09;或ReentrantLock&#xff08;读或写&#xff09;锁排序问题的结果。 Found one Java-level deadlock:"pool-1-thread-2"…

vue中使用axios发送请求

我们知道&#xff0c;vue2.0以后&#xff0c;vue就不再对vue-resource进行更新&#xff0c;而是推荐axios&#xff0c;而大型项目都会使用 Vuex 来管理数据&#xff0c;所以这篇博客将结合两者来发送请求 1.安装axios cnpm i axios -S 2.方案一&#xff1a;修改原型链 首先&…

django缓存

由于Django是动态网站&#xff0c;所有每次请求均会去数据进行相应的操作&#xff0c;当程序访问量大时&#xff0c;耗时必然会更加明显&#xff0c;最简单解决方式是使用&#xff1a;缓存&#xff0c;缓存将一个某个views的返回值保存至内存或者memcache中&#xff0c;5分钟内…

linux 输入法成繁体字_寻找Ubuntu中繁体字输入法

当客户来自港台地区时&#xff0c;英文和繁体字就成了交流的主要工具。windows下我们有搜狗输入法可以切换简体与繁体&#xff0c;那么Ubuntu下怎么办&#xff1f;這是我第一次考慮這個問題&#xff0c;在我的印象裏Linux下的中文輸入法還不是那麼完善&#xff0c;所以我進行了…

vue跨域解决方法

vue跨域解决方法 vue项目中&#xff0c;前端与后台进行数据请求或者提交的时候&#xff0c;如果后台没有设置跨域&#xff0c;前端本地调试代码的时候就会报“No Access-Control-Allow-Origin header is present on the requested resource.” 这种跨域错误。 要想本地正常的调…

Spring 3.2的REST异常处理

1.概述 本文将重点介绍如何使用REST API的Spring实现异常处理 。 我们将介绍在Spring 3.2之前可用的较旧的解决方案&#xff0c;然后是对Spring 3.2的新支持。 本文的主要目的是展示如何最好地将应用程序中的异常映射到HTTP状态代码。 哪种状态代码不适合本文中的哪种情况&…

kali中常用的ctf工具

exiftool:查看图片的exif信息。 pngcheck:修复被破坏的png图片 pngtools:深入研究png文件的数据 steganographic&#xff1a;用来提取图片中的隐藏信息 stegsolve.jar:kali中没有该工具&#xff0c;但是可以自己下 gimp:提供了转换各类图像文件可视化数据的功能&#xff0c;还可…

linux将所有文件生成lst_Linux自定义repo文件

repo文件简介repo文件是CentOS中yum源(软件仓库)的配置文件&#xff0c;通常一个repo文件定义了一个或者多个软件仓库的细节内容&#xff0c;例如我们将从哪里下载需要安装或者升级的软件包&#xff0c;repo文件中的设置内容将被yum读取和应用yum原理YUM的工作原理并不复杂&…

使用JUnit规则测试预期的异常

这篇文章展示了如何使用JUnit测试预期的异常。 让我们从我们要测试的以下类开始&#xff1a; public class Person {private final String name;private final int age;/*** Creates a person with the specified name and age.** param name the name* param age the age* th…

CSS盒子模型之详解

前言&#xff1a; 盒子模型是css中最核心的基础知识&#xff0c;理解了这个重要的概念才能更好的排版&#xff0c;进行页面布局。一、css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) &#xff0c;包含了元素内容&#xff08;content&#xff09;、内边距&#…

LeetCode的二分查找的练习部分总结

这两天由于工作的原因&#xff0c;一直没有写博客&#xff0c;但是却把LeetCode上面的题目做了不少——二分查找。上面这些题都是这两天写的。现在简单做一个总结。 首先二分查找的思想就是对一个有规律的元素&#xff08;事情&#xff09;进行不断的排除&#xff0c;最后找到符…

在Mac上安装IntelliJ IDEA

在Mac上安装IntelliJ IDEA http://www.jetbrains.com/idea/documentation/ 入门视频 这篇文章旨在介绍如何在Mac系统上安装IntelliJ IDEA&#xff0c;至于IntelliJ IDEA的介绍和使用方法&#xff0c;大家另行查阅&#xff0c;本篇的文章不再详细阐述。 简短解说&#xff0c;I…

mysql sohu_【MySQL中间件之SOHU-DBProxy】

SOHU-DBProxy是由 搜狐 数据库团队开发维护的一个基于MySQL协议的数据中间层项目。它在MySQL官方推出的MySQL-Proxy 0.8.3版本的基础上&#xff0c; 修改了大量bug&#xff0c;添加了很多功能特性。现在已经在sohu的多个业务线上使用DBProxy 兼容 MySQL 协议&#xff0c;可以用…

JavaFX:太空侵略者在175 LOC以下

使用当前版本的API&#xff0c;我对太空侵略者的评价不到175个LOC。 我的API中有很多“功能接口”&#xff0c;可以使用JavaFX 8&#xff08;例如SpriteProvider和CollisionHandler&#xff09;将其转换为Lambda表达式。 这将使代码更好&#xff0c;更短。 我可能还可以通过捆绑…

行内元素,块级元素,各自特点及其相互转化

作为一名小前端&#xff0c;块级元素、行内元素用了几千几万次&#xff0c;除了“块级独占一行&#xff0c;行内不独占”之外&#xff0c;对细节属性的了解十分匮乏&#xff0c;今天做以部分属性的测试和阐述。 一、 对物理属性的支持 元素类别widthheightpaddingmargin是否独…

mysql断开同步并记录位置_数据库同步自动断开问题的处理

堡垒机的实施过程中&#xff0c;因为做了双机&#xff0c;所以要对两台堡垒机进行数据库的主从同步和HA配置。在部署完mysql主从同步以后&#xff0c;发现同步会有中断的现象。中断表现为Slave_IO_Running: YesSlave_SQL_Running: NoReplicate_Do_DB:Replicate_Ignore_DB:Repli…

[NOIP2016提高组]换教室

题目&#xff1a;洛谷P1850、UOJ#262、BZOJ4720、Vijos P2005。 题目大意&#xff1a;有n个时间段&#xff0c;第i个时间段只能在教室$c_i$上课&#xff0c;另一个上这门课的教室在$d_i$。现在你最多可以进行m次申请&#xff0c;对于第i个时间段的申请如果成功&#xff0c;那么…

从RSS Feed和YQL创建数据表

Yahoo Query Language&#xff08; YQL &#xff09;是一种查询语言&#xff0c;例如SQL。 使用YQL&#xff0c;我们可以跨Web服务 查询 &#xff0c; 过滤和联接数据。 YQL也可以阅读RSS feed。 响应可以是JSON或XML。 雅虎提供了一个YQL控制台&#xff0c;用于调试 &…

background-image使用svg如何改变颜色

结论 在我多番测试之后&#xff0c;才发现background-image使用svg&#xff0c;改变颜色根本做不了。 分析 当svg图片被使用成background-image&#xff0c;颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式&#xff0c;却是无效&#xff0c;这其实可以从CSS选择器得到…

NOIP 2012 Day2

tags: 扩展欧几里得二分答案查分倍增二分答案贪心NOIP categories:信息学竞赛总结同余方程借教室疫情控制 同余方程 Solution 首先同余式可以转化为等式.\[ax\equiv 1\mod b\Leftrightarrow axby1\]   根据扩展欧几里得定理, 对于式\[axbyk(a,b),k\in \mathbf{R}\]一定存在整…