自学1 - 爱码网

HTML5新手关于“页面分栏”的练习
小白做的第一个HTML习题
#1.效果图
自学1 #2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面分栏</title>
    <style type="text/css">
        #main{
            width: 100%;
            height: 460px;
        }
        #n{
            width: 99.3%;
            height: 10%;
            border:solid 1px #666;
        }
        .m{ float: left;
            width: 40%;
            height: 80%;

            border:solid 1px #666;
        }
        .z{
            float: left;
            width: 59%;
            height: 80%;

            border:solid 1px #666;
        }
        #f{
            width: 99.3%;
            height: 10%;
            clear: both;
            border:solid 1px #666;
        }
    </style>
</head>
<body>
<div id="main">
        <div id="n">导航</div>
        <div class="m">菜单</div>
        <div class="z">这里就是你想填写的内容</div>
        <div id="f">这里是底部说明</div>
</div>
</body>
</html>

#3.总结
①border：边框属性，包含 border-width、border-style、border-color。
②float-left：表示页面从左向右排列。clear-both：删除float属性，若#f中不使用该句，则

无法显示
③id与class：核心属性，class属性以前缀（.）开头，id属性以前缀（#）开头。