日期: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 100%; 4 margin:0px auto;/*主面板DIV居中*/ 5 } 6 /*搜索面板样式*/ 7 #header { 8 100%; 9 height:110px; 10 /*border:1px #F00 solid;*/ 11 background-color: whitesmoke; 12 } 13 /*TOP榜部分面板样式*/ 14 #main { 15 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 40%; 40 height:70%; 41 background-color: whitesmoke; 42 margin-top: 23px; 43 } 44 .mvname { 45 float:left; 46 100%; 47 height:50px; 48 /**/ 49 margin-top: 40px; 50 } 51 .search { 52 float:left; 53 60%; 54 height:100%; 55 background-color: white; 56 margin-top: 25px; 57 } 58 .sidebar { 59 float:left; 60 37%; 61 height:100%; 62 } 63 .content { 64 float:left; 65 48%; 66 height:100%; 67 /**/ 68 } 69 .cat { 70 float:left; 71 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 800px; 85 margin: 10px auto 0 auto; 86 } 87 .parent { 88 position: relative; 89 } 90 .search { 91 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 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 250px; 116 margin-left: 30px; 117 margin-top: 80px; 118 font-family: 宋体; 119 font-size: 15px; 120 } 121 122 /*广告(右)*/ 123 .ad_right { 124 250px; 125 height: 200px; 126 margin-left: 30px; 127 margin-top: 45px; 128 } 129 130 /*电影海报*/ 131 .picture { 132 float:left; 133 18%; 134 height:300px; 135 margin-left: 0px; 136 margin-top: 25px; 137 } 138 139 /*电影介绍*/ 140 .instroction { 141 float:left; 142 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 20%; 156 height:300px; 157 margin-left: 5px; 158 margin-top: 25px; 159 } 160 161 /*电影来源*/ 162 .origin { 163 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 50%; 209 height: 40px; 210 margin-top: 360px; 211 background-color: pink; 212 } 213 .button { /* 按钮美化 */ 214 50px; /* 宽度 */ 215 height: 25px; /* 高度 */ 216 border- 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属性