zoukankan html css js c++ java

团队作业进度报告

今日任务：完成了电影详情页面的编写

主要代码：

MoviePage.css

/*主面板样式*/
#container {
    100%;
    margin:0px auto;/*主面板DIV居中*/
}
/*搜索面板样式*/
#header {
    100%;
    height:110px;
    /*border:1px #F00 solid;*/
    background-color: whitesmoke;
}
/*TOP榜部分面板样式*/
#main {
    100%;
    height:1000px;
    /*border:1px #D5D5D5 solid;*/
}
#medium_title {
    color:black;
    font-family: 华文行楷;
    font-size: 40px;
    margin-left: 300px;
    margin-top: 20px;
    margin-right: 30px;
}
/*电影名称样式*/
#title {
    color:black;
    font-family: 华文行楷;
    text-align:right;
    margin-top: 15px;
    margin-right: 30px;
    color: steelblue;
}
/*布局*/
.title {
    float:left;
    40%;
    height:70%;
    background-color: whitesmoke;
    margin-top: 23px;
}
.mvname {
    float:left;
    100%;
    height:50px;
    /**/
    margin-top: 40px;
}
.search {
    float:left;
    60%;
    height:100%;
    background-color: white;
    margin-top: 25px;
}
.sidebar {
    float:left;
    37%;
    height:100%;
}
.content {
    float:left;
    48%;
    height:100%;
    /**/
}
.cat {
    float:left;
    15%;
    height:100%;
    background-color: white;
}
/**/

/*搜索框*/
* {
    margin: 0;
    padding: 0;
}
.container {
    height: 70px;
     800px;
    margin: 10px auto 0 auto;
}
.parent {
    position: relative;
}
.search {
     300px;
    height: 40px;
    border-radius: 18px;
    outline: none;
    border: 1px solid #ccc;
    padding-left: 20px;
    position: absolute;
}
.btn {
    height: 35px;
     35px;
    position: absolute;
    background: url("") no-repeat -2px -99px;
    top: 6px;
    left: 285px;
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: 23px;
}
/**/

/*介绍（右）*/
.p_right {
     250px;
    margin-left: 30px;
    margin-top: 80px;
    font-family: 宋体;
    font-size: 15px;
}

/*广告（右）*/
.ad_right {
     250px;
    height: 200px;
    margin-left: 30px;
    margin-top: 45px;
}

/*电影海报*/
.picture {
    float:left;
    18%;
    height:220px;
    margin-left: 0px;
    margin-top: 25px;
    /**/
}

/*电影介绍*/
.instroction {
    float:left;
     50%;
    height: 200px;
    font-size: 13px;
    margin-left: 18px;
    margin-top: 25px;
    font-family: 微软雅黑;
    color: #666666;
    line-height: 20px;
}

/*电影评分*/
.score {
    float:left;
    20%;
    height:220px;
    margin-left: 5px;
    margin-top: 25px;
    /**/
}

/*电影来源*/
.origin {
     300px;
    height: 200px;
    margin-left: 50px;
    margin-top: 110px;
    background-color: #EEEEE0;
}
.p1 {
    /*font-family: 微软雅黑;*/
    font-size: 15px;
    color: #669966;
    margin-left: 10px;
    line-height: 15px;
}
.p2 {
    margin-left: 15px;
    margin-top: 15px;
    font-size: 13px;
}
.p3_1 {
    float: left;
    margin-left: 71px;
    font-size: 13px;
    color: #A2A2A2;
}
.p3_2 {
    float: left;
    margin-left: 59px;
    font-size: 13px;
    color: #A2A2A2;
}
.p3_3 {
    float: left;
    margin-left: 90px;
    font-size: 13px;
    color: #A2A2A2;
}
.p4 {
    float: left;
 }
.p5 {
    color: #cccccc;
}

/*收藏*/
.collect {
     50%;
    height: 60px;
    margin-top: 360px;
    /**/
}
.button { /* 按钮美化 */
     50px; /* 宽度 */
    height: 25px; /* 高度 */
    border- 0px; /* 边框宽度 */
    border-radius: 3px; /* 边框半径 */
    background: #ffcc99; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: Microsoft YaHei; /* 设置字体 */
    color: black; /* 字体颜色 */
    font-size: 10px; /* 字体大小 */
    margin-bottom: 10px;
    /*margin-left: 15px;*/
}
.button:hover { /* 鼠标移入按钮范围时改变颜色 */
    background: #ff9900;
}

/*剧情简介*/
.story {
     100%;
    height: 300px;
    /*margin-top: 60px;*/
    /**/
}
.p_story {
    text-indent:2em;
    font-size: 13px;
    margin-left: 10px;
    margin-top: 25px;
    font-family: 微软雅黑;
    color: #666666;
    line-height: 20px;
}

