Startsida Utforska Hjälp
Logga in
DragonOS-Community
/
First-WebPage-On-DragonOS
spegling av https://github.com/DragonOS-Community/First-WebPage-On-DragonOS.git
2
0
Fork 0
Filer Ärenden 0 Wiki
Bläddra i källkod

运行在DragonOS上面的第一个网页

fyxt 2 år sedan
incheckning
7f4f9a8eb1
5 ändrade filer med 185 tillägg och 0 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 3 0
      README.md
  2. 137 0
      css/style.css
  3. BIN
      image/bg.jpg
  4. BIN
      image/favicon.ico
  5. 45 0
      index.html

+ 3 - 0
README.md
Visa fil 

@@ -0,0 +1,3 @@
 
+# First-WebPage-On-DragonOS
 
+
 
+运行在 DragonOS 上面的第一个网页

+ 137 - 0
css/style.css
Visa fil 

@@ -0,0 +1,137 @@
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  width: 100%;
 
+  overflow: hidden;
 
+}
 
+.main {
 
+  height: 100%;
 
+  width: 100%;
 
+  background: url(../image/bg.jpg) no-repeat center center;
 
+  background-size: 100% 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  text-align: center;
 
+  text-align: left;
 
+}
 
+.main h1 {
 
+  font-weight: bold;
 
+  margin-top: 10%;
 
+  font-size: 40px;
 
+  line-height: 1;
 
+  position: relative;
 
+  left: 30%;
 
+  color: rgba(25, 70, 127, 1);
 
+}
 
+.main span {
 
+  display: block;
 
+  font-size: 20px;
 
+  margin-bottom: 10px;
 
+  font-weight: 400;
 
+}
 
+
 
+.main .text {
 
+  padding: 10px;
 
+  margin: 0 auto;
 
+  max-width: 800px;
 
+  position: relative;
 
+  top: 30px;
 
+  z-index: 999;
 
+}
 
+.text .center {
 
+  padding: 60px 60px 30px 60px;
 
+  background: rgb(255, 255, 255);
 
+  border-radius: 6px;
 
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 16px 0px;
 
+  position: relative;
 
+  margin-bottom: 121px;
 
+}
 
+.text .center:before {
 
+  content: '';
 
+  position: absolute;
 
+  background: rgb(36, 147, 239);
 
+  background-image: linear-gradient(
 
+    127deg,
 
+    rgb(13, 183, 189),
 
+    rgb(226, 71, 196)
 
+  );
 
+  inset: -4px;
 
+  border-radius: 12px;
 
+  filter: blur(30px);
 
+  opacity: 0.8;
 
+  z-index: -1;
 
+  -webkit-border-radius: 12px;
 
+  -moz-border-radius: 12px;
 
+  -ms-border-radius: 12px;
 
+  -o-border-radius: 12px;
 
+  -webkit-filter: blur(30px);
 
+}
 
+.text .center p {
 
+  margin-top: 8%;
 
+  font-size: 17px;
 
+}
 
+.text .center p:nth-child(1) {
 
+  margin-top: 0;
 
+}
 
+
 
+.text .center .container {
 
+  margin-top: 20%;
 
+  margin-bottom: 10px;
 
+  width: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+
 
+.center .container .line {
 
+  display: block;
 
+  height: 1px;
 
+  width: 100%;
 
+  border-top: 1px solid red;
 
+  margin: 2px auto;
 
+}
 
+.center .container .one {
 
+  width: 30%;
 
+  border-color: rgba(36, 147, 239, 0.8);
 
+}
 
+
 
+.center .container .two {
 
+  width: 50%;
 
+  border-color: rgba(36, 147, 239, 0.6);
 
+}
 
+
 
+.center .container .three {
 
+  width: 70%;
 
+  border-color: rgba(36, 147, 239, 0.4);
 
+}
 
+
 
+.text .center .name {
 
+  text-align: center;
 
+  margin-top: 1%;
 
+}
 
+
 
+/* @keyframes typing {
 
+  from {
 
+    width: 20%;
 
+  }
 
+}
 
+
 
+@keyframes caret {
 
+  50% {
 
+    margin-left: 5%;
 
+    border-right-color: transparent;
 
+  }
 
+}
 
+.main p {
 
+  margin-top: 5%;
 
+  width: 100%;
 
+  white-space: nowrap;
 
+  overflow: hidden;
 
+  border-right: 0.05em solid;
 
+  animation: typing 5s steps(15), caret 1s steps(1) infinite;
 
+  -webkit-animation: typing 5s steps(15), caret 1s steps(1) infinite;
 
+} */

BIN
image/bg.jpg
Visa fil


BIN
image/favicon.ico
Visa fil


+ 45 - 0
index.html
Visa fil 

@@ -0,0 +1,45 @@
 
+<!--
 
+ * @Author: sun
 
+ * @Date: 2023-03-21 19:12:43
 
+ * @LastEditTime: 2023-03-26 18:46:41
 
+ * @FilePath: \网页\index.html
 
+ * @Description: 
+-->
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="shortcut icon" href="./image/favicon.ico">
 
+    <link rel="bookmark" href="./image/favicon.ico">
 
+    <title>第一个网站</title>
 
+    <link rel="stylesheet" href="./css/style.css">
 
+</head>
 
+
 
+<body>
 
+    <div class="main">
 
+        <h1><span>HelloWord DragonOS</span>
 
+            支持DragonOS走的更远
 
+        </h1>
 
+        <div class="text">
 
+            <div class="center">
 
+                <p><strong>DragonOS</strong>是一个面向服务器领域的，从0开发内核及用户态环境，并提供Linux兼容性的64位开源操作系统.</p>
 
+                <p><strong>DragonOS</strong>从0开始构建内核及用户态环境，<strong>实现完全独立自主</strong>。底层自主，安全可控。</p>
 
+                <p><strong>DragonOS</strong>是一个<strong>社区驱动开发</strong>的项目，将始终坚持开源，开放包容的精神。</p>
 
+                <p>从0开始，<strong>兼容Linux</strong>。在将来，Linux软件将能轻松迁移到DragonOS</p>
 
+                <div class="container">
 
+                    <div class="line one"></div>
 
+                    <div class="line two"></div>
 
+                    <div class="line three"></div>
 
+                </div>
 
+                <p class="name">DragonOS运行的第一个网站</p>
 
+            </div>
 
+        </div>
 
+
 
+    </div>
 
+
 
+</body>
 
+
 
+</html>