An article to help you understand the HTML web page layout structure

An article to help you understand the HTML web page layout structure

[[404070]]

Hello everyone, I am IT sharer, also known as Pipi. In this article, we will talk about CSS web page layout.

1. Web page layout

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

1. Head area

The header area is located at the top of the entire web page and is generally used to set the title of the web page or the logo of the web page:

example

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset= "utf-8" >
  5.  <title>CSS Project (runoob.com)</title>
  6.  <meta name = "viewport" content= "width=device-width, initial-scale=1" >
  7.  <style>
  8.  body {
  9.  margin: 0;
  10.  } 
  11.  
  12.  /* Header style */
  13.  .header {
  14.  background-color: #f1f1f1;
  15.  padding: 20px;
  16.  text-align: center;
  17.  }
  18.  </style>
  19.  </head>
  20.  <body> 
  21.  
  22.  <div class= "header" >
  23.  <h1>Header area</h1>
  24.  </div> 
  25.  
  26.  </body>
  27.  </html>

2. Menu navigation area

The menu navigation bar contains some links that can guide users to browse other pages:

example

  1.  /* Navigation bar */
  2.  .topnav {
  3.  overflow: hidden;
  4.  background-color: #333;
  5.  } 
  6.   
  7.  /* Navigation links */
  8.  .topnav a {
  9.  float : left ;
  10.  display: block;
  11.  color: #f2f2f2;
  12.  text-align: center;
  13.  padding: 14px 16px;
  14.  text-decoration: none;
  15.  } 
  16.   
  17.  /* Link - change color */
  18.  .topnav a:hover {
  19.  background-color: #ddd;
  20.  color: black;
  21.  }

3. Content Area

Content areas generally come in three forms:

1 column: generally used on mobile devices.

2 columns: Generally used for tablet devices.

3 columns: generally used for PC desktop devices.

Unequal columns

Unequal columns usually have the content area in the middle, which is also the largest and most important part. The left and right sides can be used for navigation and other related content. The total width of these three columns is 100%.

example:

  1.  .column {​
  2.  float : left ;
  3.  } 
  4.   
  5.  /* Width of left and right sidebars */
  6.  .column .side {
  7.  width: 25%;
  8.  } 
  9.   
  10.  /* Middle column width */
  11.  .column .middle {
  12.  width: 50%;
  13.  } 
  14.   
  15.  /* Responsive layout - set up top and bottom layout when width is less than 600px */
  16.  @media screen and ( max -width: 600px) {
  17.   . column .side, . column .middle {
  18.  width: 100%;
  19.  }
  20.  }

4. Bottom area

The bottom area is at the very bottom of the web page and generally contains copyright information and contact information.

example

  1.  .footer {
  2.  background-color: #F1F1F1;
  3.  text-align: center;
  4.  padding: 10px;
  5.  }

2. Responsive Web Page Layout

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

