＜div＞+css布局页面

css样式

body,img,ul,li{
    padding: 0px;
    margin: 0px;
}
#header {
    width: 100%;
    height: 40px;
  border-bottom: 1px solid #ccc;
    /* background-color: aquamarine; */
}
.header {
    width: 1200px;
    height: 40px;  
    /* 实现块状元素居中 */
    margin: 0px auto;
    /* 定义边框 */
     border: 1px solid red; 
    
    /* background-color: black; */
}
.header-left {
    width: 400px;
    height: 40px;
    border: 1 solid black;
    /* background-color: aqua; */
    float: left;
}
.header-right {
    width: 400px;
    height: 40px;
    /* background-color: pink; */
    float: right;
    border: 1px solid gold;
}
/* 头部样式初步结束 */
/* logo样式开始 */
 #logo{
     width: 1200px;
     height: 120px;
     border: 1px solid red;
     margin: 10px auto;
 }
 .logo_left {
   width: 300px;
   height: 120px;
   border: 1px solid pink;
   float: left;
}
.logo_right {
    width: 300px;
   height: 120px;
   border: 1px solid blue;
   float: right;
} 
/* nav开始 */
#nav{
   width: 1200px;
   height: 45px;
   border: 1px solid rosybrown;
   margin: 10px auto;
}
.nav_left {
    width: 300px;
    height: 45px;
    border: 1px solid red;
    float: left;
}
.nav_center {
    width: 700px;
    height: 45px;
    border: 1px solid red;
    float: left;
}
.nav_right {
    width: 150px;
    height: 45px;
    border: 1px solid rebeccapurple;
    float: right;
}
/*banner开始  */
#banner {
    width: 100%;
    height: 516px;
    background: #f4f4f4;
    /* 相对定位 */
    position: relative;
}
#p_content {
    width: 1200px;
    height: 516px;
    border: 1px solid black;
    /* 绝对定位 */
     position: absolute;
     top: 0px;
     /* 居中 使用calc计算属性 */
     left: calc(50% - 1200px/2);
}
.banner_nav {
    width: 240px;
    height: 516px;
    border: 1px solid red;
    float: left;
}
.banner_right {
    width: 950px;
    height: 516px;
    border: 1px solid red;
    float: right;
}<