日期：2021.05.08
任务：完成网页的登录页面编写布局。
遇到问题：CSS+div布局使用不熟练，出现布局错位，位置大小不合适的问题。
HTML代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="css/login.css">
8 <title>树懒电影登录</title>
9 </head>
10 <body>
11 <div id="container">
12 <div id="container-child">
13 <div id="img-div"><img src="images/shulan.png"></div>
14 <div id="login-div">
15 <div>
16 <p class="p-title">登录您的树懒电影</p>
17 <form id="login-form">
18 <div class="input-d">
19 <input class="input-text" type="text" name="username" id="username" placeholder="请输入您的账号">
20 </div>
21 <div class="input-d">
22 <input class="input-text" type="password" name="password" id="password" placeholder="请输入您的密码">
23 </div>
24 <div class="div-input">
25 <div>
26 <input type="checkbox" name="remember" id="remember">
27 <label>记住密码</label>
28 <a href="#">忘记密码</a>
29 </div>
30 </div>
31 <button type="button" class="login-button">登 录</button>
32 <div class="footer"> <a href="regitser.html">注册</a> | <a href="#">切换账号</a></div>
33
34 </form>
35 </div>
36 </div>
37 </div>
38
39 </div>
40 </body>
41 </html>
截图：
5.8 李楠
今日主要完成了，查询排序页面的bug修改，之前写的查询排序对于热门（根据评论人数确定）排序有问题，经过排查是因为存入数据库的人数是字符串，
数据库按字符串进行的排序。还有日期问题，日期中有日期与上映的地点，这样的话也不能按时间进行排序。
所以将数据库的scorenum的类型改为了int，对于日期中的杂乱数据进行了清除。
1 def update_time_num(): 2 cursor = None 3 conn = None 4 conn, cursor = get_conn() 5 i = 5904; 6 while i <=5906: 7 print(i) 8 i_str = '%s' % i 9 i = i + 1
10 # sql = "select meet from paper_data where id=" + i_str
11 # cursor.execute(sql)
12 # res = cursor.fetchall()
13 # if(res!=()):
14 # title_update=replace(res[0][0])
15 try: 16 sql_0="select scorenum from moviebean where id ="+i_str 17 cursor.execute(sql_0) 18 res = cursor.fetchall() 19 print(res) 20 print(res[0][0][1:len(res[0][0])]) 21 sql = "update moviebean set scorenum = %s where id=" + i_str 22 cursor.execute(sql, [res[0][0][1:len(res[0][0])]]) 23 except: 24 traceback.print_exc() 25 print("无此id", i) 26 conn.commit() 27
28
29 def find_class_order(str): 30 sql="select title,star,director,score,date_time,area,type_movie,scorenum,img from moviebean where 1=1 " \ 31 "and (type_movie like "+"'%"+str[0]+"%'"+") and (date_time like "+"'%"+str[1]+"%'"+") and(area like "+"'%"+str[2]+"%'"+") "
32 if(str[3]=="star_1"): 33 sql=sql+" order by score desc "
34 if(str[3]=="star_0"): 35 sql=sql+" order by score "
36 if(str[3]=="hot_1"): 37 sql=sql+" order by scorenum desc "
38 if(str[3]=="hot_0"): 39 sql=sql+" order by scorenum "
40 if(str[3]=="time_1"): 41 sql=sql+" order by date_time desc "
42 if(str[3]=="time_0"): 43 sql=sql+" order by date_time "
44 sql=sql+"limit "+str[4]+",20 "
45 print(sql) 46 res = query(sql) 47 print(res) 48 return res
5.8 章英杰
今日任务：完成了电影详情页面的部分内容
主要代码：
Moviepage.css
1 /*主面板样式*/
2 #container {
3 width:100%;
4 margin:0px auto;/*主面板DIV居中*/
5 }
6 /*搜索面板样式*/
7 #header {
8 width:100%;
9 height:110px;
10 /*border:1px #F00 solid;*/
11 background-color: whitesmoke;
12 }
13 /*TOP榜部分面板样式*/
14 #main {
15 width:100%;
16 height:600px;
17 border:1px #F00 solid;
18 }
19 #medium_title {
20 color:black;
21 font-family: 华文行楷;
22 font-size: 40px;
23 margin-left: 300px;
24 margin-top: 20px;
25 margin-right: 30px;
26 }
27 /*电影名称样式*/
28 #title {
29 color:black;
30 font-family: 华文行楷;
31 text-align:right;
32 margin-top: 15px;
33 margin-right: 30px;
34 color: steelblue;
35 }
36 /*布局*/
37 .title {
38 float:left;
39 width:40%;
40 height:70%;
41 background-color: whitesmoke;
42 margin-top: 23px;
43 }
44 .mvname {
45 float:left;
46 width:100%;
47 height:50px;
48 /**/
49 margin-top: 40px;
50 }
51 .search {
52 float:left;
53 width:60%;
54 height:100%;
55 background-color: white;
56 margin-top: 25px;
57 }
58 .sidebar {
59 float:left;
60 width:37%;
61 height:100%;
62 }
63 .content {
64 float:left;
65 width:48%;
66 height:100%;
67 /**/
68 }
69 .cat {
70 float:left;
71 width:15%;
72 height:100%;
73 background-color: white;
74 }
75 /**/
76
77 /*搜索框*/
78 * {
79 margin: 0;
80 padding: 0;
81 }
82 .container {
83 height: 70px;
84 width: 800px;
85 margin: 10px auto 0 auto;
86 }
87 .parent {
88 position: relative;
89 }
90 .search {
91 width: 300px;
92 height: 40px;
93 border-radius: 18px;
94 outline: none;
95 border: 1px solid #ccc;
96 padding-left: 20px;
97 position: absolute;
98 }
99 .btn {
100 height: 35px;
101 width: 35px;
102 position: absolute;
103 background: url("") no-repeat -2px -99px;
104 top: 6px;
105 left: 285px;
106 border: none;
107 outline: none;
108 cursor: pointer;
109 margin-top: 23px;
110 }
111 /**/
112
113 /*介绍（右）*/
114 .p_right {
115 width: 250px;
116 margin-left: 30px;
117 margin-top: 80px;
118 font-family: 宋体;
119 font-size: 15px;
120 }
121
122 /*广告（右）*/
123 .ad_right {
124 width: 250px;
125 height: 200px;
126 margin-left: 30px;
127 margin-top: 45px;
128 }
129
130 /*电影海报*/
131 .picture {
132 float:left;
133 width:18%;
134 height:300px;
135 margin-left: 0px;
136 margin-top: 25px;
137 }
138
139 /*电影介绍*/
140 .instroction {
141 float:left;
142 width: 50%;
143 height: 200px;
144 font-size: 13px;
145 margin-left: 18px;
146 margin-top: 25px;
147 font-family: 微软雅黑;
148 color: #666666;
149 line-height: 20px;
150 }
151
152 /*电影评分*/
153 .score {
154 float:left;
155 width:20%;
156 height:300px;
157 margin-left: 5px;
158 margin-top: 25px;
159 }
160
161 /*电影来源*/
162 .origin {
163 width: 300px;
164 height: 200px;
165 margin-left: 50px;
166 margin-top: 110px;
167 background-color: #EEEEE0;
168 }
169 .p1 {
170 /*font-family: 微软雅黑;*/
171 font-size: 15px;
172 color: #669966;
173 margin-left: 10px;
174 line-height: 15px;
175 }
176 .p2 {
177 margin-left: 15px;
178 margin-top: 15px;
179 font-size: 13px;
180 }
181 .p3_1 {
182 float: left;
183 margin-left: 71px;
184 font-size: 13px;
185 color: #A2A2A2;
186 }
187 .p3_2 {
188 float: left;
189 margin-left: 59px;
190 font-size: 13px;
191 color: #A2A2A2;
192 }
193 .p3_3 {
194 float: left;
195 margin-left: 90px;
196 font-size: 13px;
197 color: #A2A2A2;
198 }
199 .p4 {
200 float: left;
201 }
202 .p5 {
203 color: #cccccc;
204 }
205
206 /*收藏*/
207 .collect {
208 width: 50%;
209 height: 40px;
210 margin-top: 360px;
211 background-color: pink;
212 }
213 .button { /* 按钮美化 */
214 width: 50px; /* 宽度 */
215 height: 25px; /* 高度 */
216 border-width: 0px; /* 边框宽度 */
217 border-radius: 3px; /* 边框半径 */
218 background: #ffcc99; /* 背景颜色 */
219 cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
220 outline: none; /* 不显示轮廓线 */
221 font-family: Microsoft YaHei; /* 设置字体 */
222 color: black; /* 字体颜色 */
223 font-size: 10px; /* 字体大小 */
224 /*margin-top: -10px;*/
225 margin-left: 15px;
226 }
227 .button:hover { /* 鼠标移入按钮范围时改变颜色 */
228 background: #ff9900;
229 }
Moviepage.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>电影详情</title>
9 <link rel="stylesheet" href="css/MoviePage.css">
10 <style>
11 <!--超链接样式--> 12 /* unvisited link */
13 a:link {
14 color: red;
15 }
16
17 /* visited link */
18 a:visited {
19 color: #3399cc;
20 }
21
22 /* mouse over link */
23 a:hover {
24 color: white;
25 background-color: #0eb0d2;
26 }
27
28 /* selected link */
29 a:active {
30 color: blue;
31 }
32 </style>
33 </head>
34 <body>
35 <div id="container">
36 <div id="header">
37 <div class="title"><h1 id="title">树懒电影</h1></div>
38 <div class="container">
39 <form action="https://www.baidu.com/?tn=62095104_19_oem_dg" class="parent">
40 <input type="text" class="search" placeholder="电影名称，主演">
41 <input type="button" name="" id="" class="btn">
42 </form>
43 </div>
44 </div>
45
46 <div id="main">
47 <div class="cat"></div>
48 <div class="content">
49 <div class="mvname"><h2>肖申克的救赎 The Shawshank Redemption (1994)</h2></div>
50 <p class="picture"><img src=".\\img\\3.png" height="200px" width="140px" /></p>
51 <p class="instroction">
52 导演: 弗兰克•德拉邦特 Frank Darabont <br>
53 编剧: 弗兰克•德拉邦特 / 斯蒂芬•金 <br>
54 主演: 蒂姆•罗宾斯 Tim Robbins / 摩根•弗里曼 / 鲍勃•冈顿 / 威廉姆•赛德勒 / 克兰西•布朗<br>
55 类型：犯罪 / 剧情<br>
56 制片国家/地区: 美国<br>
57 语言: 英语<br>
58 上映日期: 1994-09-10(多伦多电影节) / 1994-10-14(美国)<br>
59 片长: 142分钟<br>
60 又名: 月黑高飞(港) / 刺激1995(台) / 地狱诺言 / 铁窗岁月 / 消香克的救赎 61 </p>
62 <p class="score"><img src=".\\img\\5.png" height="200px" width="160px" /></p>
63 <div class="collect">
64 <button class="button">想看</button>
65 <button class="button">在看</button>
66 <button class="button">看过</button>
67 </div>
68 </div>
69 <div class="sidebar">
70 <div class="origin">
71 <div class="p1"><br>在哪儿看这部电影 • • • • • •</div>
72 <div class="p2">
73 <div class="p4"> <a href="https://movie.douban.com/subject/1292052/" style="text-decoration:none;">腾讯视频(评分9.4)</a></div>
74 <div class="p3_1">VIP免费观看</div>
75 <p class="p5">.....................................................................................</p>
76 <div class="p4"> <a href="https://movie.douban.com/subject/1292052/" style="text-decoration:none;">爱奇艺视频(评分9.1)</a></div>
77 <div class="p3_2">VIP免费观看</div>
78 <p class="p5">.....................................................................................</p>
79 <div class="p4"> <a href="https://movie.douban.com/subject/1292052/" style="text-decoration:none;">IMDB(评分8.5)</a></div>
80 <div class="p3_3">VIP免费观看</div>
81 </div>
82 </div>
83 <p class="ad_right"></p>
84 </div>
85 </div>
86 <!--
87 <footer class="footer"> 88 <div class="container clearfix"> 89 <div class="left"> 90 <p> 91 违法和不良信息举报电话：4008353331-9 92 </p> 93 <p> 94 <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a> 95 </p> 96 </div> 97 </div> 98 </footer> 99 -->
100 </body>
101
102 </html>
103 </div>
104 </body>
105 <html>
遇到的问题：按钮模块部分无法插入到对应的div模块中
解决方案：
①问题原因：电影海报模块过高导致，如图：
②解决方法：缩小电影海报的height属性
最终效果截图：
任务看板：
每日照片：
