css-項目布局 - 草稿

頁面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        .box{
            width: 800px;
            height: 100px;
            background-color: blue;
            margin: 10px auto;

        }
        .box1{
            width: 800px;
            height:600px;
            background-color: pink;
            margin:10px auto;
        }
        .box3{
            width: 170px;
            height: 300px;
            background-color: gold;
            float: left;
            margin: 10px;

        }
        .box4{
            width: 170px;
            height: 300px;
            background-color: gold;
            float: left;
            margin: 10px;

        }
        .box5{
            width: 400px;
            height: 300px;
            background-color: green;
            float: left;
            margin: 10px;

        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class='box1'>
        <div class="box3"></div>
        <div class="box5"></div>
        <div class="box4"></div>

    </div>
</body>
</html>
image.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1贊 92
  • 1. 前言 前端圈有個“梗”：在面試時，問個css的position屬性能刷掉一半人，其中不乏工作四五年的同學。在...
    YjWorld閱讀 4,528評論 5贊 15
  • 前言 現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔。或許是職責越來越大，整體的前端井噴式的發展，使...
    Layzimo閱讀 793評論 1贊 9
  • 前言 現在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁面仔。或許是職責越來越大，整體的前端井噴式的發展，使...
    Calvin李閱讀 506評論 0贊 0
  • 教師節前夕，收到了一位2017屆畢業生的來信。很是感動！ 信的全文如下： 親愛的吳老師: 教師節快樂! 我真的十分...
    吳老師教語文閱讀 678評論 2贊 9