【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. 采集器也写过不少了,随便写一点经 ...
随机推荐
- 基本算法思想之穷举法（C++语言描述）
穷举算法(Exhaustive Attack method)是最简单的一种算法,其依赖于计算机的强大计算能力来穷尽每一种可能性,从而达到求解问题的目的.穷举算法效率不高,但是适应于一些没有规律可循的场 ...
- Linux操作系统的内存使用方法详细解析
我是一名程序员,那么我在这里以一个程序员的角度来讲解Linux内存的使用. 一提到内存管理,我们头脑中闪出的两个概念,就是虚拟内存,与物理内存.这两个概念主要来自于linux内核的支持. Linux在 ...
- struts2知识点汇总
标签遍历Map<key,List<Object>> listMap=new HashMap<String,List<Student>>(); List& ...
- jQuery :odd 选择
<!DOCTYPE html><html><head><meta charset="utf-8"><script src=&q ...
- [CentOS7] 常用工具 之 防暴力破解工具 Fail2ban
防止暴力破解密码: Fail2ban ==> 用于自动ban掉ip 先用yum search fail2ban看看是否yum源含有fail2ban这个package,若没有的话请yum inst ...
- iOS 面试全方位剖析 -- Block篇
1.Block的本意 block本质上也是一个OC对象,它内部也有个isa指针, block是封装了函数调用以及函数调用环境的OC对象, block是封装函数及其上下文的OC对象 2.block截获变 ...
- java 多线程学习笔记（一） -- 计算密集型任务
最近在看<Java虚拟机并发编程>,在此记录一些重要的东东. 线程数的确定:1. 获取系统可用的处理器核心数:int numOfCores = Runtime.getRuntime().a ...
- Spring MVC 基于Method的映射规则（注解版）
在Restful风格的web开发中,根据不同的请求方法使用相应的控制器处理逻辑成为核心需求,下面就看看如何在Spring MVC中识别不同的请求方法. 请求方法 在Http中,请求的方法有很多种,最常 ...
- Git练习3 远程库分支 idea中状态条显示当前分支
- LDAP--对某些AD属性值是字节数组byte[]情况的类型转换方法
//BitConverter.ToBoolean((searchResult.Properties["mDBUseDefaults"][0] as byte[]), 0); row ...