How to dissect the layout of the website to its golden section?

Mathematics is graceful. Sounds a little strange? When I first started designing, I was sure of it. Maths is so stiff and boring. You may be surprised to find that the most beautiful designs, works of art, objects, and even people have mathematical similarities. In particular, the Golden Section, also known as the proportions of God, is represented by the Greek alphabet as Φ (PHI). This tutorial will dissect the layout of a website and how to segment its gold

Web skeleton

These are the main elements of a Web page. There are many different ways to organize them, but this layout may be the most common.

Container

All Web pages use a container, mainly for the same purpose: to include some page elements, but this method is implemented differently. For example, the body tag or the most commonly used div. Even in the past used table (do not use table as your container, this is a broken method). Think of container as the outer wall of your house, which contains bedrooms, kitchens, living rooms and so on.
Type of container:
Liquid: Padding based on browser width.
Fixed: The width specified does not change according to the browser width.

Header

Header is not really a particular element, although some people will think it is. It's more about where you place the top floor of your logo, navigation bar, tagline Web page. Many people prefer to include these elements in a div to make it easier to separate page styles from content. The header is treated as a container, so it has two types of choices, that is, the liquid or fixed that is mentioned above.

Logo

Your logo is your identity and brand. The most common is to put the logo in the top left corner of your header. Our reading habits are, from left to right, from top to bottom, so your log should be placed at the first sight of the visitor.

Navigation

Page navigation is one of the most important elements that your visitors need to use for your site. It should be easy to find and easy-to-use, which is why most people put it in the header, at least in the vicinity of the top of the page.
Navigation Type:
Horizontal: Horizontal display, known as ' navigation '
Vertical: Vertical display, called ' menu '