Shulou(Shulou.com)06/03 Report--

This article shows you what are the page examples of HTML5 design and modification, which are concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The best way to understand and familiarize yourself with the new semantic elements in HTML5 is to take a classic HTML document as an example and then fill in some of the fresh nutrients of HTML5. The following is the page we want to modify, which is very simple and contains only one article.

ApocalypsePage_Original.html, which is a very well-formatted page, with all the styles coming from external style sheets.

Apocalypse Now

How the World Could End

Scenarios that spell the end of life as we know

By Ray N. Carnation

Right now, you're probably feeling pretty good. After all, life in the developed world is comfortable-probably more comfortable than it's been for the average human being throughout all of recorded history.

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.

Mayan Doomsday

Skeptics suggest that the Mayan calendar simply rolls to a new 5126-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?

Robot Takeover

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?"

Unexplained Singularity

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.

Runaway Climate Change

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.

Global Epidemic

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.

These apocalyptic predictions do not reflect the views of the author.

About Us

Disclaimer

Contact Us

Copyright ©2014

Before adding any CSS stylesheets, the effect is as follows:

The above divides the page into three parts, the top header, the middle content and the bottom footer.

The stylesheet in this example is simple and the maximum width of the entire page is set to 800 pixels to prevent the text from being too long on the widescreen display. The header is in a box with a blue border, the inside margins are added on both sides of the content area, and the footer is centered at the bottom of the entire page.

The ApocalypsePage_Original.css style file is as follows:

@ charset "utf-8"

/ * CSS Document * /

Body {

/ * font-family should use safe fonts according to the principle of "special before general"

First give the font you want, and then a safer font.

It ends with sans-serif font * /

Font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif

Max-width: 800px; / * maximum width does not exceed 800px * /

}

/ * 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 inner margin, the distance between the border and the content * /

Margin: 10px; / * 10 pixel margin, the distance between the border and the surrounding elements * /

Text-align: center; / * header text centered * /

}

/ * title style in header * /

.Header h2 {

Margin: 0px

Color: white

Font-size: xx-large; / * precise control can be in pixels or em units * /

}

/ * header subtitle style * /

.Header .Teaser {

Margin: 0px

Font-weight: bold

}

/ * signed line style in the 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 inner margin * /

Padding-top: 20px

Padding-right: 50px

Padding-bottom: 5px

Padding-left: 50px

Line-height: 120%; / * distance between two adjacent lines of text * /

}

.Content .LeadIn {

Font-weight: bold

Font-size: large

Font-variant: small-caps

}

.Content .h3 {

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

}

So our stylesheet is bent, so now let's see what happens. As shown below:

Use HTML5 to construct pages

Still a must-have element of Web design, it is an intuitive, multi-purpose container that allows you to style any block on a page. The problem, however, is that it does not reflect any information related to the page.

To improve this situation with HTML5, you can replace the with a more descriptive semantic element.

In ApocalypsePage_Revised.html, the class attribute has been replaced with Header and Footer, and some of the code is as follows:

How the World Could End

Scenarios that spell the end of life as we know

By Ray N. Carnation

...

These apocalyptic predictions do not reflect the views of the author.

About Us

...

Copyright ©2014

Of course, the corresponding ApocalypsePage_Revised.css file needs to be modified to replace .header and .Footer with header and footer. Some of the codes are as follows:

/ * 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 inner margin, the distance between the border and the content * /

Margin: 10px; / * 10 pixel margin, the distance between the border and the surrounding elements * /

Text-align: center; / * header text centered * /

}

/ * title style in header * /

Header h2 {

Margin: 0px

Color: white

Font-size: xx-large; / * precise control can be in pixels or em units * /

}

Finally, there is one more element that needs to be used in the sample file, which represents a complete, self-contained content.

The element should contain the content of the news report or article, including the title, signature, and text. So the structure after adding the element is as follows:

How the World Could End

Scenarios that spell the end of life as we know

By Ray N. Carnation

Right now, you're probably feeling pretty good. After all, life in the developed world is comfortable-probably more comfortable than it's been for the average human being throughout all of recorded history.

...

After the redesign, the page structure is as follows:

Use to add illustrations

Many pages contain pictures. However, the concept of figure is not exactly the same as that of pictures. Although the illustration is independent of the text, it is mentioned in the text.

Generally speaking, the illustrations should be floating, and there will be floating pictures. The following is the HTML tag to add the illustration to the article, the position between the first and second paragraphs of the text, some of the code is as follows:

...

Right now, you're...

Will you be the last person standing if one of these apocalyptic

Scenarios plays out?

But don't get too smug. There's...

...

The corresponding stylesheet rules are as follows:

.FloatFigure {

Float: left

Margin: 0px 20px 0px 0px

}

.FloatFigure p {

Max-width: 300px

Font-size: small

Font-style: italic

Margin-bottom: 5px

}

The following figure shows the appearance of this example. The illustration is just after the first paragraph of text and floats on the left side of the following text. We limit the width of the text of the title, so that the display of the title is full and elegant.

An element is provided in HTML5, and the picture can be placed in the element in. After modification, the code is as follows:

Will you be the last person standing if one of these apocalyptic

Scenarios plays out?

Of course, the selector in the stylesheet can be modified accordingly.

.FloatFigure {

Float: left

Margin: 0px 20px 0px 0px

}

.FloatFigure figcaption {

Max-width: 300px

Font-size: small

Font-style: italic

Margin-bottom: 5px

}

And finally,

The alt attribute in the element can be deleted because the title contains a complete description of the picture.

Add notes with

The new element represents content that is not closely related to the text around it. It can be used to introduce another related topic, or to explain a point made in the main document. It can also be used to place advertisements and links to related content.

The following example will be used as an eye-catching citation (pull quote), using elements to create this effect, but using elements to make tags more meaningful:

Some of the codes are as follows:

... (in a suitably robotic voice) "Who's your daddy now?"

We don't know how the universe started, so we can't be sure it won't just end, maybe today.

Unexplained Singularity

The corresponding stylesheet is as follows:

.PullQuote {

Float: right

Max-width: 300px

Border-top: thin black solid

Border-bottom: thick black solid

Font-size: 30px

Line-height: 130%

Font-style: italic

Padding-top: 5px

Padding-bottom: 5px

Margin-left: 15px

Margin-bottom: 10px

}

.PullQuote img {

Vertical-align: bottom

}

What are the examples of pages designed and modified by HTML5? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.