How to make a simple html layout with ccs

This article will explain in detail how to use ccs to make a simple html layout. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Create a html

Html Editing Code example

2. Define a div headline that contains text and use the class attribute to style.

Top and bottom

3. Between style, initialize the style of body, add the outer margin margin to 0, the inner margin padding to 0, and then use the setting text to center text-align.

Body {text-align: center;margin: 0th padding: 0}

4. Between style, add style to div to set the height of all div to 200px and the color of the content to red.

Div {height: 200pxscape color: red;}

5. Between style, style the title to create the head of the web page using div, set the div center with margin:0 auto, and set its width to 800px and background color to gray.

.title {margin: 0 auto; width: 800px; background-color: # ccc}

6. Between style, use div to create the bottom of the page, and use clear:both to clear the float of the div above, so as to avoid affecting the layout at the bottom. Then use margin:0 auto to center the div, then use to set its width to 800px, and finally the background color to # 000fff.

.footer {clear: both;margin: 0 auto;width: 800px leading clear: both;background-color:#000fff}

7. Open the file in the browser to see the effect of the implementation.

Complete code

Layout body {text-align: center;margin: 0 ccc padding: 0} div {height: 200pxash color: red;} .title {margin: 0 auto;width: 800px; background-color: # ccc} .footer {clear: both;margin: 0 auto;width: 800pxclearty: both Background-color:#000fff} Top and bottom about "how to use ccs to make a simple html layout" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.