Home > Article > Web Front-end > Sharing several page examples of HTML5 design and modification_html5 tutorial skills

Sharing several page examples of HTML5 design and modification_html5 tutorial skills

WBOYOriginal: 2016-05-16 15:46:271811browse

To understand and become familiar with the new semantic elements in HTML5, the best way is to take a classic HTML document as an example, and then enrich it with some fresh nutrients of HTML5. The following is the page we want to transform. The page is very simple and contains only one article.

ApocalypsePage_Original.html, this is a page with a very standardized format, and all styles come from external style sheets.

XML/HTML CodeCopy content to clipboard

>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Apocalypse Nowtitle>
<link rel="stylesheet" href="ApocalypsePage_Original.css">
head>
<body>
<div class="Header">
<h1>How the World Could Endh1>
<p class="Teaser">Scenarios that spell the end of life as we knowp>
<p class="Byline">by Ray N. Carnationp>
div>
<div class="Content">
<p><span class="LeadIn">Right nowspan>, 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>
<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 Doomsdayh2>
<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 Takeoverh2>
<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>
<h2>Unexplained Singularityh2>
<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>
<h2>Runaway Climate Changeh2>
<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 Epidemich2>
<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>
<div class="Footer">
<p class="Disclaimer">These apocalyptic predictions do not reflect the views of the author.p>
<p>
<a href="AboutUs.html">About Usa>
<a href="Disclaimer.html">Disclaimera>
<a href="ContactUs.html">Contact Usa>
p>
<p>Copyright © 2014p>
div>
body>
html>

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个

将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

这个例子中的样式表很简单，整个页面最大宽度设置为 800 像素，避免文本在宽屏显示器上显示过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。

ApocalypsePage_Original.css样式文件内容如下：

XML/HTML Code复制内容到剪贴板

@charset "utf-8";
/* CSS Document */
body{
/*font-family To use safe fonts, follow the principle of special first and then general,
First give the font you want, then a safer font,
Finally ends with sans-serif font*/
font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif;
max-width: 800px; /*The maximum width does not exceed 800 pixels*/
}
/*Title area style at the top of the page*/
.Header {
background-color: #7695FE; /*Any color value is acceptable*/
border: thin #336699 solid; /*all-in-one border attribute*/
padding: 10px; /* 10 pixel padding, the distance between the border and the content*/
margin: 10px; /* 10 pixel margin, the distance between the border and surrounding elements*/
text-align: center; /*Header text is centered*/
}
/*Title in header<h1>Style*/
.Header h1{
margin: 0px;
color: white;
font-size: xx-large; /*Precise control can be done in pixels or em units*/
}
/*Header subtitle style*/
.Header .Teaser{
margin: 0px;
font-weight: bold;
}
/*Signature line style in header*/
.Header .Byline{
font-style: italic;
font-size: small;
margin: 0px;
}
.Content{
font-size: medium;
font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;
/*Maximum left and right padding*/
padding-top: 20px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
line-height: 120%; /*The distance between two adjacent text lines*/
}
.Content .LeadIn{
font-weight: bold;
font-size: large;
font-variant: small-caps;
}
.Content .h2{
color: #24486C;
margin-bottom: 2px;
font-size: medium;
}
.Content p{
margin-top: 0px;
}
.Footer{
text-align: center;
font-size: x-small;
}
.Footer .Disclaimer{
font-style: italic;
}
.Footer p{
margin: 3px;
}

In this way, our style sheet has been bent. Now let’s see what the result will be? As shown below:

Use HTML5 to construct the page

Still a must-have element in web design, it is an intuitive, versatile container that allows you to apply styles to any block on the page. But the problem with

is that it itself doesn't reflect any information about the page.

To improve this situation with HTML5, replace

with an element with more descriptive semantics.

In ApocalypsePage_Revised.html, the class attributes of Header and Footer and

have been replaced by

and

Previous article：Tutorial on using Localstorage in HTML5_html5 tutorial skillsNext article：Tutorial on using Localstorage in HTML5_html5 tutorial skills

See more

Sharing several page examples of HTML5 design and modification_html5 tutorial skills

Related articles