自学1
HTML5新手关于“页面分栏”的练习
小白做的第一个HTML习题
#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属性以前缀（#）开头。