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
How to generate PDF and download it in Vue front-end
Table of contents 1. Installation and introductio...
Nested display implementation of vue router-view
Table of contents 1. Routing Configuration 2. Vue...
Example test MySQL enum type
When developing a project, you will often encount...
Detailed explanation of the TARGET attribute of the HTML hyperlink tag A
The hyperlink <a> tag represents a link poin...
MySQL table deletion operation implementation (differences between delete, truncate, and drop)
This article mainly discusses the differences bet...
CSS solution for centering elements with variable width and height
1. Horizontal center Public code: html: <div c...
How to configure CDN scheduling using Nginx_geo module
Introducing the Geo module of Nginx The geo direc...
Linux tutorial on replacing strings using sed command
To replace a string, we need to use the following...
Detailed Tutorial on Installing VirtualBox 6.0 on CentOS 8 / RHEL 8
VirtualBox is a free and open source virtualizati...
How to install and use Server-U 14 version
Introducing Server-U software Server-U is a very ...
Detailed explanation of how to synchronize data from MySQL to Elasticsearch
Table of contents 1. Synchronization Principle 2....
Linux unlink function and how to delete files
1. unlink function For hard links, unlink is used...
MySQL 8.0.12 Installation and Configuration Tutorial
This article records the detailed tutorial for in...
An enhanced screenshot and sharing tool for Linux: ScreenCloud
ScreenCloud is a great little app you didn’t even...
Detailed explanation of using pt-heartbeat to monitor MySQL replication delay
pt-heartbeat When the database is replicated betw...