第一阶段（六）

日期：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">登&emsp;录</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属性

最终效果截图：

 

 

 

任务看板：

 

 

 每日照片：

 

 

posted @ 2021-05-08 22:10  靠谱杨  阅读(134)  评论(8)  编辑  收藏  举报