There is no Div + CSS layout at all.

ArticleDirectory

• IMG
• A
• Ul, ol
• DL
• Form, input
• Table
• Div, span

Do you have <Table/> obsessive-compulsive disorder? In these two articles, I have seen many comments that use Div + CSS layout to compare them with table layout. In fact, div is not used for layout. Div is only used to represent a block area where other elements cannot accurately express semantics. Only CSS is used for layout, therefore, there is no such thing as Div + CSS layout. In turn, table layout often relies on CSS to define the layout attribute of a cell, so it can be said that it is a table + CSS layout. That is to say, the two mainstream layout methods we discuss should be pure CSS layout and table + CSS layout. If you think you are using Div + CSS layout, you may also have obsessive-compulsive disorder.

Next, let's talk about how to perform a pure CSS layout. Because CSS layout depends on XHTML, we should first talk about how to write a CSS-independent XHTML. In fact, writing CSS-independent XHTML is not difficult, although you can no longer seem to be writing table layoutCodeIn this way, we concentrate on the most important visual effects, but the difficulty is just written by middle school students.CompositionThat way.

How do middle school students write compositions? First, let's look at the question, and then think about the major sections in the entire article, what each section says, and what you want to say. For XHTML, this is equivalent to using Div to cut the document into several blocks. At this time, you should not think about how these divs will build a Dom, CSS, how to choose the DOM element setting rules to implement layout and so on, just divide the large area of the document.

Then, of course, some common techniques are used to express feelings or arguments. In XHTML, specific elements are used to organize common information. The following is a list of information organization forms and elements.

IMG

Images that serve as content must be placed in IMG, so there is no better choice. However, if the image is not as the content but as the decoration, never use IMG. For non-content images, they should be referenced in CSS instead of appearing in XHTML. For example, if each navigation link has a leading arrow, these arrows should be added through the background-image attribute of CSS, rather than directly appearing as IMG.

A

This is also a very accurate definition of the element, the link needs to use it. Some people may have forgotten that the intention of A is the anchor. In fact, this is a very useful syntax. You can use it to mark some important references in the document.

Ul, ol

What does UL and ol respectively mean? If you cannot answer the question, but you know what they can do, it proves that you are spoiled by visualization tools. to convert them to compile the semantic-compliant XHTML, you need to add basic knowledge first, at this time, you 'd better first look for some XHTML books that look very basic and comprehensive, because without a solid foundation, you cannot build more knowledge on them. UL and ol represent the unordered list and ordered list respectively, that is, the unordered list and the ordered list. In terms of semantics, they are all used to represent the content of a kind of parallel relationship. For example, a shopping list is at the top of the store for shopping. What we want to buy above is a parallel relationship, you can use the comma to separate Chinese characters. The difference between them is whether there is order. For example, the shopping list has no order. It doesn't matter what you buy first, however, the list of scenic spots on a travel itinerary is sequential.

Ul is often used in the navigation bar. Because the navigation elements conform to the parallel relationship mentioned above, the tree navigation structure can also be expressed by nested ul. Here, navigation can be our common horizontal or vertical navigation bar, or even map navigation. For example, on a map in China, different provinces have different hot zones. If I say that in mainstream browsers, users can see the map of China and click the province hot zone directly. In browsers that do not support CSS, users can see a list of province names in plain text, the same XHTML file is used, which is completely implemented through CSS and does not depend on JavaScript. Do you believe this?

In addition, if you want to display a thumbnail of a gallery, these images can also be placed in UL, because these images are also tied. They can be automatically lined up first, and the second row will be automatically arranged when the row is full. CSS can let them wait in line without setting the picture to a grid as if it were a table. In fact, table is used for layout, just like holding content in jail, locking the content in a grid won't let it run around. The semantic-compliant XHTML is like an open stage, as long as you know how to use CSS rules, the content will naturally find a suitable place to stand.

DL

Have you heard of DL? Because the DL is never displayed in the code generated by those visualization tools? DL indicates the definition list, that is, the definition list. It contains not li, but DT and DD, that is, definition term and definition description. DL is designed as a dictionary word and interpretation list, for example:
<DL>
<DT> Apple </DT>
<DD> Apple </DD>
<DT> boy </DT>
<DD> boy </DD>
</Dl>

However, if the semantics you need to represent is similar, and a list contains both definitions and explanations, you can also consider using DL.

Form, input

Form is also a form. There is nothing to say about it. Even if the semantic person does not take into account the influence of it and various inputs on the submitted data when writing XHTML, he or she should be careful.

Table

Table is used to represent tables! If it is a data table, you can use table to represent it, but if it is not, you 'd better not use table.

What about the name list? For example, a name list with three rows and four columns. If these 12 people are in a parallel relationship, I suggest you use UL and 12 Li to represent them, and then use CSS to show them multiple in a row. What about the business card table? That is, three rows and eight columns, each of which has two columns. The left column shows the contact information, such as the telephone address, and the right column shows the contact information. I think DL can meet this requirement to a certain extent. dt puts people's names and DD puts contact information, but this involves the debate on DL abuse, this is because the definition and interpretation of personal names and contact information are far-fetched.

Next, I will ask you a little question about whether you have learned XHTML, that is, do you know what the caption, Col, colgroup, thead, tbody, tfoot element, and summary attributes under the table are used to define, the other is whether you use thead and tbody when writing a table.

Div, span

Review the list again. If you need to indicate a block area, but you cannot find a more suitable element, then you can consider using the DIV and span elements with no semantics. The difference between Div and span is not mentioned in history. Currently, div is usually used for large areas and span is used for small text fragments in rows. As I have mentioned above, div is generally used for global partitioning into several large areas, so it is generally not needed. In fact, span is rarely used, because in-row stresses can usually be used with more semantic elements such as strong and em.

After understanding the many common elements mentioned above, it is as easy to write an XHTML file as a middle school student writes a text file, in fact, it is no different from the previous use of extensible tools to build blocks. The only difference is that now you understand what you are building, in the past, you only care about setting up the visual effects you want. Writing code is similar to writing a composition, because the more you write, the more skilled you are, the better you can write good things. After writing XHTML, we should begin to consider how to write CSS. We may also need to make slight modifications in XHTML to facilitate the selection and matching of CSS rules, but this will be discussed later, let's talk about it today.

Finally, if you are interested in reading my post on CSS, consider subscribing to my blog:

• CAT in Chinese (feed: http://feeds.feedburner.com/CatChen/Chinese)
• CAT in DOTNET (feed: http://feeds.feedburner.com/CatChen/dotNET)