Hello everyone, I’m IT sharer, also known as Pipi. This article is about CSS web layout.

First, web layout

There are many ways to layout a web page, generally divided into the following parts: header area, menu navigation area, content area, bottom area.

1. Header area

The header is located at the top of the page and is usually used to set the title or logo of the page:

case

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>CSS project (runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } /* header style */. Header {background-color: #f1f1f1; padding: 20px; text-align: center; } < / style > < / head > < body > < div class = "header" > < h1 > header < / h1 > < / div > < / body > < / HTML >Copy the code

2. Menu navigation area

The menu navigation bar contains links that guide the user to other pages:

case

/* Navigation bar */. Topnav {overflow: hidden; background-color: #333; } /* navigation link */. Topnav a {float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; Topnav a:hover {background-color: # DDD; color: black; }Copy the code

3. Content area

Content areas generally take three forms:

  • Column 1: Used on the mobile terminal.
  • Column 2: Generally used for tablet devices.
  • Column 3: Applies to PC desktop devices.

Unequal columns

Unequal columns are usually set in the middle part of the content area, this is also the largest and most important, the left and right sides can be used for some navigation and other related content, the width of the three columns together is 100%.

Ex. :

.column { float: left; } /* The width of the left and right sidebars */.column.side {width: 25%; } /* middle column width */.column.middle {width: 50%; } / / @media screen and (max-width: 600px) {.column.side,.column.middle {width: 100%; }}Copy the code

4. Bottom area

The bottom area is at the bottom of the page and usually contains copyright information and contact information.

case

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}
Copy the code

Responsive web layout

Through the above learning we will create a responsive page, the page layout will be adjusted according to the screen size:

case

<! Background-color: RGB (255,255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); } body { font-family: Arial; padding: 10px; background: #f1f1f1; } /* Header header */. Header {padding: 30px; text-align: center; background: white; } .header h1 { font-size: 50px; } /* Navigation bar */. Topnav {overflow: hidden; background-color: #333; } /* navigation bar link */. Topnav a {float: left; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; Topnav a:hover {background-color: # DDD; color: black; } /* Create two columns */ /* Left column */. Leftcolumn {float: Left; width: 75%; } /* rightcolumn */. Rightcolumn {float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; } /* image */. Fakeimg {background-color: #aaa; width: 100%; padding: 20px; } /* article card effect */. Card {background-color: white; padding: 20px; margin-top: 20px; } /* row:after {content: ""; display: table; clear: both; } /* bottom */. Footer {padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } / / @media screen and (max-width: 800px) {.leftcolumn,.rightcolumn {width: 100%; padding: 0; }} /* @media screen and (max-width: 400px) {. Topnav a {float: none; float: none; float: none; float: none; float: none; width: 100%; }} </style> </head> <body> <div class="header"> <h1> My webpage </h1> <p> Reset the browser size to see the effect. < / p > < / div > < div class = "topnav" > < a href = "#" > link < / a > < a href = "#" > link < / a > < a href = "#" > link < / a > < a href = "#" Style ="float:right"> link </a> </div> <div class="row"> <div class="leftcolumn"> <div class="card" </h5> <div class="fakeimg" style="height:200px; ><img SRC ="img/bird.png"></div> <p> </p> <p> When enthusiasm becomes habit, there is no room for fear and worry. People who lack enthusiasm have no clear goals. Zeal turns the wheel of imagination. A man without enthusiasm is like a car without petrol. He is the happiest who knows how to arrange play and work, and who keeps both cordial. Enthusiasm enlivenes common topics. ! </p> <div class="card"> <h2> <h5> <div class="fakeimg" style="height:200px; ><img SRC ="img/ border-.png "></div> <p> text... </p> <p> There is no such thing as perfection, only striving for the best. This heart without pressure, the results will be better! </p> </div> <div class=" rightColumn "> <div class="card"> <h2> > < / div > < p > 6666 < / p > < / div > < div class = "card" > < h3 > hot article < / h3 > < div class = "fakeimg" > < img SRC = "img/fy2_wp. PNG" > \ < / div > </div> <div class="card"> <h3> Focus on me </h3> <p> This site published system and software only for personal learning test use, please delete within 24 hours after downloading, shall not be used for any commercial purposes, otherwise the consequences, please support the purchase of legitimate software! If your rights and interests are violated, please inform us in time, we will deal with it in time. Disclaimer: Non - profit sites do not accept sponsorship or advertising. < / p > < / div > < / div > < / div > < div class = "footer" > < h2 > area at the bottom of the < / h2 > < / div > < / body > < / HTML >Copy the code

Third, summary

This paper mainly introduces the Html web page layout structure, how to understand the layout of the network, introduces three common mobile device web page mode, and finally through a small project, summarizes the previous explained content.

The code is very simple and hopefully helps you learn.