Recently I have written some layout code. Out of improving work efficiency, I am going to share these codes and continue to improve them later. In the end, all these codes are templated, so I hope you will not be enlightened. Thank you.
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Body>
<Div style = "width: 950px; height: 600px; color: #999999; margin: 0px; padding: 0px; float: left;">
<Div style = "width: 950px; height: 100px;">
</div>
<Div style = "margin-left: 0px; float: left;">
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
</Div>
<Div style = "margin-left: 0px; float: left;">
<Div style = "margin-left: 0px; width: 291; height: 142; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 254; height: 142; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 133; height: 142; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 272; height: 142; border: 0px; float: left;">
</div>
</Div>
<Div style = "margin-left: 0px; float: left;">
<Div style = "margin-left: 0px; width: 192; height: 202; border: 0px; float: left;">
<Div style = "margin-left: 0px; margin-top: 0px">
</Div>
<Div style = "margin-left: 0px; margin-top: 0px">
</Div>
</Div>
<Div style = "margin-left: 0px; width: 301; height: 202; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 144; height: 202; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 83; height: 202; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 228; height: 202; border: 0px; float: left;">
</div>
</Div>
</Div>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Body>
<Div style = "width: 950px; height: 600px; color: #999999; margin: 0px; padding: 0px; float: left;">
<Div style = "width: 950px; height: 100px;">
</div>
<Div style = "margin-left: 0px; float: left;">
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 323; height: 153; border: 0px; float: left;">
</div>
</Div>
<Div style = "margin-left: 0px; float: left;">
<Div style = "margin-left: 0px; width: 291; height: 142; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 254; height: 142; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 133; height: 142; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 272; height: 142; border: 0px; float: left;">
</div>
</Div>
<Div style = "margin-left: 0px; float: left;">
<Div style = "margin-left: 0px; width: 192; height: 202; border: 0px; float: left;">
<Div style = "margin-left: 0px; margin-top: 0px">
</Div>
<Div style = "margin-left: 0px; margin-top: 0px">
</Div>
</Div>
<Div style = "margin-left: 0px; width: 301; height: 202; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 144; height: 202; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 83; height: 202; border: 0px; float: left;">
</div>
<Div style = "margin-left: 0px; width: 228; height: 202; border: 0px; float: left;">
</div>
</Div>
</Div>
</Body>
</Html>
Previously, I arranged these images in the format, and found that there was always an interval of about three pixels between the elements, so I promptly used the margin-left: 0; it cannot be changed. Later, you added the and <div> </div> elements. Conclusion: You can use <div> </div> for seamless arrangement.
Below is: