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

随机推荐

GIT 图形化操作指南
Git操作指南(2) -- Git Gui for Windows的建库.克隆(clone).上传(push).下载(pull).合并关于linux上建库等操作请看文章: http://hi.bai ...
ubuntu下sourceinsight的安装
转载自blog.csdn.net/zzobin/article/details/7376616 1. 安装wine 详看:http://wiki.ubuntu.org.cn/Wine sudo apt ...
hdu1079
#include<cstdio> #include<iostream> #include<cstring> using namespace std; int mai ...
App知识点汇总
1.Fragment 2.AndroidStudio 用夜神安卓模拟器调试进入夜神模拟器安装目录下的bin目录,执行nox_adb.exe connect 127.0.0.1:62001,Andro ...
Ocelot（二）- 请求聚合与负载均衡
Ocelot(二)- 请求聚合与负载均衡作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10865511.html 源码地址: ...
Centos7 安装MySQL 5.7 (通用二进制包)
1.下载安装包下载地址 https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz ...
在 windows 下搭建 IDEA + Spark 连接 Hive 的环境
为了开发测试方便,想直接在 IDEA 里运行 Spark 程序,可以连接 Hive,需不是打好包后,放到集群上去运行.主要配置工作如下: 1. 把集群环境中的 hive-core.xml, hdfs- ...
清北刷题冲刺 10-30 p.m
少女 #include<iostream> #include<cstdio> #include<queue> #include<cstdlib> #de ...
洛谷P1275 魔板
P1275 魔板题目描述有这样一种魔板:它是一个长方形的面板,被划分成n行m列的n*m个方格.每个方格内有一个小灯泡,灯泡的状态有两种(亮或暗).我们可以通过若干操作使魔板从一个状态改变为另一个状 ...
InfoQ —— 百度搜索速度优化
本篇源自InfoQ —— <百度搜索速度优化> 好多名词不了解... 相关文档下载链接背景许霞,毕业于浙江大学.08年加入百度运维部. 本篇讲座主要讲述百度关于速度的优化,包括PC端和 ...

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

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

随机推荐

热门专题