Hello everyone, I am an IT sharer, known as Pipi. In this article, let’s talk about CSS web page layout.
1. Web page layout
There are many ways to layout web pages, generally divided into the following parts: head area, menu navigation area, content area, bottom area .
1. Header area
header area is located at the top of the entire web page, which is generally used to set the title of the web page or the logo of the web page:
Examples
!DOCTYPE htmlhtmlheadmeta charset="utf-8"titleCSS Project (runoob.com)/titlemeta name="viewport" content="width=device-width, initial-scale=1"stylebody {margin: 0;}/* Head style */.header {background-color: #f1f1f1;padding: 20px;text-align: center;}/style/headbodydiv class="header"h1 header area/h1/div/body/html
2. Menu navigation area
Menu navigation bar contains some links that can guide users to browse other pages:
Example
/* 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;} /* Link - Modify color */.topnav a:hover {background-color: #ddd;color: black;}3. Content area
Content area generally has three forms:
- 1 Column : Generally used in mobile terminals.
- 2 Column : Generally used in tablet devices.
- 3 Column : Generally used for PC desktop devices.
Unequal column
Unequal columns are generally set up in the middle part, and this block is also the largest and most important. The left and right sides can be used as some navigation and other related content. The combined width of these three columns is 100%.
Example:
.column {float: left;} /* Width of left and right sidebars */.column.side {width: 25%;} /* Width of middle columns */.column.middle {width: 50%;} /* Responsive layout - Set up upper and lower layout when the width is less than 600px */@media screen and (max-width: 600px) {.column.side, .column.middle {width: 100%;}}
4. The bottom area
The bottom area is at the bottom of the web page, generally containing copyright information and contact information.
Examples
.footer {background-color: #F1F1F1;text-align: center;padding: 10px;}
2. Responsive web page layout
Through the above learning, we will create a responsive page, and the layout of the page will be adjusted according to the size of the screen:
case
!DOCTYPE htmlhtmlheadmeta charset="utf-8"title project/titlestyle* {box-sizing: border-box;} body {font-family: Arial;padding: 10px;background: #f1f1f1;} /* 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;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;} /* Link color modification */.topnav a:hover {background-color: #ddd;color: black;} /* Create two columns *//* Left column */.leftcolumn { float: left;width: 75%;} /* Right column */.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;} /* Image part */.fakeimg {background-color: #aaa;width: 100%;padding: 20px;} /* Article card effect */.card {background-color: white;padding: 20px;margin-top: 20px;} /* Clear floats behind the column */.row:after {content: "";display: table;clear: both;} /* Bottom */.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;} /* Responsive layout - When the screen size is less than 800px, the layout of the two columns is changed to upper and lower layout */@media screen and (max-width: 800px) {.leftcolumn, .rightcolumn { width: 100%;padding: 0;}} /* Responsive layout - When the screen size is less than 400px, the navigation and other layouts are changed to up and down layout */@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}}/style/headbodydiv class="header"h1My web page/h1p resets the browser size to view the effect. /p/divdiv class="topnav"a href="#"link/aa href="#"link/aa href="#"link/aa href="#"link/aa href="#" style="float:right"link/a/divdiv class="row"div class="leftcolumn"div class="card"h2 Article title/h2h5xx xx month xx day/h5div class="fakeimg" style="height:200px;"img src="img/bird.png"/divp text.../pp When enthusiasm becomes a habit, fear and worry have nowhere to stay. People who lack enthusiasm also have no clear goals. Passionately turns the wheel of imagination. A person's lack of enthusiasm is like a car without gasoline. Being good at arranging fun and work, and keeping both enthusiastic, is the happiest person. Passion makes ordinary topics vivid. ! /p/divdiv class="card"h2 Article title/h2h5xx year xx month xx day/h5div class="fakeimg" style="height:200px;"img src="img/border.png"/divp text.../pp Everything cannot pursue perfection, you can only pursue doing your best. This way, the result will be better if you don’t have any pressure! /p/div/divdiv class="rightcolumn"div class="card"h2About me/h2div class="fakeimg" style="height:100px;"/divp6666/p/divdiv class="card"h3Popular articles/h3div class="fakeimg"img src="img/fy2_wp.png"\/div/divdiv class="card"h3Follow me/h3pThe systems and software published on this site are only for personal learning and testing purposes. Please delete them within 24 hours after downloading and shall not be used for any commercial purposes. Otherwise, you will be responsible for the consequences. Please support purchasing genuine software! If your rights are infringed, please notify us in time and we will deal with it in time. Statement: Non-profit websites are not accepted for any sponsorship or advertising. /p/div/div/div/div class="footer"h2 bottom area/h2/div/body/htmlhtml3. Summary
This article mainly introduces the web page layout structure of Html, how to understand the layout of the network, introduces three common web page modes of mobile devices, and finally summarizes the content explained before through a small project.
code is very simple, I hope it can help you learn.
