【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. 采集器也写过不少了,随便写一点经 ...

随机推荐

mysql中有多少种日志
Mysql的日志包括如下几种日志: 错误日志普通查询日志二进制日志慢查询日志 Mysql版本此文档测试mysql的版本为 mysql -V 错误日志 error log Mysql错误日志主要 ...
ubuntu安装配置ApachePhpMysql
1.安装之前先sudo源 sudo apt update 2.安装Apache2 sudo apt install apache2 3.更改默认目录: vi /etc/apache2/apache2. ...
【spring boot logback】日志颜色渲染，使用logback-spring.xml自定义的配置文件后，日志没有颜色了
接着spring boot日志logback解析之后,发现使用logback-spring.xml自定义的配置文件后,日志没有颜色了怎么办? 官网处理日志链接:https://logback.qos ...
Some of your uncommitted changes would be overwritten by syncing.Please commit your changes then try
解决方法有三种,在GitHub shel中输入以下命令,任选一种方法就能解决问题 git reset --hard HEAD -- Destructive. When you do this you' ...
手机连接fiddler后，浏览器无法打开网页或者fiddler抓取不到手机应用相关数据的情况
关于手机如何连接fiddler,网上有很多教程,我暂时就不写了今天在使用fiddler的过程中,发现fiddler突然无法抓取移动端应用的数据包,再三确认连接无误.因此就开始了解决之旅起因是安卓手 ...
23. CTF综合靶机渗透(十六)
靶机说明: VM Name: JIS-CTF : VulnUpload Difficulty: Beginner Description: There are five flags on this m ...
Java中编写线程安全代码的原理(Java concurrent in practice的快速要点)
Java concurrent in practice是一本好书,不过太繁冗.本文主要简述第一部分的内容. 多线程优势与单线程相比,可以利用多核的能力; 可以方便的建模成一个线程处理一种任务; 与 ...
Go:坑之for range
go只提供了一种循环方式,即for循环,在使用时可以像c那样使用,也可以通过for range方式遍历容器类型如数组.切片和映射.但是在使用for range时,如果使用不当,就会出现一些问题,导致程 ...
Python Day22
Django之Form组件 Django的Form主要具有一下几大功能: 生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 1.创建Form类 ...
Topoi 测验1301, 问题C: 1959: 解题解题报告
Topoi(一个经常会炸的网站) 本题提交链接很久以前的题目了, 刚开了博客,来写一波题解先看一波提交记录: 调了好几天QAQ 唉! 要是这些高手里有我估计直接输出1 就AC了算法 DFS + ...

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

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

随机推荐

热门专题