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

实现样式要求：

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:;

    margin:;

}

* {

    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:;

    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:;

    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:;

}

.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="data:images/banner.png" alt="Rancid Tomatoes" />

        </div>

        <h1 class = "bigheading">TMNT (2007)</h1>

        <div class = "main">

            <div class = "generaloverviewDiv">

                <img src="data: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="data: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="data: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="data: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="data: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="data: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="data:images/rotten.gif" alt="Rotten" />

                            <q>It stinks!</q>

                        </p>

                        <p class = "imagep">

                            <img class = "kuangImage" src="data:images/critic.gif" alt="Critic" />

                            Jay Sherman (unemployed)

                        </p>

                    </div>

                    <div class = "leftcontent">

                        <p class = "quote">

                            <img class = "kuangImage" src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/w3c-xhtml.png" alt="Valid XHTML 1.1" /></a> <br />

        <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="data:images/w3c-css.png" alt="Valid CSS!" /></a>

    </div>

    </body>

</html>

推荐使用chrome扩展程序Page Ruler

【web】movie review——静态页面训练、css训练的更多相关文章

用手机自带uc浏览器查看静态页面，css样式不显示
问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...
Web.Config 对静态文件 js css img 的客户端缓存策略
<?xml version="1.0" encoding="utf-8"?> <configuration> <system.we ...
mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法把样式引用文件的相对路径改成绝对路径就可以了比如原先的引用路径为:<link href="~/Content/css/style.css" ...
html+css实现小米商城首页静态页面
学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...
mac os x 之通过远程主机在nginx上部署web静态页面
1.mac使用ssh命令登陆远程主机因为苹果mac os x自带ssh命令,所以我们只需打开终端输入 $ ssh user@remote 在这之前最好在服务器上上传自己的ssh key,避免每次登陆 ...
python之web框架(1)：完成静态页面web服务器
python的web框架(1) 1.首先写一个最简单的web服务器,只能给客户回应一个固定的hello world的页面. from socket import * from multiprocess ...
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
Apache 后台服务器(主要处理php及一些功能请求如：中文url) 　　Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求) 　　Lighttpd 图片服务器　　总体来说，随着nginx功能得完善将使他成为今后web server得主流。
Apache 后台服务器(主要处理php及一些功能请求如:中文url) Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求) Lighttpd 图片服务器总体来说,随着ngi ...
WEB页面采集器编写经验之一：静态页面采集器
严格意义来说,采集器和爬虫不是一回事:采集器是对特定结构的数据来源进行解析.结构化,将所需的数据从中提取出来:而爬虫的主要目标更多的是页面里的链接和页面的TITLE. 采集器也写过不少了,随便写一点经 ...

随机推荐

业务逻辑:完成基于CRM地址完全匹配的自动分单业务逻辑
思路: 后台系统的业务接口服务处理接收到的数据并使用Webservice技术来远程调用CRM系统的业务接口服务来进行定区的查询操作,随后从该定区中匹配一个快递员来分配工单并发送短信通知取件操作步骤: ...
Struts2学习第三课 Struts2详解
接着上次的课程这次我们看struts.xml 修改如下:这里是加上命名空间,默认的是不加,我们手动加上时就要在访问时加上命名空间. <?xml version="1.0" ...
hdu1064
#include <iostream>#include<iomanip>using namespace std; int main(){ float total_sum=0.0 ...
BOX (UVA-1587) 比较代码书写上的差距
对比一下代码的书写差距: 我的代码: #include<iostream> using namespace std; ]; ]; ]; //访问标记 bool judge(int i, i ...
多值cookie
如何使用visual studio 2017创建C语言项目
使用visual studio 2017创建一个C语言项目,步骤如下: (1)打开Visual Studio 2017环境后出现欢迎界面,如图1所示. 图1 Visual Studio 2017欢迎 ...
Head First Python 1-4章学习感悟
一.学习知识总结 (1)迭代 range(起始值,结束值,步长):包含起始值,不包含结束值,步长为正数 (2)导入模块 from datetime import datetime (3 ...
前端页面唯一字符串生成（Js）UUID
function uuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i < 3 ...
smix到底是个啥？Perl的正则表达式匹配模式
最近在研究一个perl项目,临时学习了一下perl语法,强行看项目源码.因为总是见到各种正则表达式后面接smxi之类,虽然知道是匹配模式,但脑子里毫无概念.所以特地去学习了一下. 以上为背景. Per ...
51nod1347(简单逻辑)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1347 题意:中文题诶- 思路:稍推理一下就可以发现字符串a是 ...

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

【web】movie review——静态页面训练、css训练的更多相关文章

随机推荐

热门专题