MoviePage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>电影详情</title>
    <link rel="stylesheet" href="css/MoviePage.css">
    <style>
        <!--超链接样式-->
            /* unvisited link */
        a:link {
            color: red;
        }

        /* visited link */
        a:visited {
            color: #3399cc;
        }

        /* mouse over link */
        a:hover {
            color: white;
            background-color: #0eb0d2;
        }

        /* selected link */
        a:active {
            color: blue;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="title"><h1 id="title">树懒电影</h1></div>
        <div class="container">
            <form action="https://www.baidu.com/?tn=62095104_19_oem_dg" class="parent">
                <input type="text" class="search" placeholder="电影名称，主演">
                <input type="button" name="" id="" class="btn">
            </form>
        </div>
    </div>

    <div id="main">
        <div class="cat"></div>
        <div class="content">
            <div class="mvname"><h2>肖申克的救赎 The Shawshank Redemption (1994)</h2></div>
            <p class="picture"><img src=".\img\3.png" height="200px" width="140px" /></p>
                        <p class="instroction">
                            导演: 弗兰克·德拉邦特 Frank Darabont  <br>
                            编剧: 弗兰克·德拉邦特 / 斯蒂芬·金  <br>
                            主演: 蒂姆·罗宾斯 Tim Robbins / 摩根·弗里曼 / 鲍勃·冈顿 / 威廉姆·赛德勒 / 克兰西·布朗<br>
                            类型：犯罪 / 剧情<br>
                            制片国家/地区: 美国<br>
                            语言: 英语<br>
                            上映日期: 1994-09-10(多伦多电影节) / 1994-10-14(美国)<br>
                            片长: 142分钟<br>
                            又名: 月黑高飞(港) / 刺激1995(台) / 地狱诺言 / 铁窗岁月 / 消香克的救赎
                        </p>
            <p class="score"><img src=".\img\5.png" height="200px" width="160px" /></p>
            <div class="collect">
                <button class="button">想看</button>
                <button class="button">在看</button>
                <button class="button">看过</button>
            </div>
            <div class="story">
                <div class="p1"><br>电影剧情简介  · · · · · ·</div>
                <p class="p_story">一场谋杀案使银行家安迪（蒂姆•罗宾斯 Tim Robbins 饰）蒙冤入狱，谋杀妻子及其情人的指控将囚禁他终生。
                    在肖申克监狱的首次现身就让监狱“大哥”瑞德（摩根•弗里曼 Morgan Freeman 饰）对他另眼相看。
                    瑞德帮助他搞到一把石锤和一幅女明星海报，两人渐成患难 之交。很快，安迪在监狱里大显其才，
                    担当监狱图书管理员，并利用自己的金融知识帮助监狱官避税，引起了典狱长的注意，被招致麾下帮助典狱长洗黑钱。
                    偶然一次，他得知一名新入狱的小偷能够作证帮他洗脱谋杀罪。燃起一丝希望的安迪找到了典狱长，希望他能帮自己翻案。
                    阴险伪善的狱长假装答应安迪，背后却派人杀死小偷，让他唯一能合法出狱的希望泯灭。沮丧的安迪并没有绝望，
                    在一个电闪雷鸣的风雨夜，一场暗藏几十年的越狱计划让他自我救赎，重获自由！老朋友瑞德在他的鼓舞和帮助下，也勇敢地奔向自由。
                </p>
            </div>
        </div>
        <div class="sidebar">
            <div class="origin">
                <div class="p1"><br>在哪儿看这部电影  · · · · · ·</div>
                <div class="p2">
                    <div class="p4"> <a href="https://movie.douban.com/subject/1292052/" style="text-decoration:none;">腾讯视频(评分9.4)</a></div>
                    <div class="p3_1">VIP免费观看</div>
                    <p class="p5">.....................................................................................</p>
                    <div class="p4"> <a href="https://movie.douban.com/subject/1292052/" style="text-decoration:none;">爱奇艺视频(评分9.1)</a></div>
                    <div class="p3_2">VIP免费观看</div>
                    <p class="p5">.....................................................................................</p>
                    <div class="p4"> <a href="https://movie.douban.com/subject/1292052/" style="text-decoration:none;">IMDB(评分8.5)</a></div>
                    <div class="p3_3">VIP免费观看</div>
                </div>
            </div>
            <p class="ad_right"></p>
        </div>
    </div>
    <!--
    <footer class="footer">
        <div class="container clearfix">
            <div class="left">
                <p>
                    违法和不良信息举报电话：4008353331-9
                </p>
                <p>
                    <img src="img/jubao.png" alt=""> <a href="">中国互联网举报中心</a> 电话：12377 <a href="">新出发京批字第直160029号</a>
                </p>
            </div>
        </div>
    </footer>
    -->
</body>

</html>
</div>
</body>
<html>

整体页面效果：

查看全文

相关阅读:
数据存储过程学习
 Python实现目录文件扫描功能
 python关于邮件发送包smtplib的实践分享
 Java自学笔记之学生管理系统
 Java自学笔记
 Java自学笔记1206
java自学笔记
 Django常用命令
 django+SQLite搭建轻量级个人博客（六）数据校验
 django+SQLite搭建轻量级个人博客（五）分页

原文地址：https://www.cnblogs.com/zyj3955/p/14748337.html