样式设置:
- 宽度:
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>`