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

Today, the editor will share with you the relevant knowledge points of HTML5 design and modified page example analysis, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

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

XML / HTML code copies content to text

< html lang = " zh-CN" >

< meta charset = " utf-8" >

< title >

Immediate revelation

< link rel = " stylesheet" href = " ApocalypsePage_Original.css" >

< div class = "标题" >

< h2 >

How does the world end?

< p class = " Teaser" >

What we know will end the life.

< p class = " Byline" >

Ray N. Carnation

< div class = "内容" >

< p >

< span class = " LeadIn" >

Now, you may feel good. After all, life in developed countries is very comfortable.

< span class = " style1" >

It may be much more comfortable than ordinary humans throughout recorded history.

< p >

But don't be complacent. There are still many terrible ways to make it fall apart. In this article, you will learn about some of our favorites.

< h3 >

The end of the Mayan world

< p >

The skeptic view is that the Mayan calendar simply rolls up after 2012 of a new 5126 era, without actually predicting the revelation of the end of life. But given that the dead Mayans were actually wrong in every other way, why should we trust them in this respect?

< h3 >

Robot takeover

< p >

Although not as frightening as a vampire takeover or a living dead takeover, robot rebellion is still a disturbing idea. Our technology is so numerous that even Bill Gates worried about the day when his Japanese robot slave was turned over by his ankle and asked (with the appropriate robot voice) "whose father are you now?"

< h3 >

An unexplained singularity

< p >

We don't know how the universe began, so we're not sure it won't just end, maybe today, maybe only a little antimatter and a slight hiss are exciting.

< h3 >

Runaway climate change

< p >

With some disdain, Gore's prediction of doom may still come true. If so, we may have to deal with severe storms, widespread food shortages and the condition of air conditioning maintenance personnel.

< h3 >

Global epidemic

< p >

For some time to come, a deadly virus may go on strike. There are different predictions of the source of the disease, but candidates include monkeys in the African jungle, bioterrorists, birds and pigs with influenza, future warriors, alien races, hospitals that use too many antibiotics, vampires, CIA and unwashed Brussels sprouts. Whatever the source, this is obviously bad news.

< div class = "页脚" >

< p class = " Disclaimer" >

These doomsday predictions do not reflect the author's point of view.

< p >

About us.

Statement

Contact us

< p >

Copyright ©2014

Before adding any CSS stylesheets, the effect is as follows: the page is divided into three parts, the top header, the middle content, and the bottom footer.

The stylesheet in this example is simple, with the maximum width of the entire page set to 800 to prevent the text from being too long on the widescreen display. The header is placed in a box with a blue border, multiple parts of the content area have increased inner margins, and the footer is centered at the bottom of the entire page.

The ApocalypsePage_Original.css style file is as follows:

XML / HTML code copies content to text

@ charset "utf-8"

/ * CSS document * /

Body {

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

First specify the font you want, then a safer font

It ends with sans-serif font * /

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

Maximum width: 800pxscape / * maximum width does not exceed 800 expected * /

}

/ * title area style at the top of the page * /

. Title {

Background color: # 7695FE; / * accept any color value * /

Border: thin # 336699 solid; / * all-in-one border attribute * /

Fill: 10px; / * 10 inner margin, the distance between the enclosing and the content * /

Margin: 10px; / * the outer margin of 10, the distance between the surrounding elements and the surrounding elements * /

Text alignment: centered; / * header text centered * /

}

/ * title in the header

< h2 >

Style * /

. Title H2 {

Margins: 0px

White color

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

}

/ * header subtitle style * /

.Header .Teaser {

Margins: 0px

Font-weight: bold

}

/ * signed line style in the header * /

. Title. Byline {

Font styles: italic

Font size: small

Margins: 0px

}

. Content {

Font size: medium

Font family: Cambria,Cochin, Georgia, "Times New Roman", Times, serif

/ * maximum left and right inner margin * /

Padding-top:20 pixel

Padding-right:50px

Padding-bottom:5px

Padding-left:50px

Line height: 120% bot / * the distance between two adjacent lines of text * /

}

.Content .LeadIn {

Font-weight: bold

Font size: large

Font-variant: lowercase

}

