Some explanations about front-end page layout
The structure and performance principles of web pages are generally as follows:
First write the code according to the structure and semantics
Then perform CSS styling Settings
Reduce the fit between HTML and CSS (simplify the page structure)
We can use a case of making a list of Weibo user speech information Analyze this principle. The following is the overall implementation effect of this case:
From a beginner’s perspective:
Beginners often divide this structure into multiple DIVs, which basically look like the following blocks:
Implementation code:
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;}10 p{overflow: hidden;}11 12 #demo1 .left{float: left; width: 160px; text-align: center;}13 #demo1 .right{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;}14 </style>15 </head>16 <body>17 <div id="demo1">18 <div class="left">19 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="头像">20 </div>21 <div class="right">22 <span>10分钟之前</span>23 <h6>歪嘴的肖恩</h6>24 <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p>25 </div>26 </div>27 </body>28 </html>From the perspective of the intermediate front-end:
The DIV where the picture on the left is located can be omitted, and it becomes like this:
Implementation code:
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;}10 p{overflow: hidden;}11 12 #demo2 img{float: left;margin-left: 40px;}13 #demo2 .right{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;}14 </style>15 </head>16 <body>17 <div id="demo2">18 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="头像">19 <div class="right">20 <span>10分钟之前</span>21 <h6>歪嘴的肖恩</h6>22 <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p>23 </div>24 </div>25 </body>26 </html>From an advanced front-end perspective:
All elements are placed in a DIV. The structure is simpler, just move the picture out:
Implementation code:
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;}10 p{overflow: hidden;}11 12 #demo3{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;}13 #demo3 img{float: left;margin: -20px 0 0 -140px;}14 </style>15 </head>16 <body>17 <div id="demo3">18 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="头像">19 <span>10分钟之前</span>20 <h6>歪嘴的肖恩</h6>21 <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p>22 </div>23 </body>24 </html>
The above is the detailed content of Some explanations about front-end page layout. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
Principles and standards for PHP function library design
Jun 16, 2023 am 11:37 AM
As the importance of PHP in Web development continues to increase, PHP function library design has become one of the key issues in development. A good function library can not only improve development efficiency, but also ensure code quality and maintainability. Therefore, designing function libraries needs to follow some basic principles and standards. 1. A function library with good reusability should be reusable and can be used in different projects. Therefore, functions should be abstract and general and cannot be tied to a specific project or scenario. 2. Ease of use The function library should be easy to use and pass parameters
What are the syntax and structure characteristics of lambda expressions?
Apr 25, 2024 pm 01:12 PM
Lambda expression is an anonymous function without a name, and its syntax is: (parameter_list)->expression. They feature anonymity, diversity, currying, and closure. In practical applications, Lambda expressions can be used to define functions concisely, such as the summation function sum_lambda=lambdax,y:x+y, and apply the map() function to the list to perform the summation operation.
What is the origin of the basic structure and technology of the internet?
Dec 15, 2020 pm 04:48 PM
The basic structure and technology of the internet originated from ARPANET. ARPANET is a milestone in the development of computer network technology. Its research results have played an important role in promoting the development of network technology and laid the foundation for the formation of the Internet. Arpanet (Arpanet) was the world's first operational packet switching network developed by the U.S. Defense Advanced Research Projects Agency. It is the ancestor of the global Internet.
How to implement a layout with a fixed navigation menu using HTML and CSS
Oct 26, 2023 am 11:02 AM
How to use HTML and CSS to implement a layout with a fixed navigation menu. In modern web design, fixed navigation menus are one of the common layouts. It can keep the navigation menu always at the top or side of the page, allowing users to browse web content conveniently. This article will introduce how to use HTML and CSS to implement a layout with a fixed navigation menu, and provide specific code examples. First, you need to create an HTML structure to present the content of the web page and the navigation menu. Here is a simple example
In-depth analysis of the structure and purpose of the MySQL.proc table
Mar 15, 2024 pm 02:36 PM
The MySQL.proc table is a system table that stores stored procedure and function information in the MySQL database. By in-depth understanding of its structure and purpose, you can better understand the operating mechanism of stored procedures and functions in MySQL, and perform related management and optimization. The structure and purpose of the MySQL.proc table will be analyzed in detail below, and specific code examples will be provided. 1. The structure of the MySQL.proc table. The MySQL.proc table is a system table that stores the definitions and related information of all stored procedures and functions.
Safe Coding Principles in PHP
May 24, 2023 am 08:21 AM
PHP is a popular programming language that is widely used in web application development in many different fields. However, due to its ease of writing and development, PHP applications are also often targeted by cybercriminals. Therefore, secure coding principles are indispensable when writing PHP code. The following will list some secure coding principles in PHP to help developers better protect the security of applications when writing code. Ensuring the validity of input data Input filtering is an important method to prevent SQL injection and XSS attacks. Writing
How to design the mall's evaluation table structure in MySQL?
Oct 31, 2023 am 08:27 AM
How to design the mall's evaluation table structure in MySQL? In a shopping mall system, evaluation is one of the most important functions. Evaluations can not only provide reference for other users, but also help merchants understand users’ feedback and opinions on products. Designing a reasonable evaluation form structure is crucial to the operation of the mall system and user experience. This article will introduce how to design the mall's evaluation table structure in MySQL and provide specific code examples. First, we need to create two basic tables: product table and user table. product list (product
What are the common flow control structures in Python?
Jan 20, 2024 am 10:38 AM
There are four common flow control structures in Python, namely sequential structure, conditional structure, loop structure and jump structure. The following will introduce them one by one and provide corresponding code examples. Sequential structure: A sequential structure is a structure in which the program is executed in a predetermined order from top to bottom, without specific keywords or syntax. Sample code: print("This is the sequence structure example 1")print("This is the sequence structure example 2")print("This is the sequence structure example 2")
