• 第一阶段冲刺(六)


    日期: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     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属性

    最终效果截图:


    任务看板:

  • 相关阅读:
    用命令创建MySQL数据库
    Linux下安装mysql
    MySQL字符集及校对规则的理解
    Mybatis 高级结果映射 ResultMap Association Collection
    查看linux系统版本命令
    hdu 1217 Arbitrage (最小生成树)
    hdu 2544 最短路(两点间最短路径)
    hdu 3371 Connect the Cities(最小生成树)
    hdu 1301 Jungle Roads (最小生成树)
    hdu 1875 畅通工程再续(prim方法求得最小生成树)
  • 原文地址:https://www.cnblogs.com/zyj3955/p/14756375.html
Copyright © 2020-2023  润新知