Traditionally , the layout of HTML is done by using a table ( table ), but there are many shortcomings in the use of table layout. For example, the structure of the table must wait for the entire table to be completely downloaded before it can be presented smoothly. If there is something in the table When there are quite a few (such as image files or video files), you can feel that the web page opens slowly, and there are too many tabs in the Table. On the one hand, it takes time to organize, and on the other hand, it is not easy for search engines to understand you. Code. Now the new generation of design adopts CSS + DIV layout method to replace the traditional table layout, and solve the old problems, improve the speed of web page opening, this article is to tell you how to use DIV tags.
DIV can be interpreted as a block. What is wrapped in DIV tags will be regarded as an object by the browser. It will roughly grow into this <div>content</div>. You can wrap each block of web content with divs, Let's do CSS layout again . All current mainstream browsers support DIV tags.
Example of web page structure through CSS +DIV layout
<h1>here is the title of the page</h1>
<div>here is the content of the first block of the webpage</div>
<div>here is the content of the second block of the webpage</div>
.. .
</doby>
Each block can use id to write the syntax of CSS externally , like this <div id="content">here is the content of the web page block</div> or directly write style into it, like this <div style="font- size:13px;">Here is the content of the page block</div>.
The DIV tag is a separate block in the browser, and it will occupy a line by itself. If you use two div blocks, similar to the example above, the two div blocks will be arranged from top to bottom, and span The tags can be arranged differently from left to right. The reason is that the browser automatically adds a line break action after the end of each div.
To arrange DIV from left to right, you can use float (floating) syntax to achieve.
Post a Comment
0 Comments