在将样式表练习后做了一个最简单基础的网页，以最简单的元素构造，但是里面有很多小细节还是很值得去深入理解的~~
上代码了~~
HowTheWorld.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apocalypse Now</title>
<link rel="stylesheet" href="css/Howstyle.css">
<!--[if It IE 9]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<article>
<header>
<hgroup>
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</hgroup>
</header>
<div class="Content">
<p><span class="LeadIn">Right now</span>, you‘re probably feeling pretty good. After all, life in
the developed world is comfortable<span class="style1">—</span>probably more comfortable than it‘s
been for the average human being throughout all of recorded history.</p>
<div class="FloatFigure" >
<img src="img/2020.jpg" >
<p>This is the picture of my university Will you be the <br>last person standing if one of these ....</p>
</div>
<!-- 将上面的以DIV写的改为专门用一个figure写的 -->
<!-- <figure class="FlaotFigure">
<img src="img/2020.jpg" >
<figcaption>Will you be the last person standing if one of these ....</figcaption>
</figure> -->
<!-- 但是这个方式写出来的效果不能够应用，自己现在还不知道如何处理。。。。。先搁置。。。 -->
<p>But don‘t get too smug. There‘s still plenty of horrific ways it
could all fall apart. In this article, you‘ll learn about a few of our
favorites.</p>
<h2>Mayan Doomsday</h2>
<p>Skeptics suggest that the Mayan calendar simply rolls to a new
5,126-year era after 2012, and doesn‘t actually predict a life-ending
apocalypse. But given that the long-dead Mayans were wrong about
virtually everything else, why should we trust them on this?
</p>
<h2>Robot Takeover</h2>
<p>Not quite as frightening as a Vampire Takeover or Living-Dead
Takeover, a robot rebellion is still a disquieting thought. We are
already outnumbered by our technological gadgets, and even Bill Gates
fears the day his Japanese robot slave turns him over by the ankles
and asks (in a suitably robotic voice) "Who‘s your daddy now?"
</p>
<aside class="PullQuote">
<img src="img/q_start.png">
I am 面朝大海#哈哈...
We don‘t know how the universe started, so we can‘t be sure it won‘t
just end, maybe today.
<img src="img/q_end.png">
</aside>
<h2>Unexplained Singularity</h2>
<!-- <p>We don‘t know how the universe started, so we can‘t be sure it won‘t
just end, maybe today, and maybe with nothing more exciting than a
puff of anti-matter and a slight fizzing noise.</p> -->
<p>and maybe with nothing more exciting than a
puff of anti-matter and a slight fizzing noise.</p>
<h2>Runaway Climate Change</h2>
<p>Dismissed by some, Al Gore‘s prophecy of doom may still come true. If
it does, we may have to contend with vicious storms, widespread food
shortages, and surly air conditioning repairmen.</p>
<h2>Global Epidemic</h2>
<p>Some time in the future, a lethal virus could strike. Predictions
differ about the source of the disease, but candidates include
monkeys in the African jungle, bioterrorists, birds and pigs with the
flu, warriors from the future, an alien race, hospitals that use too
many antibiotics, vampires, the CIA, and unwashed brussel sprouts.
Whatever the source, it‘s clearly bad news.
</p>
</div>
</article>
<div class="Footer">
<p class="Disclaimer">These apocalyptic predictions do not reflect the views of the
author.</p>
<p>
<a href="AboutUs.html">About Us</a>
<a href="Disclaimer.html">Disclaimer</a>
<a href="ContactUs.html">Contact Us</a>
</p>
<p>Copyright © 2014</p>
</div>
</body>
</html>
样式表：
Howstyle.css
@charset "utf-8";
article, aside, figure, figure, figcaption, footer, header, hgroup, nav, section, summary {
display: block;
}
html, body {
padding: 0;
margin: 0l
}
header {
background: #7695FE;
text-align: center;
border: thin #336699 solid;
padding: 10px;
margin: 10px;
}
header h1 {
margin: 0px;
color: white;
font-size: xx-large;
font-family: Garamond, serif;
}
header p {
color: black;
font-weight: 10px;
}
header .Teaser {
margin: 0px;
font-weight: bold;
}
header .Byline {
margin: 0px;
font-style: italic;
font-size: small;
}
.Content {
font-size: medium;
font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;
padding-top: 20px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
line-height: 120%;
}
.Content .LeadIn {
font-variant: small-caps;
font-size: large;
font-weight: bold;
}
.Content h2 {
color:#7695FE;
margin-bottom: 2px;
font-size: medium;
}
.Content p {
margin-top: 0px;
}
.Footer {
text-align: center;
font-size: x-small;
}
.Footer p {
margin: 3px;
}
.Footer .Disclaimer {
font-style: italic;
}
.FloatFigure {
float: left;
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
.FloatFigure figcaption {
max-width: 200px;
font-size: small;
font-style: italic;
margin-bottom: 5px;
color: #F08B24;
}
.FloatFigure p {
font-size: 20px;
font-weight: bold;
font-style: italic;
color: #36A2F0;
}
.PullQuote {
float: right;
max-width: 300px;
border-top: thin green solid;
border-bottom: thick green solid;
font-size: 25px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 15px;
margin-top: 10px;
background: #FCFEFB;
color: #F8AF24;
}
.PullQuote img {
vertical-align: bottom;
}
运行效果图：
原文：http://www.cnblogs.com/haixiaomei/p/5020613.html