.Content .h3 {

Color: # 24486C

Bottom margin: 2px

Font size: medium

}

Content p {

Margin-top:0px

}

. Footer {

Text alignment: centering

Font size: x-small

}

. Footer. Disclaimer {

Font styles: italic

}

. Footer {

Margins: 3px

}

So our stylesheet is bent, so now let's see what happens. As shown below: use HTML5 to construct a page

Still an essential element of Web design, it is an intuitive, multi-purpose container that allows you to apply styles to any block chain on the 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 property has been set to Header and Footer instead of and, some of the code is as follows:

XML / HTML code copies content to text

< h2 >

How does the world end?

< p class = " Teaser" >

What we know will end the life.

< p class = " Byline" >

Ray N. Carnation

...

< p class = " Disclaimer" >

These doomsday predictions do not reflect the author's point of view.

< p >

About us.

...

< p >

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:

XML / HTML code copies content to text

/ * title area style at the top of the page * /

Header {

Background color: # 7695FE; / * accept any color value * /

Border: thin # 336699 solid; / * all-in-one border attribute * /

Fill: 10px; / * 10 inner margin, the distance between the enclosing and the content * /

Margin: 10px; / * the outer margin of 10, the distance between the surrounding elements and the surrounding elements * /

Text alignment: centered; / * header text centered * /

}

/ * title in the header

< h2 >

Style * /

Header H2 {

Margins: 0px

White color

Font size: xx- size; / * precise control can be in expected 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:

XML / HTML code copies content to text

< h2 >

How does the world end?

< p class = " Teaser" >

What we know will end the life.

< p class = " Byline" >

Ray N. Carnation

< div class = "内容" >

< p >

< span class = " LeadIn" >

Now, you may feel good. After all, life in developed countries is very comfortable.

< span class = " style1" >

It may be much more comfortable than ordinary humans throughout recorded history.

...

After the redesign, the page structure is as follows:

Use to add illustrations

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

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:

XML / HTML code copies content to text

...

< div class = "内容" >

< p >

< span class = " LeadIn" >

Now, you are.

< div class = " FloatFigure" >

< img src = " human_skull.jpg" alt = "人类头骨" >

< p >

Excuse me, are you standing, if the last one of these revelations

Play the plot?

< p >

But don't be complacent. There is.

...

The corresponding stylesheet rules are as follows:

XML / HTML code copies content to text

.FloatFigure {

Float to the left

Margins: 0px 20px 0px 0px

}

.floatFigure p {

Maximum width: 300 pixels

Font size: small

Font styles: italic

Bottom margin: 5px

}

The following figure shows the appearance of this example. The illustration is just after the first paragraph of text and floats in the position of the following text. We limit the width of the text of the title, so that the display of the title is very substantial 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:

XML / HTML code copies content to text

< img src = " human_skull.jpg" alt = "人类头骨" >

< figcaption >

If one of these revelations, will you be the last person standing?

Play the plot?

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

XML / HTML code copies content to text

.FloatFigure {

Float to the left

Margins: 0px 20px 0px 0px

}

.FloatFigure figcaption {

Maximum width: 300 pixels

Font size: small

Font styles: italic

Bottom margin: 5px

}

And finally,

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

Use to add comments

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. You can also place advertisements and links to related content.

The following example will take advantage of eye-catching citations (pull quote). Elements can be used to create this effect, but elements make tags easier to replace: part of the code is as follows:

XML / HTML code copies content to text

< p >

.. (in the appropriate robot voice) "who is your father?"

< img src = " quotes_start.png" alt = "报价" >

We don't know how the universe began, so we're not sure it won't just end, maybe today.

< img src = " quotes_end.png" alt = "结束报价" >

< h3 >

An unexplained singularity

The corresponding stylesheet is as follows:

XML / HTML code copies content to text

.PullQuote {

Floating: correct

Maximum width: 300 pixels

Top of border: black fine solid

Bottom edge: black rough object

Font-size:30px

Row height: 130%

Font styles: italic

Padding-top:5 pixel

Padding-bottom:5px

Left margin: 15px

Bottom margin: 10px

}

.PullQuote img {

Vertical alignment: bottom

}

The above is all the content of this article "HTML5 Design and modified Page example Analysis". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.