05-div+css布局

97 阅读1分钟

样式设置:

  • 宽度:width
  • 高度:height
  • 背景颜色:background-color
  • 盒子水平居中:margin:0 auto ``
1.  `<head>`
1.  `<style>`
1.  `.header{`
1.  `/* 宽度 px为单位:像素*/`
1.  `/* width: 1920px; */`
1.  `/* 百分比:表示为父盒子的100%显示 */`
1.  `width: 100%;`
1.  `/* 高度 */`
1.  `height: 140px;`
1.  `/* 背景颜色 rgb(255,0,0)*/`
1.  `background-color: rgb(255,0,0);`
1.  `}`
1.  `.center{`
1.  `height: 140px;`
1.  `width: 1160px;`
1.  `background-color: green;`
1.  `/* 使盒子进行水平居中 */`
1.  `margin: 0 auto;`
1.  `}`
1.  `.top{`
1.  `width: 1160px;`
1.  `height: 100px;`
1.  `background-color: blue;`
1.  `}`
1.  `.nav{`
1.  `/* width: 1160px; */`
1.  `width: 100%;`
1.  `height: 40px;`
1.  `background-color: aquamarine;`
1.  `}`
1.  `</style>`
1.  `</head>`
1.  `<body>`
1.  `<div class="header">`
1.  `<div class="center">`
1.  `<div class="top"></div>`
1.  `<div class="nav"></div>`
1.  `</div>`
1.  `</div>`
1.  `<div class="main">内容</div>`
1.  `<div class="footer">尾部</div>`
1.  `</body>`