CSS样式-页面练习

页面大致分为：

一、页头（header）、导航栏（nav）、内容（content）、页脚（footer）

页面宽度：

一般有960px、1000px、1200px

 

页面布局雏形练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #header,
        #nav,
        #content-main,
        #content-2,
        #content-3,
        #content-4,
        #content-5,
        #content-6,
        #footer {
            width: 960px;
            background-color: #eee;
            border: 1px dashed #ccc;
           /*盒子水平居中*/ 
　　　margin: 0 auto;

            height: 500px;
            margin-bottom: 5px;
        }
        
        #header {
            height: 120px;
        }

        #nav {
            height: 80px;
        }

        #content-main>.left,
        #content-main>.right {
            height: 500px;
            background-color: #f00;
            border: 1px solid #000;
            float: left;
        }
　　/*注意：整体的宽度（本身的width+padding+border+margin）不能超过960px*/
        #content-main>.left {
            width: 318px;
        }

        #content-main>.right {
            width: 628px;
　　　 /*当一个div中有多个div时，最后一个div用float: right;，其余前面所有的用float: left;*/
            float: right;
        }

        #footer {
            height: 100px;
            margin-bottom: 0;
        }

    </style>
</head>
<body>
    <div id="header">header</div>
    <div id="nav">nav</div>
    <div id="content-main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div id="content-2">content-2</div>
    <div id="content-2">content-3</div>
    <div id="content-2">content-4</div>
    <div id="content-2">content-5</div>
    <div id="content-2">content-6</div>
    <div id="footer">footer</div>
</body>
</html>
posted @ 2021-02-27 21:59  #Friday  阅读(151)  评论(0)    收藏  举报