Resource sharing for HTML5 and CSS3 flat style blog tutorials

This course explains in detail through examples of CSS3 flat style blogs, making it easier for everyone to understand the components of regular web pages, flexibly use different parts of WEB components, understand its composition ideas, and the flexible layout and design of web pages. We can also grasp the overall layout from macro to micro.

Course playback address: http://www.php.cn/course/307.html

The teacher’s teaching style:

The teacher’s lectures are simple, clear, layer-by-layer analysis, interlocking, rigorous argumentation, rigorous structure, and use the logical power of thinking to attract students’ attention Strength, use reason to control the classroom teaching process. By listening to the teacher's lectures, students not only learn knowledge, but also receive thinking training, and are also influenced and influenced by the teacher's rigorous academic attitude

The more difficult point in this video is the flat style of HTML5 and CSS3 Blog:

##Module analysis:

Flat style layout: header and body
Page component analysis:
1, Header (header):
①h1>a, put the homepage link. It is generally recommended that a page has only one h1, and others can use h2, h3, etc. Jiangzi is conducive to page optimization
②nav>ul>li>a>span , nesting menus layer by layer, mainly using a structured method, because it is not certain how many buttons or links are needed in the navigation bar,
2, banner part: inner part + scroll down button
①div>h2+ul,
h2>p
ul>li>a
②a
3, text section1
①section>div>header+ul
header>h2>p
header writes the title and subtitle
ul>li>aSame-level title
inner is used to constrain the width of the entire page
3, text section2
section>section>div1+div2
div1>img
div2>h2 +p
If you don’t have a strong list attribute, you can use div to write it.
4, section3 and 4 are omitted
5, footer footer part
footer>ul+ul, div or span is suitable here.

1. Reset style and file structure:

The purpose of resetting style:
Make the style consistent under different browsers,
Website: cssreset.com style reset official website,
Commonly used URL: necolas.github.io/normalize.css The browser is normalized and can be imported directly

2. Analysis of the page frame:

header+content+footer
Header>Navigationnav>Theme banner

3. Structural analysis and layout of the page header

※Inputting lorem+tab in the sublime editor can generate meaningless text filling.

The above is the detailed content of Resource sharing for HTML5 and CSS3 flat style blog tutorials. For more information, please follow other related articles on the PHP Chinese website!