CSS 基础学习-144 css 制作web布局实例

hrs 提交于 2021/11/02 - 07:45 , 周二

实例代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        .man_box{
          width:800px;
        }
        .top_head{
          height:150px;
          background-color:gray;
          font-size:30px;
          color:white;
          display:flex;
          justify-content:left;
          align-items:center;
          padding:10px;
        }
        .list_box{
          width:150px;
          float:left;
                  }
        ul{
            list-style-type:none;
            margin:0;
            padding:0;
        }
        li{
          margin-bottom:8px;
          padding:8px;
          background-color:#33b5eb;
        }
        a{
        text-align:left;  
        color:white;  
        text-decoration:none;
        }
        li:hover{
          background-color:blue;
        }          .content_box{
            width:650px;
            float:right;
          }
        .footer_box{
          display:flex;
          justify-content:left;
          align-items:center;
          background-color:gray;
          height:100px;
          color:white;
          clear:both;
          padding:10px;
        }
        .content_p{
          font-size:20px;
          text-indent:2em;
          padding:10px;
        }
    </style>
  </head>
  </body>
      <h1>web 布局实例</h1>
      <div class="man_box">
        <div class="top_head">
          <div>ShanHai</div>
        </div>
      <div class="list_box">
          <ul>
            <li><a href="https://www.dwoke.com">The Flight</a></li>
            <li><a href="https://www.dwoke.com">The City</a></li>
            <li><a href="https://www.dwoke.com">The Attractions</a></li>
            <li><a href="https://www.dwoke.com">The Food</a></li>  
          </ul>
    </div>
      <div class="content_box">
        <h1 style="text-align:center;">This Is Content Title!</h1>
        <p class="content_p">  this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content. this is some content.this is some content.</p>
      </div>
      <div class="footer_box">
        <p class="fotter_p">Fotter text</p>
      </div>
      </div>
  </body>
</html>
                                                                                      


运行效果:

css-144.png

标签