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

随机推荐

nodejs 操作文件系统读取写入文件
我们通过fs这个模块来对文件系统进行操作,对于文件系统操作一般都有同步.异步方法,两者区别,同步等有返回结果时候,在继续执行后面的代码,异步是不等返回结果,直接执行后面的代码,待有返回结果时候,通过回 ...
C++经典问题：狐狸找兔子
问题描述: 围绕着山顶有10个洞,一只狐狸和一只兔子住在各自的洞里.狐狸想吃掉兔子.一天,兔子对狐狸说:"你想吃我有一个条件,先把洞从1-10编上号,你从10号洞出发,先到1号洞找我:第二次 ...
面试题: mysql数据库已看1 简单的sql练习
数据库总结--MySQL常见面试题 2015年03月24日 17:56:06 阅读数:7787 1.根据部门号从高到低,工资从低到高列出员工的信息 select * from employee ord ...
shell工具使用配置备忘
一.bash之vi mode.两种方式:set -o vi(只让bash自己进入vi模式)或 set editing-mode vi(让所有使用readline库函数的程序在读取命令行时都进入vi模式 ...
12、scala隐式转换与隐式参数
一.隐式转换 1.介绍 Scala提供的隐式转换和隐式参数功能,是非常有特色的功能.是Java等编程语言所没有的功能.它可以允许你手动指定,将某种类型的对象转换成其他类型的对象. 通过这些功能,可以实 ...
Python开发【第六篇】：文件处理
1. 文件文件处理流程: 打开文件,获得文件句柄,并赋值通过句柄对文件进行操作关闭文件 1.1 打开文件在 Python 中使用 open()函数打开文件,并返回文件对象: open( ...
更改数据,ExecuteNonQuery()
using (mycon) { mycon.Open(); string MyTime; DateTime dtDate; MyTime = textBox1.Text.ToString(); str ...
SAS笔记(2) RETAIN语句
本文重点: 使用RETIAN,INPUT在每次循环执行时保留上一次PDV中的变量值. SUM语句和SET语句会自动RETAIN变量. 1. RETAIN语句 1.1 Example 1 先来看看在DA ...
remap——ROS中修改订阅的节点名称
跑数据集或者使用不同传感器时,难免会遇到需要修改topic名称的时候,此时可以有两种做法. 一.直接修改源码.如果有launch文件,则修改launch文件对应的topic 二.直接进行remap操作 ...
springBoot2.0 配置shiro实现权限管理
一.前言基于上一篇springBoot2.0 配置 mybatis+mybatisPlus+redis 这一篇加入shiro实现权限管理二.shiro介绍 2.1 功能特点 Shiro 包含 10 ...

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

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

随机推荐

热门专题