před 2 roky · 7f4f9a8eb1
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
 
				+# First-WebPage-On-DragonOS
			
 
				+
			
 
				+运行在 DragonOS 上面的第一个网页
			
--- a/css/style.css
+++ b/css/style.css
@@ -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;
			
 
				+} */
			
--- a/image/bg.jpg
+++ b/image/bg.jpg
--- a/image/favicon.ico
+++ b/image/favicon.ico
--- a/index.html
+++ b/index.html
@@ -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>