Case

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset= "utf-8" >
  5.  <title>Project</title>
  6.  <style>
  7.  * {
  8.  box-sizing: border-box;
  9.  } 
  10.   
  11.  body {
  12.  font-family: Arial;
  13.  padding: 10px;
  14.  background: #f1f1f1;
  15.  } 
  16.   
  17.  /* Header title */
  18.  .header {
  19.  padding: 30px;
  20.  text-align: center;
  21.  background: white;
  22.  } 
  23.   
  24.  .header h1 {
  25.  font- size : 50px;
  26.  } 
  27.   
  28.  /* Navigation bar */
  29.  .topnav {
  30.  overflow: hidden;
  31.  background-color: #333;
  32.  } 
  33.   
  34.  /* Navigation bar link */
  35.  .topnav a {
  36.  float : left ;
  37.  display: block;
  38.  color: #f2f2f2;
  39.  text-align: center;
  40.  padding: 14px 16px;
  41.  text-decoration: none;
  42.  } 
  43.   
  44.  /* Change link color */
  45.  .topnav a:hover {
  46.  background-color: #ddd;
  47.  color: black;
  48.  } 
  49.   
  50.  /* Create two columns */
  51.  /* Left   column */
  52.  .leftcolumn {
  53.  float : left ;
  54.  width: 75%;
  55.  } 
  56.   
  57.  /* Right column */
  58.  .rightcolumn {
  59.  float : left ;
  60.  width: 25%;
  61.  background-color: #f1f1f1;
  62.  padding- left : 20px;
  63.  } 
  64.   
  65.  /* Image part */
  66.  .fakeimg {
  67.  background-color: #aaa;
  68.  width: 100%;
  69.  padding: 20px;
  70.  } 
  71.   
  72.  /* Article card effect */
  73.  .card {
  74.  background-color: white;
  75.  padding: 20px;
  76.  margin- top : 20px;
  77.  } 
  78.   
  79.  /* Clear float after column */
  80.  .row: after {
  81.  content: "" ;
  82.  display: table ;
  83.  clear: both;
  84.  } 
  85.   
  86.  /* Bottom */
  87.  .footer {
  88.  padding: 20px;
  89.  text-align: center;
  90.  background: #ddd;
  91.  margin- top : 20px;
  92.  } 
  93.   
  94.  /* Responsive layout - when the screen size is less than 800px, the two-column layout is changed to a top-down layout */
  95.  @media screen and ( max -width: 800px) {
  96.  .leftcolumn, .rightcolumn {
  97.  width: 100%;
  98.  padding: 0;
  99.  }
  100.  } 
  101.   
  102.  /* Responsive layout - When the screen size is less than 400px, the layout of navigation and other elements is changed to top-down layout */
  103.  @media screen and ( max -width: 400px) {
  104.  .topnav a {
  105.  float : none;
  106.  width: 100%;
  107.  }
  108.  }
  109.  </style>
  110.  </head>
  111.  <body> 
  112.  
  113.  <div class= "header" >
  114.  <h1>My Page</h1>
  115.  <p>Resize your browser to see the effect.</p>
  116.  </div> 
  117.  
  118.  <div class= "topnav" >
  119.  <a href="#" > Link</a>
  120.  <a href="#" > Link</a>
  121.  <a href="#" > Link</a>
  122.   <a href= "#" style= "float:right" > Link</a>
  123.  </div> 
  124.  
  125.  <div class= "row" >
  126.  <div class= "leftcolumn" >
  127.  <div class= "card" >
  128.  <h2>Article Title</h2>
  129.  <h5>xx year xx month xx day</h5>
  130.       <div class= "fakeimg" style= "height:200px;" ><img src= "img/bird.png" ></div>
  131.  <p>Text...</p>
  132.  <p>When enthusiasm becomes a habit, fear and worry have no place to stay. People who lack enthusiasm also have no clear goals. Enthusiasm makes the wheels of imagination turn. A person without enthusiasm is like a car without gasoline.
  133.  The happiest person is one who is good at arranging play and work, and keeps enthusiasm for both. Enthusiasm makes ordinary topics lively. ! </p>
  134.  </div>
  135.  <div class= "card" >
  136.  <h2>Article Title</h2>
  137.  <h5>xx year xx month xx day</h5>
  138.       <div class= "fakeimg" style= "height:200px;" ><img src= "img/border.png" ></div>
  139.  <p>Text...</p>
  140.  <p>Everything cannot be perfect, but we can only strive to do our best. This way, we will be stress-free and the results will be better! </p>
  141.  </div>
  142.  </div>
  143.  <div class= "rightcolumn" >
  144.  <div class= "card" >
  145.  <h2>About me</h2>
  146.       <div class= "fakeimg" style= "height:100px;" ></div>
  147.  <p>6666</p>
  148.  </div>
  149.  <div class= "card" >
  150.  <h3>Hot Articles</h3>
  151.       <div class= "fakeimg" ><img src= "img/fy2_wp.png" >\</div> 
  152.      
  153.  </div>
  154.  <div class= "card" >
  155.  <h3>Follow me</h3>
  156.  <p>The systems and software released on this website are only for personal learning and testing. Please delete them within 24 hours after downloading.
  157.  It cannot be used for any commercial purpose. Otherwise, you will be responsible for the consequences. Please support the purchase of genuine software! If your rights are infringed, please notify us in time and we will deal with it in time. 
  158.  
  159.  Statement: This is a non-profit website and does not accept any sponsorship or advertising. </p>
  160.  </div>
  161.  </div>
  162.  </div> 
  163.  
  164.  <div class= "footer" >
  165.  <h2>Bottom Area</h2>
  166.  </div> 
  167.  
  168.  </body>
  169.  </html>

Conclusion

This article mainly introduces the Html web page layout structure, how to understand the layout of the network, and introduces three common web page modes for mobile devices. Finally, through a small project, it summarizes the previous content.

The code is simple, I hope it helps you learn.

<<:  China's 6G network will be commercially available in 2030 to help realize the "intelligent connection of all things"

>>:  Two years after the license was issued, what progress has been made in my country’s 5G development?

Recommend

Sharktech: 1Gbps unlimited traffic high-security server starting at $59/month, Los Angeles data center

I saw a friend looking for a 1Gbps unlimited traf...

Impact of 5G Networks on Fiber Cabling Requirements

By Kara Mullaley, Corning Inc. [[394802]] 5G netw...

China Unicom successfully returns to the forefront of 5G user development

[[389476]] After much anticipation, China Unicom ...

Justhost has launched its 22nd node in Türkiye, with 200Mbps unlimited VPS starting at $1.73 per month

Justhost.ru recently launched its 22nd VPS node: ...

Where is the entrance to 5G message service? You may not think of it

Since the Ministry of Industry and Information Te...

If you want AI, come to Chongqing Smart Expo! Huawei brings two "magic weapons" to in-depth exchanges on the intelligent industry

[51CTO.com original article] On August 23, the th...

RAKsmart: VPS starts from $0.99/month, dedicated server starts from $20/month, US/Hong Kong VPS/cloud server starts from $19.9/year

Yesterday we shared the news of RAKsmart recharge...

edgeNAT Valentine's Day Promotion: Buy one get one free for all VPS

edgeNAT has launched a promotion for Valentine...

Network-oriented, NPMD achieves 80% of functions with 20% of investment

An organization once worked with MIT to interview...

In the 5G era, how are operators doing in the government and enterprise market?

4G has just entered a stable development period, ...

Detailed explanation of several wireless transmission modes!

1. Access Point (AP) In this mode, the wireless n...

How to attract and train talents in the era of the Internet of Things

We are experiencing a worldwide war for talent wi...

Ruishu Information AI team won the A-level championship in cybersecurity at the "3rd China Artificial Intelligence Competition"

Recently, at the "3rd China Artificial Intel...

The love-hate relationship between TCP and UDP

Recently, the epidemic in Qiaoxi District, Shijia...

127.0.0.1 and localhost, how to choose?

In actual development, we often use 127.0.0.1 and...