Understand the principles of web page layout and the navigation bar. (Tom)-DD dog

Understand the principles of web page layout and the navigation bar. (Tom)-DD dog

Welcome to my blog. I am a web hacker. I hope you can learn more through the blog. Thank you.

Today, I have a brief understanding of the webpage layout and navigation bar. I will share some of my notes with you.

Simple webpage layout structure and performance principles:
In the web page layout, html: structured, css: expressive, JavaScript: Behavioral. There is a separation between the three (an idea ).
So what is separation? It is not simply separate editing. As mentioned above, html is directed to the structure. When we create a structure,
Html should be structured and simplified, and css should be carried out on this basis to achieve true separation and combination. In initial production, we should not pursue too much
Style, first efforts in the structure and semantics of html.

Simplify the html structure to the maximum extent, and then set it with css to reduce the html and css fit.

When you see a webpage design drawing, you must first perform the html structure and semantics before performing css design.

---- Text-indent text indent. (Simplified code)

Navigation menu creation:
① Vertical menu
Construct with unordered list

• Navigation

Clear dots: list-style: none
Clear underline: text-decoration: none
** Definition keyIs to set the label as a block element to increase the effect of hover.
Ul li a {display: block ;}
A: hover {} adds the interactive menu effect.

Extended Review: block-level elements (blocks) have the following features: 1. Each block-level element occupies a single line.
The height, width, row height, and top and bottom margins of the two elements can be set.
3. If the width is not set, it is consistent with that of the parent element.
Inline features: 1. It is on the same line as other elements.
The height, width, row height, and top and bottom margins of the two elements cannot be set.
The width of the element 3 cannot be changed.
Inline block-inline features: 1. It is on the same line as other elements.
The height, width, row height, and top and bottom margins of the two elements can be set.

② Horizontal menu
Li floating Based on the vertical menu
Li {
Float: left
}
③ Rounded menu
There are two methods based on the horizontal menu:
1. Add a border-bottom for ul, and add a rounded image background for label. Move background: background-position:
2. Use border-radius.

The above content is from MOOC. Http://www.imooc.com/course/program

--- Restore content end ---