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

随机推荐

miRNA
MicroRNA (miRNA) 是一类内生的.长度约为20-24个核苷酸的小 RNA,其在细胞内具有多种重要的调节作用.每个 miRNA 可以有多个靶基因的表达,而几个 miRNA 也可以调节同一 ...
LeetCode第14题：最长公共前缀
题目描述编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow ...
cdce62005配置说明
相关芯片手册可查阅:http://www.ti.com.cn/product/cn/cdce62005 需要使用的软件下载地址:http://www.ti.com.cn/cn/lit/sw/scac1 ...
hdu1055
#include<iostream> #include<iomanip> #include<cstdio> #include<cstring> #inc ...
关于pacemaker监控mysql修复的方法
对工作中,涉及到数据库修复的一个简单汇总 1.在所有的控制节点上,执行pcs resource命令行,查看控制节点上pacemaker的状态是否异常,如果异常,通过crm_resource -P命令行 ...
SAS笔记(8) 利用数组重构SAS数据集
在实际应用中,我们经常会把宽数据(一个患者一条观测)转化为长数据(一个患者多条观测)或者将长数据(一个患者多条观测)转换为宽数据(一个患者一条观测),在R中我们可以利用Reshape2包来实现.在SA ...
Web——页面“传值、赋值”与页间“传值”
前言前期我们学习C/S开发的时候,采用三层架构,U层的参数在每个层之间传来传去,那么现在我们接触到的B/S,在Web前端是如何与后台进行传值赋值呢?由于本人是菜鸟一枚,下面写的不恰当的地方,望路过的 ...
三层登录——C#版
前言前期了解三层架构主要是由UI层.BLL层和DAL层三部分构成.看到大牛们都采用三层的思想实现了登录,本菜鸟暗暗地站在了他们的肩膀上. 自己理解对于三层自己的理解是:就像我们对一个大型的公司去找 ...
洛谷P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L…
P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L… 题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many simi ...
Repeater+AspNetPager+Ajax留言板
最近想要巩固下基础知识,于是写了一个比较简单易懂实用的留言板. 部分样式参考了CSDN(貌似最近一直很火),部分源码参照了Alexis. 主要结构: 1.前期准备 2.Repeater+AspNetP ...

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

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

随机推荐

热门专题