首页 > > 网页制作 > css >

【web】movie review——静态页面训练、css训练

2018-09-10 01:19:08来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

 实现样式要求：

 

 

image:

banner.png:

generaloverview.png:

background.png:

 

bannerbackground.png:

 

rottenbig.png:

 rottenbackground.png:

 

fresh.gif

rotten.gif

critic.gif


 

 

文件目录：

     -image

     -movie.css

     -skeleton.html

     -tmnt.html

 

 

文件内容：

 movie.css

body {
    background-image: url("images/background.png");
    padding: 0;
    margin: 0;
}
* {
    font-size: 8pt;
    font-family: Verdana, Tahoma, sans-serif;
}
q {
    font-weight: bold;
}
.toppic {
    height: 50px;
    text-align: center;
    background-repeat: repeat-x;
    background-image: url("images/bannerbackground.png");
}
.bigheading {
    text-align: center;
    font-size: 24pt;
    font-family: Tahoma, Verdana, sans-serif;
    font-weight: bold;
}
.main {
    position: relative;
    /*margin-right: auto;
    margin-left: auto;*/
    overflow: hidden;
    border-bottom:0px;
    width:800px;
    margin:0 auto;
    border :4px gray solid;
}
.rottenbigDiv {
    margin-left: 0;
    width: 550px;
    float: left;
    background-image: url("images/rottenbackground.png");
    background-repeat: repeat-x;
}
#redDiv {
    font-size: 48pt;
    color: red;
    font-weight: bold;
    /*vertical-align: bottom;*/
}
.rottenbigDiv img {
    vertical-align: bottom;
    height: 83px;
}
#zitiDiv {
    color: white;
    /*vertical-align: 12px;*/
}
.quote {
    /*font-size: 8pt;*/
    background-color: #E1D697;
    border: 2px gray solid;
    padding: 8px;
    overflow: hidden;
    font-weight: bold;
}
.contentleft {
    width: 550px;
    margin: 0;
    overflow: hidden;
}
.contentDiv {
    margin-left: 2%;
    width: 47%;
    float: left;
}
.leftcontent {
    /*overflow: hidden;*/
    /*margin-left: 2%;*/
    margin-bottom: 3em;
}
.imagep {
    overflow: hidden;
}
.generaloverviewDiv {
    float: right;
    background-color: #A2B964;
    width:250px;
    padding-bottom: 10px;
}
dt {
    font-family: Arial, sans-serif;
    font-weight: bold;
}
dd {
    font-family: Arial, sans-serif;
    margin-bottom: 1em;
}
dl {
    margin: 1em;
}
#bar {
    padding: 5px;
    width:800px;
    text-align: center;
    background-color: #A2B964;
    float: right;
    margin: 0;
}
.bottom {
    float: right;
    position: fixed;
    right: 0px;
    bottom: 0px;
}
.kuangImage {
    float: left;
    vertical-align: top;
    margin-right:  5px;
}
.xieti {
    font-style: italic;
}

skeleton.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TMNT - Rancid Tomatoes</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="movie.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <div>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/banner.png" alt="Rancid Tomatoes" />
        </div>

        <h1>TMNT (2007)</h1>
        
        <div>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/generaloverview.png" alt="general overview" />
        </div>

        <dl>
            <dt>STARRING</dt>
            <dd>Mako <br /> Sarah Michelle Gellar</dd>

            <dt>DIRECTOR</dt>
            <dd>Kevin Munroe</dd>

            <dt>RATING</dt>
            <dd>PG</dd>

            <dt>THEATRICAL RELEASE</dt>
            <dd>Mar 23, 2007</dd>

            <dt>MOVIE SYNOPSIS</dt>
            <dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>

            <dt>MPAA RATING</dt>
            <dd>PG, for animated action violence, some scary cartoon images and mild language</dd>

            <dt>RELEASE COMPANY</dt>
            <dd>Warner Bros.</dd>

            <dt>GENRE</dt>
            <dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>

            <dt>OFFICIAL MOVIE SITE</dt>
            <dd><a href="http://www.tmnt.com/">The Official TMNT Site</a></dd>
        </dl>

        <div>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rottenbig.png" alt="Rotten" />
            32% (88 reviews total)
        </div>
                
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
            <q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Peter Debruge <br />
            Variety
        </p>

        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/fresh.gif" alt="Fresh" />
            <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Todd Gilchrist <br />
            IGN Movies
        </p>

        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
            <q>It stinks!</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Jay Sherman (unemployed)
        </p>

        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
            <q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Joshua Tyler <br />
            CinemaBlend.com
        </p>

        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
            <q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Jeannette Catsoulis <br />
            New York Times
        </p>

        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
            <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Ed Gonzalez <br />
            Slant Magazine
        </p>

        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/fresh.gif" alt="Fresh" />
            <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Mark Palermo <br />
            Coast (Halifax, Nova Scotia)
        </p>

        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
            <q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
        </p>
        <p>
            <img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
            Steve Rhodes <br />
            Internet Reviews
        </p>

        <p>(1-8) of 88</p>
        
        <a href="http://validator.w3.org/check/referer"><img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/w3c-xhtml.png" alt="Valid XHTML 1.1" /></a> <br />
        <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/w3c-css.png" alt="Valid CSS!" /></a>
        
    </body>
