日期：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屬性
最終效果截圖：
任務看板：
每日照片：
