08固定宽度且居中布局.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
             padding: 0;
             margin: 0;
       }

       .top,
       .banner,
       .main,
       .footer {
              width: 960px;
              text-align: center;
              margin: 0 auto;
              border: 1px solid #ccc;
              margin-bottom: 10px;
       }

       .top {
              height: 80px;
              background-color: pink;
       }

       .banner {
               height: 120px;
               background-color: blue;
       }

       .main {
              height: 500px;
              background-color: skyblue;
       }

       .left {
             width: 300px;
             height: 500px;
             background-color: purple; 
             float: left;
       }

       .right {
              width: 600px;
              height: 500px;
              background-color: gray;
              float: right;
       }

       .footer {
               height: 140px;
               background-color: #000;
       }


    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

 09通栏分布型.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       * {
             padding: 0;
             margin: 0;
       }

       ul {
              list-style: none; /*取消列表的默认样式圆点*/
       }

       .top {
              height: 80px;
              width: 100%;
              background-color: pink;
       }

       .banner {
               width: 960px;
               height: 120px;
               margin: 20px auto;
               border-radius: 15px;
               background-color: blue;
       }

       .main {
              width: 960px;
              margin: 0 auto;
              height: 500px;
              background-color: skyblue;
       }

       .main li {
           width: 240px;
           height: 500px;
           background-color: red;
           float: left;
       }

       .main li:nth-child(even) {
              background-color: green;
       }

       

       .footer {
               height: 140px;
               background-color: #000;
       }


    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="footer"></div>
</body>
</html>

 

posted on 2019-06-22 12:13  HiJackykun  阅读(91)  评论(0编辑  收藏  举报