增加更好的高亮,修改布局,以及一些小修改

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnType": true
+}

Todo

@@ -0,0 +1,4 @@
+todo1: 整体基调,像素手绘风格, 尽量简单清晰
+目标参考: https://whydocatsanddogs.com/cats
+库参考: roughJS
+https://segmentfault.com/a/1190000044277320

bundle/common.js

@@ -0,0 +1,77 @@
+// 该代码来自whydocatsanddogs.com网站中, 无比感谢他们, 我去除了虚线的绘制
+
+registerPaint('sketchyBackground', class {
+    static get inputProperties() {
+        return [
+            // '--lineNumber',  // 行数
+            // '--lineSpread',  // 行间距
+            '--lineColor',    // 线条颜色
+            '--lineWidth'     // 线条宽度
+        ]
+    }//inputProperties
+
+    paint(ctx, size, properties) {
+        const lineWidth = parseFloat(properties.get('--lineWidth').toString())
+        const color = properties.get('--lineColor').toString()
+        // const numUnderlines = parseFloat(properties.get('--lineNumber').toString())
+        // const spread = parseFloat(properties.get('--lineSpread').toString())
+
+        // 设置绘制的属性
+        ctx.lineWidth = lineWidth
+        ctx.strokeStyle = color
+        ctx.lineCap = "round"
+
+        // 从左到右绘制条纹
+        const getRandomX = () => { return (Math.random() > 0.5 ? 1 : -1) * Math.round(Math.random() * 1) }
+        const getRandomY = () => { return Math.round(Math.random() * 6) + 2 }
+
+        let x_old = -10
+        let y_old = size.height - getRandomY()
+        let num_lines = Math.round((size.width + 10) / 2)
+        ctx.beginPath()
+        ctx.moveTo(x_old, y_old)
+        for (let i = 0; i < num_lines; i++) {
+            let y = i % 2 === 1 ? size.height - getRandomY() : getRandomY()
+            let x = -10 + i / num_lines * (size.width + 10) + (i % 2 === 1 ? 0 : 14) + getRandomX()
+
+            // ctx.lineWidth = Math.random()*3 + 1
+            // ctx.beginPath()
+            ctx.moveTo(x_old, y_old)
+            ctx.lineTo(x, y)
+            // ctx.stroke()
+
+            x_old = x
+            y_old = y
+        }//for i
+        ctx.stroke()
+
+        // // 从起点到终点绘制条纹 - 原始示例来自 Una Kravets
+        // // 来自 https://blog.logrocket.com/new-horizons-in-css-houdini-and-the-paint-api-8b307cf387bb
+        // const getRandom = () => { return Math.round(Math.random() * size.width * 0.2) }
+        // let x_old = getRandom()
+        // let y_old = size.height * (Math.random()*spread + 0.2)
+        // ctx.beginPath()
+        // ctx.moveTo(x_old, y_old)
+        // for (let i = 0; i < numUnderlines; i++) {
+        //     let x = i % 2 === 0 ? size.width - getRandom() : getRandom()
+        //     let y = size.height * (Math.random()*spread + 0.2)
+
+        //     // ctx.beginPath()
+        //     // ctx.moveTo(x_old, y_old)
+        //     ctx.lineTo(x, y)
+
+        //     // x_old = x
+        //     // y_old = y
+        // }//for i
+        // ctx.stroke()
+
+        // 底部的虚线
+        // ctx.strokeStyle = "black"
+        // ctx.setLineDash([0, 5])
+        // ctx.lineWidth = 2.5
+        // ctx.beginPath()
+        // ctx.moveTo(2, size.height - 4)
+        // ctx.lineTo(size.width - 2, size.height - 4)
+        // ctx.stroke()
+    }//paint
+})//registerPaint

css/style.css

