经管之家App
让优质教育人人可得
立即打开
今天给大家分享的web前端教程（http://www.maiziedu.com/course/web/）是非常简单的，通过使用css样式就能实现，实现的效果是将一个页面平均分成四个部分，有一点web前端基础的朋友可以自己试试，运行后对比我给出的代码，这样更利于学习掌握web前端知识。直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将页面平均分成四部分</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
height: 100%;
position: absolute;
}
.quarter-div{
width: 50%;
height: 50%;
float: left;
}
.blue{
background-color: #5BC0DE;
}
.green{
background-color: #5CB85C;
}
.orange{
background-color: #F0AD4E;
}
.yellow{
background-color: #FFC706;
}
</style>
</head>
<body>
<div class="main">
<div class="quarter-div blue"></div>
<div class="quarter-div green"></div>
<div class="quarter-div orange"></div>
<div class="quarter-div yellow"></div>
</div>
</body>
</html>
效果图如上。从代码上看，就是先确定一个占满全屏的div，并设置其position：absolute，而它的四个子div由于左浮动便自动浮动到相应的位置。除了这种方法，当然还有其他的方法可以解决，有兴趣的朋友可以多试试的，学习web前端开发就是要把所学的知识利用起来，用各种方法去解决一个问题，从中总结一些经验，找出更简单、更方便的答案。
扫码加好友，拉您进群
全部版块
我的主页
收藏
