(Transfer) DIV CSS layout tutorial: using ul and li to implement table format_html/css_WEB-ITnose

Let’s first analyze how to make it: li has a fixed width and height (cell). Set li to float in ul. When ul is not wide enough, li will automatically be arranged in a new row. (The width of ul can be obtained by calculating how many columns there are in a row. For example, if there are four columns in a row and one column is 100px wide, then the width of ul is 400px plus a certain margin). This achieves an effect similar to a table, or we use UL LI to simulate the effect of a table. Let’s start writing HTML code:

Example Source Code [www.52css.com]

< li class="biaotou">The first column
 
• The second column

 
• The third column

 
• The fourth column

 
• Data 1-1

 
                                                         ;/li>
                                                            🎜>                                                                                                 ;Data 3-4
                                                          ;/li> Class biaotou. Because these four items are the header of the table, they should be different from the table data. Therefore, a separate class is assigned for easy control. Next we start writing CSS code:



Example Source Code [www.52css.com]

* {
margin:0;
padding: 0;
font-size:12px;
color:#000;
}

CSS overall layout declaration, margins are zero, padding is zero, text size is 12px , the text color is black #000;




Example Source Code [www.52css.com]

#biaoge {

width:405px;
margin :50px auto;
}


The CSS code of ul whose ID is biaoge, the width is 405px (one column 100px*4 column li margins), the top and bottom margins are 50px, and the left and right margins are automatic , to achieve horizontal center alignment.



Example Source Code [www.52css.com]


#biaoge li,#biaoge li.biaotou {

list-style-type:none;

width:100px;

height:30px;
line-height:30px;
text-align:center;
float:left;

margin-left:1px; margin-bottom:1px;
background:#ccc;
}



Define the style of each list item li (i.e. cell), set the default mark of the list item to None, the width and height are 100px and 30px respectively. In order to center the text vertically in the li, set the line height to 30px. The text is centered horizontally. Set it to float to the left, and the left margin and bottom margin are both 1px, achieving the effect of a simple table line. (If the table line is designed as a border, many CSS HACKs are difficult to control and adjust, especially in FF, which is extremely abnormal. It is not recommended to use border to implement this type of ulli definition of table lines!) Set the background color to light gray# ccc.



Example Source Code [www.52css.com]

#biaoge li.biaotou {
background:#999;
}


We set the background color of the four "header" li's to dark gray #999 to distinguish them from other li's. Our style definition is basically complete. You can make some other beautifications to it in terms of color.

Finally, we declare again that tabular data is best implemented using tables. To comply with WEB standards, you do not have to stick to not using tables at all. However, under appropriate circumstances, you can use the method in this case to achieve something similar to The layout of the table,