>웹 프론트엔드 >HTML 튜토리얼 >学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:27:271009검색

盒子模型的效果:

调整faceul的宽,可以调整每一排摆放的数目,调整div1的margin值,可以改变整体的位置,这是很有用的布局模式

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

html代码:



   


     

 

 


     

         

               
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose


  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose


  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •            
  • 学习笔记(5):DIV+CSS 经典盒子模型 积累_html/css_WEB-ITnose

  •      

   


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

CSS代码:

*{
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;
}

 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.