How to design the homepage of Tudou.com
|
<br />I have been working in front-end for several years. I cannot say that I have a thorough understanding of it, but I still have some of my own ideas. Let’s take the homepage of Tudou.com as an example to summarize. In terms of production, I divide a page into four layers: framework, layout, module, list, and data block. 1. Framework <br />The framework of the page is basically: "header", "body", and "footer". However, for some pages such as Tudou.com, due to layout requirements, a "menu" should be added below the "header".  2. Layout (#ID is used to represent page elements below) I won't talk about #Head and #Foot, please check the source code of the demonstration page for details. Layout refers to dividing the content in #Main into several large blocks. Let’s look at Tudou.com. The typical left-right structure in #Main is represented by #Layout_1 and #Layout_2. As shown  3. Modules <br />The blocks in layout #Layout_1 and #Layout_2 are modules. As far as I understand, a module must have at least one ID, and a Class should be added to those that need to be reused depending on the page design. Regarding the module ID name, you should give it a meaningful name. Of course, if you are lazy, you can use #Col_1, #Col_2, etc. . . The class names of the modules are .cols_1, .cols_2, etc. . .  The inside of the module is as follows:  Previous Page 1 2 Next Page Read Full Article |
<<: MySQL 8.0 New Features - Introduction to the Use of Management Port
>>: 30 Tips for Writing HTML Code
Recommend
The principle and direction of JavaScript this
How to determine what this points to? ①When calle...
Complete the search function in the html page
Recently I've been working on a framework tha...
JavaScript Prototype Details
Table of contents 1. Overview 1.1 What is a proto...
vue+element-ui implements the head navigation bar component
This article shares the specific code of vue+elem...
Two practical ways to enable proxy in React
Two ways to enable proxy React does not have enca...
Detailed explanation of using Vue.prototype in Vue
Table of contents 1. Basic Example 2. Set the sco...
Solution to 404 error when downloading apk file from IIS server
Recently, when using IIS as a server, the apk fil...
React Native environment installation process
react-native installation process 1.npx react-nat...
A detailed introduction to JavaScript execution mechanism
Table of contents 1. The concept of process and t...
CentOS7 uses rpm to install MySQL 5.7 tutorial diagram
1. Download 4 rpm packages mysql-community-client...
Understanding and using callback functions in JavaScript
Table of contents Overview What are callbacks or ...
Summary of MySQL slow log practice
Slow log query function The main function of slow...
Win10 DVWA download, installation and configuration graphic tutorial detailed explanation (novice learning penetration)
The computer system has been reinstalled, and the...
Detailed explanation of box-sizing in CSS3 (content-box and border-box)
Box-sizing in CSS3 (content-box and border-box) T...
HTML table tag tutorial (44): table header tag
<br />In order to clearly distinguish the ta...