【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. 采集器也写过不少了,随便写一点经 ...
随机推荐
- 由hibernate配置inverse="true"而导致的软件错误，并分析解决此问题的过程
题目背景软件是用来做安装部署的工具,在部署一套系统时会有很多安装包,通过此工具,可以生成一个xml文件用以保存每个安装包的文件位置.顺序.参数.所需脚本.依赖条件验证(OS..net.IIS.数据版本 ...
- Jmeter连接MySQL配置（能执行多条sql语句）
Database URL为MySQL的连接串,如果要执行多条SQL语句,后面还要添加“?allowMultiQueries=true”
- 怀旧系列(3)----Pascal
Pascal语言是高中时代2000年左右为了参加计算机竞赛学习的一门语言(Turbo Pascal7.0).据说这么语言的结构化非常好,非常适合青少年形成一定的编程思想.但是现在的角度想想都是扯淡,现 ...
- Java堆内存划分
根据对象的存活率(年龄)Java堆内存划分为3种,新生代,老年代,永久代: 1.新生代 比如我们在方法中区new一个对象,那这方法调用完毕后,对象就会被回收,这就是一个典型的新生代对象. 现在的商业虚 ...
- ExecuteNonQuery(),ExecuteScalar(),ExecuteReader的用法-转
using System.Data.SqlClient;...SqlConnection conn = new SqlConnection(@"server=ws7\leosql;datab ...
- Other - 个人对知识讨论、分享等平台上抄袭乱象的看法
在某论坛上看到这样一句话,深表赞同.
- 第三章 Goroutine调度策略（16）
本文是<Go语言调度器源代码情景分析>系列的第16篇,也是第三章<Goroutine调度策略>的第1小节. 在调度器概述一节我们提到过,所谓的goroutine调度,是指程序代 ...
- 【leetcode 968. 1028. 从先序遍历还原二叉树】解题报告[待完善...]
思路:用一个栈来管理树的层次关系,索引代表节点的深度 方法一: TreeNode* recoverFromPreorder(string S) { /* 由题意知,最上层节点深度为0(数字前面0条横线 ...
- php文件上传（视频图片或者其他）
html页面 <html> <head> <meta charset="utf-8"> <title></title> ...
- C#网络编程学习(5)---Tcp连接中出现的粘包、拆包问题
本文参考于CSDN博客wxy941011 1.疑问 我们使用第四个博客中的项目. 修改客户端为:连接成功后循环向服务器发送从1-100的数字.看看服务器会不会正常的接收100次数据. 可是我们发现服务 ...