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
<html></html>  #根标签
<head></head>  #头标签
<title></title>  #头标题标签，在<head>标签⾥设置
<meta charset="utf-8">  #常⽤于指定⻚⾯编码，在<head>标签内
<body></body>  #⻚⾯的内容基本上写在此标签内
<h1></h1> h1...h6  #标题标签
<p></p>  #段落标签
<a href="https://www.baidu.com" target="_blank">百度</a>  #超级链接标签
<table><tr><td>学号</td><td>姓名</td></tr></table>  #表格标签
表单标签：<form action=""method="post">表单元素控件</form>  #表单标签

#表单元素控件  <input> 
文本显示: <input type="text" name="tname" value="动漫" readonly>
类型: number(step 0.1) date password
提示功能: <input type="text"placeholder="请输入电影名称">

# 下拉框标签  <select></select>
<select name="tid">
<option value="1">喜剧</option>
<option value="2" selected>动画</option>
</select>

# 图片标签
<img src="static/p11.png" width="300">

# 样式标签 style
<style> 
	body{ margin: 0 auto; width: 800px; 
		background-image:url("static/bg.jpg");
		background-repeat:no-repeat;
		background-size: cover;
	}
	h1{ color: #258dcd}
	a{ 
		background-color: #258dcd; 
		color: white; 
		padding: 5px 8px;
		text-decoration: none;
		border-radius: 5px;
		/*半透明*/
		/*background-color:rgba(55,55,55,0.5)*/
	}
	table,tr,td{ border: 2px solid black; border-collapse: collapse;}
	table{ width: 100% }
	td{ text-align: center; padding: 10px;}
	.tou{ 
		background-color: #258dcd; 
		color: white; 
		font-size: 18px; 
		font-weight: bold;
	}
</style>

实践

1.制作列表⻚： list.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣网列表页</title>
    <style>
        /* 全局样式设置 */
        body {
            /* 设置页面字体 */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* 背景图片路径 */
            /* background-image: url("static/pbg1.jpg"); */
            background-size: cover;
            /* 背景图片覆盖整个页面 */
            background-position: center;
            /* 背景图片居中显示 */
            display: flex;
            /* 使用 Flexbox 布局 */
            flex-direction: column;
            /* 垂直排列子元素 */
            align-items: center;
            /* 水平居中对齐子元素 */
            justify-content: flex-start;
            /* 垂直顶部对齐子元素 */
            min-height: 100vh;
            /* 最小高度为视口高度 */
            margin: 0;
            /* 清除默认边距 */
            padding: 20px;
            /* 添加内边距 */
            box-sizing: border-box;
            /* 盒模型包含内边距和边框 */
        }

        h1 {
            /* 标题颜色 - 蓝色 */
            color: #238ccd;
            /* 添加文字阴影 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            /* 底部外边距 */
            margin-bottom: 20px;
        }

        /* 导航链接容器样式 */
        .nav-links {
            /* 使用 Flexbox 布局 */
            display: flex;
            /* 水平居中对齐链接 */
            justify-content: center;
            /* 链接之间的间距 */
            gap: 15px;
            /* 底部外边距 */
            margin-bottom: 30px;
            /* 小屏幕下自动换行 */
            flex-wrap: wrap;
        }

        /* 导航链接样式 */
        .nav-links a {
            /* 背景色 - 蓝色 */
            background-color: #238ccd;
            /* 文字颜色 - 白色 */
            color: white;
            /* 去除下划线 */
            text-decoration: none;
            border-radius: 20px;
            /* 圆角边框 */
            padding: 10px 20px;
            /* 内边距 */
            transition: background-color 0.3s ease;
            /* 背景色过渡动画 */
        }

        /* 悬停时背景色变深 */
        /* 导航链接悬停效果 */
        .nav-links a:hover {
            background-color: #1a6fa3;
        }


        /* 列表容器样式 */
        .movie-list {
            /* 半透明白色背景 */
            background-color: rgba(255, 255, 255, 0.9);
            /* 内边距 */
            padding: 20px;
            /* 圆角边框 */
            border-radius: 10px;
            /* 添加阴影效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 宽度为父容器的100% */
            width: 100%;
            /* 最大宽度限制 */
            max-width: 800px;
            /* 盒模型包含内边距和边框 */
            box-sizing: border-box;
        }

        /* 表格样式优化 */
        table {
            /* 宽度为父容器的100% */
            width: 100%;
            /* 合并边框 */
            border-collapse: collapse;
        }

        th,
        td {
            /* 单元格内边距 */
            padding: 12px;
            /* 文本居中对齐 */
            text-align: center;
            /* 底部边框 */
            border-bottom: 1px solid #ddd;
        }

        th {
            /* 表头背景色 - 蓝色 */
            background-color: #238ccd;
            /* 表头文字颜色 - 白色 */
            color: white;
            /* 表头文字粗细 */
            font-weight: 600;
        }

        /* 行悬停时背景色变浅 */
        tr:hover {
            background-color: #f5f5f5;
        }

        /* 操作按钮样式 */
        .action-btn {
            /* 行内块元素 */
            display: inline-block;
            /* 背景色 - 蓝色 */
            background-color: #238ccd;
            /* 文字颜色 - 白色 */
            color: white;
            /* 去除下划线 */
            text-decoration: none;
            /* 圆角边框 */
            border-radius: 5px;
            /* 内边距 */
            padding: 5px 10px;
            /* 外边距 */
            margin: 0 3px;
            /* 背景色过渡动画 */
            transition: background-color 0.3s ease;
        }

        /* 悬停时背景色变深 */
        .action-btn:hover {
            background-color: #1a6fa3;
        }

        /* 响应式设计 - 小屏幕设备 */
        @media (max-width: 600px) {
            .nav-links {
                /* 缩小链接间距 */
                gap: 10px;
            }

            .nav-links a {
                /* 减小链接内边距 */
                padding: 8px 15px;
                /* 减小链接文字大小 */
                font-size: 14px;
            }

            th,
            td {
                /* 减小单元格内边距 */
                padding: 8px;
                /* 减小文字大小 */
                font-size: 14px;
            }

            .action-btn {
                /* 减小按钮内边距 */
                padding: 3px 8px;
                /* 减小按钮文字大小 */
                font-size: 12px;
            }
        }
    </style>
</head>

<body>
    <!-- 页面标题 -->
    <h1>欢迎使用豆瓣网</h1>

    <!-- 导航链接区域 -->
    <div class="nav-links">
        <a href="/">首页</a>
        <a href="/list">电影类型列表</a>
        <a href="/add">添加电影类型</a>
        <a href="/addMovie">添加电影</a>
        <a href="/zhu" target="_blank">查看柱状图</a>
        <a href="bing" target="_blank">查看饼状图</a>
    </div>

    <!-- 电影列表容器 -->
    <div class="movie-list">
        <table>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>内容</th>
                <th>创建日期</th>
                <th>操作</th>
            </tr>
            {% for i in info %}
            <tr>
                <td>{{i[0]}}</td>
                <td>{{i[1]}}</td>
                <td>{{i[2]}}</td>
                <td>{{i[4]}}</td>
                <td>
                    <a href="/update/{{i[0]}}" class="action-btn">修改</a>
                    <a href="/delete/{{i[0]}}" class="action-btn">删除</a>
                    <a href="" class="action-btn">查看</a>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
</body>

</html>

2.制作添加⻚： add.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣网添加页</title>
    <style>
        /* 全局样式设置 */
        body {
            /* 设置页面字体 */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* 背景图片路径 */
            /* background-image: url("static/pbg1.jpg"); */
            /* 背景图片覆盖整个页面 */
            background-size: cover;
            /* 背景图片居中显示 */
            background-position: center;
            /* 使用 Flexbox 布局 */
            display: flex;
            /* 垂直排列子元素 */
            flex-direction: column;
            /* 水平居中对齐子元素 */
            align-items: center;
            /* 垂直顶部对齐子元素 */
            justify-content: flex-start;
            /* 最小高度为视口高度 */
            min-height: 100vh;
            /* 清除默认边距 */
            margin: 0;
            /* 添加内边距 */
            padding: 20px;
            /* 盒模型包含内边距和边框 */
            box-sizing: border-box;
        }

        /* 页面标题样式 */
        h1 {
            /* 标题颜色 - 蓝色 */
            color: #238ccd;
            /* 添加文字阴影 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            /* 底部外边距 */
            margin-bottom: 20px;
        }

        /* 导航链接容器样式 */
        .nav-links {
            /* 使用 Flexbox 布局 */
            display: flex;
            /* 水平居中对齐链接 */
            justify-content: center;
            /* 链接之间的间距 */
            gap: 15px;
            /* 底部外边距 */
            margin-bottom: 30px;
        }

        /* 导航链接样式 */
        .nav-links a {
            /* 背景色 - 蓝色 */
            background-color: #238ccd;
            /* 文字颜色 - 白色 */
            color: white;
            /* 去除下划线 */
            text-decoration: none;
            /* 圆角边框 */
            border-radius: 20px;
            /* 内边距 */
            padding: 10px 20px;
            /* 背景色过渡动画 */
            transition: background-color 0.3s ease;
        }

        /* 导航链接悬停效果 */
        .nav-links a:hover {
            /* 悬停时背景色变深 */
            background-color: #1a6fa3;
        }

        /* 图片样式 */
        img {
            /* 图片宽度 */
            width: 500px;
            /* 最大宽度为父容器的90% */
            max-width: 90%;
            /* 圆角边框 */
            border-radius: 10px;
            /* 添加阴影效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 底部外边距 */
            margin-bottom: 30px;
        }

        /* 表单容器样式 */
        form {
            /* 半透明白色背景 */
            background-color: rgba(255, 255, 255, 0.9);
            /* 内边距 */
            padding: 30px;
            /* 圆角边框 */
            border-radius: 10px;
            /* 添加阴影效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 宽度为父容器的100% */
            width: 100%;
            /* 最大宽度 */
            max-width: 400px;
        }

        /* 表单内段落样式 */
        form p {
            /* 使用 Flexbox 布局 */
            display: flex;
            /* 垂直排列子元素 */
            flex-direction: column;
            /* 底部外边距 */
            margin-bottom: 20px;
        }

        /* 表单标签样式 */
        form label {
            /* 底部外边距 */
            margin-bottom: 5px;
            /* 字体粗细 */
            font-weight: 600;
            /* 文字颜色 */
            color: #333;
        }

        /* 文本输入框样式 */
        form input[type="text"] {
            /* 内边距 */
            padding: 10px;
            /* 边框样式 */
            border: 1px solid #ccc;
            /* 圆角边框 */
            border-radius: 5px;
            /* 字体大小 */
            font-size: 16px;
        }

        /* 提交按钮样式 */
        form input[type="submit"] {
            /* 背景色 - 蓝色 */
            background-color: #238ccd;
            /* 文字颜色 - 白色 */
            color: white;
            /* 内边距 */
            padding: 12px 20px;
            /* 无边框 */
            border: none;
            /* 圆角边框 */
            border-radius: 5px;
            /* 鼠标指针样式 */
            cursor: pointer;
            /* 字体大小 */
            font-size: 16px;
            /* 背景色过渡动画 */
            transition: background-color 0.3s ease;
        }

        /* 提交按钮悬停效果 */
        form input[type="submit"]:hover {
            /* 悬停时背景色变深 */
            background-color: #1a6fa3;
        }

        /* 响应式设计 - 小屏幕设备 */
        @media (max-width: 600px) {
            body {
                /* 添加内边距防止内容溢出 */
                padding: 20px;
            }

            .nav-links {
                /* 链接换行显示 */
                flex-wrap: wrap;
            }
        }
    </style>
</head>

<body>
    <!-- 页面标题 -->
    <h1>欢迎使用豆瓣网</h1>

    <!-- 导航链接区域 -->
    <div class="nav-links">
        <a href="/">首页</a>
        <a href="/list">电影类型列表</a>
        <a href="/add">添加电影类型</a>
        <a href="/addMovie">添加电影</a>
        <a href="/zhu" target="_blank">查看柱状图</a>
        <a href="bing" target="_blank">查看饼状图</a>
    </div>

    <!-- 装饰图片 -->
    <img src="static/py11.png" alt="">

    <!-- 添加电影类型表单 -->
    <form action="/addSubmit" method="post">
        <p>
            <label for="id">编号：</label>
            <input type="text" name="tid">
        </p>
        <p>
            <label for="name">名称：</label>
            <input type="text" name="tname">
        </p>
        <p>
            <label for="content">内容：</label>
            <input type="text" name="tcontent">
        </p>
        <p>
            <input type="submit" value="添加">
        </p>
    </form>
</body>

</html>

使⽤ python+flask+mysql+html 三层架构开发⾖瓣⽹

电影类型列表页面

添加电影类型页面

添加成功

修改页面

修改成功（测试仅修改内容，不修改名称）

删除操作（测试删除 3 功夫）