@@ -0,0 +1,73 @@
+@font-face {
+    font-family: 'PixelFont';
+    src: url('../fonts/fusion-pixel-12px-monospaced-zh_hans.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font-family: 'PixelFont', sans-serif;
+    background-color: #f4f4f4;
+}
+
+header {
+    background-color: #333;
+    color: #f4f4f4;
+    padding: 10px 0;
+}
+
+header:hover{
+    background-color: #f4f4f4;
+    color: #333;
+}
+
+main {
+    width: 50%;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 100px;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 0.8em;
+    color: #666;
+}
+
+.leftbar {
+    position: fixed;
+    left: 0;
+}
+
+.rightbar {
+    position: fixed;
+    bottom: 50px;
+    right: 0;
+}
+
+.typing{
+    width: 50%;
+    margin: auto;
+    width: 21em;
+    white-space: nowrap;
+    border-right: 2px solid transparent;
+    animation: typing 3.5s steps(21, end), blink-caret .75s step-end infinite;
+    overflow: hidden;
+}
+/* 打印效果 */
+@keyframes typing {
+  from { width: 0; }
+  to { width: 21em; }
+}
+
+.sketchy {
+    background-image: paint(sketchyBackground);
+    --lineWidth: 3;
+    --lineColor: rgba(247, 206, 70, 1);
+    padding: 3px 2px;
+    /* display: inline-block; */
+}

index.html

@@ -1,69 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
 <!-- head -->
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>-->DragonFly!</title>
-    <style>
-        @font-face {
-            font-family: 'PixelFont';
-            src: url('fonts/fusion-pixel-12px-monospaced-zh_hans.woff2') format('woff2');
-            font-weight: normal;
-            font-style: normal;
-        }
-
-        body {
-            font-family: 'PixelFont', sans-serif;
-        }
-    </style>
+    <title>-->DragonFly</title>
+    <link rel="stylesheet" href="./css/style.css">
 </head>
-
 <!-- body -->
+
 <body>
     <header>
-        <h1>Welcome to My Website</h1>
+        <div class="typing">
+            <h1>Welcome To My Website</h1>
+        </div>
     </header>
-
-    <nav>
-        <ul>
+
+
+    <div class="container">
+        <div class="leftbar">
             <!--显示在左边-->
-            <li><a href="#">主页</a></li>
-            <li><a href="#">关于</a></li>
-            <li><a href="#">内容</a></li>
+            <nav>
+                <ul>
+                    <li><a href="#">主页</a></li>
+                    <li><a href="./pages/about.html" target="_blank">关于</a></li>
+                    <li><a href="./pages/content.html" target="_blank">内容</a></li>
+
+                </ul>
+            </nav>
+        </div>
+        <div class="rightbar">
             <!--显示在右边-->
-            <li><a href="#">⬆️</a></li>
-        </ul>
-    </nav>
-
+            <a href="#">⬆️</a>
+        </div>
+    </div>
+
+
     <main>
         <section>
             <h2>欢迎来到我的网站</h2>
-            <p>这是一个简单的网站</p>
+            <p>这是一个简单的网站, 这是一段介绍词</p>
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum recusandae excepturi sit officiis
+                facilis repellendus voluptatibus porro accusantium expedita dolorem quam odit cum debitis, obcaecati
+                placeat aspernatur laboriosam labore blanditiis.</p>
         </section>
 
         <section>
-            <h2>我是谁?</h2>
+            <h1>我是谁?</h1>
             <h1>About Me</h1>
-            <p>我是谁我是谁我是谁</p>
+            <p>Lorem <span class="sketchy">ipsum</span>
+                dolor sit amet consectetur adipisicing elit. Deleniti ullam velit, repudiandae sapiente
+                aliquam nostrum, esse animi, neque consectetur beatae distinctio error. Alias soluta, quasi praesentium
+                laboriosam repellat animi illum.</p>
         </section>
-        
+
         <section>
             <h2>这里是什么地方?</h2>
             <h1>where is this place?</h1>
-            <p>这是我的网站这是我的网站</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure incidunt optio consectetur, nam dolor eius,
+                deserunt sint maiores, perspiciatis libero doloribus aliquam maxime modi eaque eligendi unde! Ex, nam
+                rem.</p>
         </section>
-        
+
         <section>
             <h2>这里有什么内容?</h2>
             <h1>what's the content?</h1>
-            <p>这里有一些内容这里有一些内容</p>
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat minus sint consequatur perferendis
+                odit dicta nobis quis excepturi rem, voluptatibus molestiae nemo beatae officia, ratione adipisci hic
+                architecto id ullam?</p>
         </section>
     </main>
-    
+
     <footer>
-        <p>2024 My Website.</p>
-        <p>May all dragons fly free.</p>
+        <p>2024 My Website - Dragonfly<br>May all dragons fly free.</p>
     </footer>
 </body>
+
+<script>
+    if (CSS["paintWorklet"] !== undefined) {
+        CSS.paintWorklet.addModule("./bundle/common.js");
+    }
+</script>
+
 </html>

pages/about.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <p>hello this about</p>
+</body>
+</html>

pages/content.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <p>this is context</p>
+</body>
+</html>