2020-03-10

CSS和HTML结合方式

      /*清除默认样式*/

      *{

        margin: 0;

        padding: 0;

      }

      /*设置头部*/

      .header{

        /*设置宽度*/

        widths: 1000px;

        /*width: 100%;*/

        /*设置高度*/

        height: 50px;

        /*设置背景颜色*/

        background-color: #a2e0e9;

        /*设置居中(上下外边距为0,左右外边距最大为居中)*/

        margin: 0 auto;

      }

  .header2{

  /*设置宽度*/

        widths: 1000px;

        /*width: 100%;*/

        /*设置高度*/

        height: 80px;

        /*设置背景颜色*/

        background-color: white;

        /*设置居中(上下外边距为0,左右外边距最大为居中)*/

        margin: 0 auto;

}

      /*设置主体内容*/

      .content{

        /*设置宽度*/

        widths: 1000px;

        /*设置高度*/

        height: 500px;

        /*设置背景颜色*/

        background-color: white;

        /*设置居中*/

        margin: 10px auto;

      }

      .left{

        width: 200px;

        height: 80%;

        background-color: white;

        /*向左浮动*/

        float: left;

      }

      .center{

        width: 850px;

        height: 100%;

        background-color: white;

        float: left;

        /*上下外边距为0,左右各10px*/

        margin: 0 10px;

      }

      .up{

        width: 1100px;

        height: 70%;

        background-color: darkblue;

      }

      /*设置底部信息*/

      .footer{

        /*设置宽度*/

        widths: 1000px;

        /*设置高度*/

        height: 50px;

        /*设置背景颜色*/

        background-color: white;

        /*设置居中*/

        margin: 0 auto;

      }

你可能感兴趣的:(2020-03-10)