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