</html>

tmnt.html

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="movie.css" rel="stylesheet">
        <title>TMNT - Rancid Tomatoes</title>
        <link rel="shortcut icon" href="favicon.ico" >
        <link rel="icon" href="images/rotten.gif" type="image/gif" >
    </head>

    <body>
        <div class = "toppic">
            <img src="images/banner.png" alt="Rancid Tomatoes" />
        </div>
        <h1 class = "bigheading">TMNT (2007)</h1>
        <div class = "main">
            <div class = "generaloverviewDiv">
                <img src="images/generaloverview.png" alt="general overview" />

                <dl>
                    <dt>STARRING</dt>
                    <dd>Mako <br /> Sarah Michelle Gellar</dd>

                    <dt>DIRECTOR</dt>
                    <dd>Kevin Munroe</dd>

                    <dt>RATING</dt>
                    <dd>PG</dd>

                    <dt>THEATRICAL RELEASE</dt>
                    <dd>Mar 23, 2007</dd>

                    <dt>MOVIE SYNOPSIS</dt>
                    <dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>

                    <dt>MPAA RATING</dt>
                    <dd>PG, for animated action violence, some scary cartoon images and mild language</dd>

                    <dt>RELEASE COMPANY</dt>
                    <dd>Warner Bros.</dd>

                    <dt>GENRE</dt>
                    <dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>

                    <dt>OFFICIAL MOVIE SITE</dt>
                    <dd><a href="http://www.tmnt.com/">The Official TMNT Site</a></dd>
                </dl>
            </div>
            <div class = "rottenbigDiv">
                <img src="images/rottenbig.png" alt="Rotten" />
                <span id = "redDiv">32%</span><span id = "zitiDiv">(88 reviews total)</span>
            </div>
            <div class = "contentleft">
                <div class = "contentDiv">
                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
                            <q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Peter Debruge <br />
                            <span class = "xieti">Variety</span>
                        </p>
                    </div>

                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/fresh.gif" alt="Fresh" />
                            <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Todd Gilchrist <br />
                            <span class = "xieti">IGN Movies</span>
                        </p>
                    </div>

                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
                            <q>It stinks!</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Jay Sherman (unemployed)
                        </p>
                    </div>

                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
                            <q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Joshua Tyler <br />
                            <span class = "xieti">CinemaBlend.com</span>
                        </p>
                    </div>
                </div>

                <div class = "contentDiv">
                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
                            <q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Jeannette Catsoulis <br />
                            <span class = "xieti">New York Times</span>
                        </p>
                    </div>

                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
                            <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Ed Gonzalez <br />
                            <span class = "xieti">Slant Magazine</span>
                        </p>
                    </div>

                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/fresh.gif" alt="Fresh" />
                            <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Mark Palermo <br />
                            <span class = "xieti">Coast (Halifax, Nova Scotia)</span>
                        </p>
                    </div>

                    <div class = "leftcontent">
                        <p class = "quote">
                            <img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
                            <q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
                        </p>
                        <p class = "imagep">
                            <img class = "kuangImage" src="images/critic.gif" alt="Critic" />
                            Steve Rhodes <br />
                            <span class = "xieti">Internet Reviews</span>
                        </p>
                    </div>
                </div>
            </div>

            <p id = "bar">(1-8) of 88</p>
        </div>
        <div class = "bottom">
        <a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml.png" alt="Valid XHTML 1.1" /></a> <br />
        <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
    </div>
    </body>
</html>

 

推荐使用chrome扩展程序Page Ruler

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Vuejs开发环境搭建及热更新

下一篇：CSS3如何制作一个精致的照片墙特效

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签