1组_3D打印，HTML代码在线实时编辑、实时预览

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技节体验项目</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        background-color: #FFF0F5; /* 淡青色背景 */
            background-image: url('background.jpg');
        }
        header {
            text-align: center;
            margin-bottom: 20px;
        }
        h1 {
        font-family: "华文中宋"; /* 在这里调整字体 */
        font-style: italic; /* 在这里调整斜体 */
        font-weight: bold; /* 在这里调整粗体 */
            font-size: 2.5em; /* 在这里调整大小 */
            color: #4169E1; /* 在这里调整颜色 */
        }
/* 以下的h2和p标签类似 */
        h2 {
        font-family: "华文中宋";
        font-weight: bold;
            font-size: 1.8em;
            color: #00BFFF;
        }
        img {
            max-width: 50%;
            max-height: 50vh; /* 图片高度不超过视口高度的80% */
            object-fit: cover; /* 图片保持比例缩放 */
        }
        p {
        font-family: "隶书";
            font-size: 1.2em;
            color: #666;
            width: 80%;
            text-align: center;
            margin-top: 20px;
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 1em;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 30px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <header>
        <h1>科技节体验项目——</h1>
        <h2>3D打印</h2>
    </header>
    <img src="images2/3D.png">
    <p>3D打印，也称增材制造，是一种通过逐层叠加材料来构建三维实体物体的技术。它利用计算机辅助设计文件，将材料（如塑料、金属、树脂等）按预设形状逐层沉积，最终制成实体物品。3D打印广泛应用于医疗、制造、航空航天等多个领域，为快速原型制作、个性化定制等提供了高效、精确的解决方案。</p>
    <a href="https://bi.cool/project/oFFHGj7" class="button">返回主页</a>
</body>
</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

编辑器加载中

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

编辑器加载中