Webpage ideas:
Before formal writing, roughly divide the webpage structure into div layouts such as navigation bar (nav), content (content), and bottom (footer)
After the layout is completed, add the width, height, background color and other styles of the div box in complete details in the CSS file. Since the elements of web pages are divided into inline elements and block elements, it is sometimes appropriate to use the display attribute conversion.
In fact, both the frame and the content can be regarded as a box layout
After the web page is roughly laid out, fill in the detailed element styles inside.
It is also recommended to lay out the content in blocks and then edit the style in the CSS file.
Layout it in blocks and then edit the style.
Overall rendering:
As mentioned above, we can divide a web page into three steps Navigation bar (nav), content (content), and bottom (footer) Next, we will show the effect of our webpage and share the code
Navigation bar renderings display:
HTML:
CSS:
Note on the navigation bar:
Here we only need to go to the Alibaba icon library and select the image we need to substitute.
The above CSS code:
Intermediate content renderings display:
HTML：
CSS：
In this step, we use the idea of a small box inside a big box for typesetting and layout.
There are three small boxes inside the big box for division. The five pictures in the picture can be moved up with the mouse to display the magnification effect.
As described in the above code, add css attributes to the images in the red box and black box to enlarge the effect.
Content 2 display effect:
HTML:
CSS:
The effect of content 2:
Hidden pictures and content can be displayed on the picture by moving the mouse. The code is implemented as follows:
overflow：
| visible | default value. The content will not be trimmed and will be rendered outside the element box. |
| hidden | The content is trimmed and the remaining content is invisible. |
| scroll | The content is trimmed, but the browser displays scroll bars to view the remaining content. |
| auto | If content is trimmed, the browser displays scroll bars to view the remaining content. |
| you inherit | Specifies that the value of the overflow attribute should be inherited from the parent element. |
opacity: Set the transparency level of a div element
Bottom code rendering:
HTML：
CSS:
Note: Use the id selector to edit the content. Use the p tag to divide paragraphs, set the content width and height, text size, font color and background color.
The text-align attribute specifies the horizontal alignment of text within an element.
The padding-top attribute sets the top padding of an element.
The margin-top property sets the top margin of an element
The line-height property sets the distance between lines (line height)