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
Tips and precautions for using MySQL index
1. The role of index In general application syste...
Docker starts Redis and sets the password
Redis uses the apline (Alps) image of Redis versi...
A brief analysis of the difference between ref and toRef in Vue3
1. ref is copied, the view will be updated If you...
Docker installation tutorial in Linux environment
1. Installation environment Docker supports the f...
CSS inheritance method
Given a div with the following background image: ...
Detailed explanation of several methods of JS array dimensionality reduction
Dimensionality reduction of two-dimensional array...
Creative opening effect achieved by combining CSS 3.0 with video
Let me share with you a creative opening realized...
Use iframe to display weather effects on web pages
CSS: Copy code The code is as follows: *{margin:0;...
jQuery realizes dynamic particle effect
This article shares the specific code of jQuery t...
Font references and transition effects outside the system
Copy code The code is as follows: <span style=...
jQuery plugin to implement minesweeper game (2)
This article shares the second article of using j...
Summary of solutions to common Linux problems
1. Connect Centos7 under VMware and set a fixed I...
Three ways to implement waterfall flow layout
Preface When I was browsing Xianyu today, I notic...
Turn web pages into black and white (compatible with Google, Firefox, IE and other browsers)
Write to the css file Copy code The code is as fol...
Detailed explanation of the difference between routing hooks in Vue2.x and Vue3.x
Table of contents vue2.x Pre-concept: Routing hoo...