search

Home >Web Front-end >HTML Tutorial >Study notes (5): DIV CSS classic box model accumulation_html/css_WEB-ITnose

Study notes (5): DIV CSS classic box model accumulation_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:27:271011browse

The effect of the box model:

Adjust the width of the faceul, you can adjust the number of each row, adjust the margin value of div1, you can change the overall position, which is useful for layout modes

==================================== =========================

html code:





                                                                                                      How much-->
;
;

                                                                                                                                                                                                                 "/> "/>

                                                                                      1.jpg"/>
1.jpg"/>
"





================================================

CSS code:

*{
margin:0px;
padding:0px;

}

.div1{

width:500px;

height :300px;

border:1px solid gray;

}

.faceul{
width:420px;
height:250px;
border:1px solid red;
}

.faceul li{

list-style-type:none;

float:left;
width:70px;
height:50px;
border:1px solid red;
margin-left:5px;

margin-top:5px;

}

.faceul img{
width:60px;
height:40px;
margin-left:5px;
margin-top:5px;
}



Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Solution to div css webpage displaying blank in IE6??charset_html/css_WEB-ITnoseNext article：Solution to div css webpage displaying blank in IE6??charset_html/css_WEB-ITnose

Related articles

See more