简易前端html&css模板

Cealivanus Kwan Lv3
  2024-12-11 22:31:18 2024-12-11 22:31:18 创建   2024-12-19 22:25:33 2024-12-19 22:25:33 更新      

今天参加了校科技节，把这个简易前端html&css模板记录一下，以防以后用到。

简易主页，有简单的跳转功能：

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
<index.html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>病理图像检索与共享平台</title>
    <link rel="icon" href="./icon/main_icon.png" type="icon/main_icon.png">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <nav>
            <div class="logo">
                <img src="icon/main_icon.png" alt="LOGO" width="40" height="40">
                <h1>病理图像检索与共享平台</h1>
            </div>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="login.html">注册/登录</a></li>
                <li><a href="upload.html">图像上传</a></li>
                <li><a href="search.html">图像查询下载</a></li>
                <li><a href="help.html">帮助</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <h2>欢迎来到病理图像检索与共享平台</h2>
            <p>连接医疗专业人士，共享高质量病理图像，推动医学研究与诊断的进步</p>
        </section>

        <section id="features">
            <div class="feature-card" id="login">
                <img src="icon\icon_login.svg" alt="登录图标" width="64" height="64">
                <h3>注册/登录</h3>
                <p>创建您的专业账户，开启病理图像之旅</p>
                <a href="login.html" class="btn">立即登录</a>
            </div>
            <div class="feature-card" id="upload">
                <img src="icon\icon_upload.svg" alt="上传图标" width="64" height="64">
                <h3>图像上传</h3>
                <p>贡献您的病理图像，助力医学研究发展</p>
                <a href="upload.html" class="btn">开始上传</a>
            </div>
            <div class="feature-card" id="search">
                <img src="icon\icon_search.svg" alt="搜索图标" width="64" height="64">
                <h3>图像查询下载</h3>
                <p>快速检索所需病理图像，支持精准诊断</p>
                <a href="search.html" class="btn">搜索图像</a>
            </div>
            <div class="feature-card" id="help">
                <img src="icon\icon_help.svg" alt="帮助图标" width="64" height="64">
                <h3>帮助中心</h3>
                <p>获取全面支持，解答您的所有疑问</p>
                <a href="help.html" class="btn">查看帮助</a>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 病理图像检索与共享平台. 保留所有权利。</p>
    </footer>
</body>

</html>

附带CSS模式

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/* styles.css */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #280ed2;
}

/* 头部样式 */
header {
    background-color: #13004c;
    box-shadow: 0 2px 4px rgba(69, 71, 78, 0.093);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    margin: 0;
    font-size: 1.2rem;
    margin-left: 10px;
    color: #4992e7;
}

/* 导航栏样式 */
nav ul {
    padding: 0;
    list-style-type: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #4992e7;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    color: #fdfdfd;
}

/* 主要内容样式 */
main {
    padding-top: 80px;
    /* 为固定的header留出空间 */
}

.hero {
    background-image: url('image/background3.jpg');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(1, 45, 67);
    padding: 0 20px;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    max-width: 600px;
}

#features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 50px 5%;
}

.feature-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 30px;
    margin: 20px;
    text-align: center;
    width: calc(25% - 40px);
    min-width: 250px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature-card img {
    margin-bottom: 20px;
}

.feature-card h3 {
    color: #4a90e2;
    margin-bottom: 10px;
}

.btn {
    display: inline-block;
    background-color: #4a90e2;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #3a7bc8;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 50px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }

    nav ul {
        margin-top: 20px;
    }

    nav ul li {
        margin: 0 10px;
    }

    .feature-card {
        width: calc(50% - 40px);
    }
}

@media (max-width: 480px) {
    .feature-card {
        width: 100%;
    }
}

登录界面：

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
<!--login.html-->
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 病理图像检索与共享平台</title>
    <link rel="icon" href="./icon/main_icon.png" type="icon/main_icon.png">
    <link rel="stylesheet" href="register_styles.css">
</head>

<body>
    <header>
        <nav>
            <div class="logo">
                <img src="icon/main_icon.png" alt="病理图像平台logo" width="40" height="40">
                <h1>病理图像检索与共享平台</h1>
            </div>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html" class="active">注册</a></li>
                <li><a href="upload.html">图像上传</a></li>
                <li><a href="search.html">图像查询下载</a></li>
                <li><a href="help.html">帮助</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="auth-section">
            <div class="auth-container">
                <div class="auth-form register">
                    <h2>登录</h2>
                    <form id="register-form">
                        <div class="form-group">
                            <label for="register-email">电子邮箱</label>
                            <input type="email" id="register-email" name="register-email" required>
                        </div>
                        <div class="form-group">
                            <label for="register-password">密码</label>
                            <input type="password" id="register-password" name="register-password" required>
                        </div>
                        <button type="submit" class="btn">登录</button>
                    </form>
                    <div class="auth-links">
                        <a href="register.html">没有账号？点击这里注册</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 病理图像检索与共享平台. 保留所有权利。</p>
    </footer>

    <script src="register.js"></script>
</body>

</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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
/* login_styles.css */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #280ed2;
    background-color: #f5f5f5;
}

/* 头部样式 */
header {
    background-color: #13004c;
    box-shadow: 0 2px 4px rgba(69, 71, 78, 0.093);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 40px;
    height: 40px;
}

.logo h1 {
    margin: 0;
    font-size: 1.2rem;
    margin-left: 10px;
    color: #4992e7;
}

/* 导航栏样式 */
nav ul {
    padding: 0;
    list-style-type: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #4992e7;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover,
nav ul li a.active {
    color: #fdfdfd;
}

/* 主要内容样式 */
main {
    padding-top: 80px;
    min-height: calc(100vh - 160px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.login-container h2 {
    color: #4a90e2;
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.btn {
    display: inline-block;
    background-color: #4a90e2;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #3a7bc8;
}

.login-links {
    margin-top: 20px;
    text-align: center;
}

.login-links a {
    color: #4a90e2;
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }

    nav ul {
        margin-top: 20px;
    }

    nav ul li {
        margin: 0 10px;
    }

    .login-container {
        margin: 20px;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: 20px;
    }
}

个人前端小笔记：

1.文本格式化标签

加粗倾斜删除线下划线

表示一行内容

一行内可以有多个

3. 图像标签 单标签

”图片无法正确显示时显示这段文字”/

（如找不到该路径下该名称的图片文件时）

属性要写在标签名img后面

属性之间没有顺序，相互并列，之间用空格隔开

4.路径

目标文件夹 存储所有文件的总文件夹

根目录 目标文件夹的第一级目录

相对路径用///

绝对路径用\\

5.超链接标签

anchor 锚

  1. input输入表单元素 select 下拉表单元格 textarea 文本域元素
  2. 中的属性值
  • 标题: 简易前端html&css模板
  • 作者: Cealivanus Kwan
  • 创建于 : 2024-12-11 22:31:18
  • 更新于 : 2024-12-19 22:25:33
  • 链接: https://redefine.ohevan.com/2024/12/11/简易前端html-css模板/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
简易前端html&css模板