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

随机推荐

win7 eclipse连接hadoop2.x开发环境搭建
环境: hadoop-2.3.0-cdh5.1.0 centos 6.5 x64 win7 eclipse4.3 0. 前提条件 ,jdk,maven要安装好. 1.下载hadoop,用winRAR解 ...
isPCR安装
isPCR是用一对PCR引物搜索序列数据库.它使用索引策略来快速完成此操作.当搜索成功时,输出是fasta格式序列文件,其包含数据库中位于引物对之间的所有区域. Linux系统下安装 1. 使用二进制 ...
hdu1088
#include <stdio.h> #include <string.h> int main() { char s[10000]; int len; int cnt = 0; ...
request.form()和request()的区别
Request.Form:获取以POST方式提交的数据(接收Form提交来的数据):Request.QueryString:获取地址栏参数(以GET方式提交的数据)Request:包含以上两种方式(优 ...
C#中的运算符和表达式
说起C#运算符和表达式,小伙伴们肯定以为很简单,其实要用好表达式,不是一件容易的事.一个好的表达式可以让你做事半功倍的效果,比如三元表达式,可以让你少写N多个if和case语句. 表达式由操作数( ...
[WIP]php入門
创建: 2019/06/19 安装 MAMP 变量与运算符 php标签 <?php ... ?> <?php ... ?> ● 在文件最后的 ?> 通常省略, ...
HTML 表单 / HTML5 表单元素datalist
<form> 属性的列表: 属性描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...
ERROR 1010 (HY000): Error dropping database (can't rmdir './nsd', errno: 39)
在删除数据库的时候报标题所示错误 mysql> drop database test; ERROR 1010 (HY000): Error dropping database (can't rm ...
记一次工作中的小BUG
今天在调试代码的时候总是遇到一个bug,百思不得其解!先上bug图我用的webapi 集成的swagger,错误提示是路由名称冲突,可我仔细检查了下并没有冲突的路由地址啊!于是上网查找资料,有位网友 ...
thinkphp5引入百度编辑器
在ThinkPHP的模板(html文件)中引入Ueditor 下载ueditor解压至public/static目录在需要的页面引入js文件 <script type="text/ ...

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

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

随机推荐

热门专题