YouTip

## Website Layout Website layouts come in many ways, generally divided into the following parts: **Header Area, Menu Navigation Area, Content Area, Footer Area**. !(#) * * * ## Header Area The header area is located at the top of the entire webpage, generally used to set the webpage title or logo: ## CSS3 Instance .header{background-color:#F1F1F1; text-align:center; padding:20 px; } [Try it »](#) * * * ## Menu Navigation Area The menu navigation bar contains some links that can guide users to browse other pages: ## CSS3 Instance .topnav{overflow:hidden; background-color:#333; }.topnav a{float:left; display:block; color:#f2f2f2; text-align:center; padding:14 px 16 px; text-decoration:none; }.topnav a:hover{background-color:#ddd; color:black; } [Try it »](#) * * * ## Content Area The content area generally has three forms: * **1 Column**: Generally used for mobile devices * **2 Columns**: Generally used for tablet devices * **3 Columns**: Generally used for PC desktop devices !(#) We will create a 3-column layout, which will become a 1-column layout on smaller screens (responsive): ## CSS3 Instance .column{float:left; width:33.33%; }.row:after{content: ""; display:table; clear:both; }@media screen and (max-width: 600 px) {.column{width:100%; }} [Try it »](#) > **Tip:** To set two columns, you can set width to 50%. To create 4 columns, you can set to 25%. > > > **Tip:** If you want to learn more about @media rules, you can check (#). > > > **Tip:** A more advanced way now is to use CSS Flexbox to create column layouts, but Internet Explorer 10 and earlier versions do not support this method. IE6-10 can use the float method. > > > For more content about CSS Flexbox, check [CSS3 Flexible Box (Flex Box)](#). ### Unequal Columns Unequal columns generally set the content area in the middle, which is the largest and most main part. The left and right sides can be used for navigation and other related content. The width of these three columns adds up to 100%. ## CSS3 Instance .column{float:left; }.column.side{width:25%; }.column.middle{width:50%; }@media screen and (max-width: 600 px) {.column.side, .column.middle{width:100%; }} [Try it »](#) * * * ## Footer Area The footer area is at the bottom of the webpage, generally containing copyright information and contact information. ## CSS3 Instance .footer{background-color:#F1F1F1; text-align:center; padding:10 px; } [Try it »](#) * * * ## Responsive Webpage Layout Through the above learning, we will create a responsive page. The page layout will adjust according to the screen size: ## CSS3 Instance *{box-sizing:border-box; }body{font-family:Arial; padding:10 px; background:#f1f1f1; }.header{padding:30 px; text-align:center; background:white; }.header h1{font-size:50 px; }.topnav{overflow:hidden; background-color:#333; }.topnav a{float:left; display:block; color:#f2f2f2; text-align:center; padding:14 px 16 px; text-decoration:none; }.topnav a:hover{background-color:#ddd; color:black; }.leftcolumn{float:left; width:75%; }.rightcolumn{float:left; width:25%; background-color:#f1f1f1; padding-left:20 px; }.fakeimg{background-color:#aaa; width:100%; padding:20 px; }.card{background-color:white; padding:20 px; margin-top:20 px; }.row:after{content: ""; display:table; clear:both; }.footer{padding:20 px; text-align:center; background:#ddd; margin-top:20 px; }@media screen and (max-width: 800 px) {.leftcolumn, .rightcolumn{width:100%; padding:0; }}@media screen and (max-width: 400 px) {.topnav a{float:none; width:100%; }} [Try it »](#)