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

最新推荐文章于 2025-05-06 10:08:20 发布

前端独秀

最新推荐文章于 2025-05-06 10:08:20 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： web

原文链接：https://www.mk2048.com/blog/blog.php?id=hhaki0aib&title=%E3%80%90web%E3%80%91movie+review%E2%80%94%E2%80%94%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2%E8%AE%AD%E7%BB%83%E3%80%81css%E8%AE%AD%E7%BB%83

前端专栏收录该内容

493 篇文章

订阅专栏

实现样式要求：

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