如何制作一个div+css静态页面


我们要做任何事情之前一定要有计划,设计页面同样如此,下面我们来看一下如何制作一个静态页面,这里采用div+css方式制作

首先我们来看一下我们要做的页面的布局

 

我们可以发现这个页面由5个div组成,一个三列的页面,5个盒子进行排列

我们来看一下代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.main{ width:500px; margin:0 auto;}
.left{ width:100px; float:left; height:400px;}
.right{ width:390px; float:right; height:}
.right_one{ width:300px; float:left; height:400px;}
.right_two{ width:80px; float:right; height:400px;}
.clear{ clear:both;}
</style>
</head>

<body>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="right_one"></div>
<div class="right_two"></div>
</div>
</div>
</body>
</html>
怎么样,经过上面的分析后是不是看代码就觉得很简单。那赶快自己配上色去看看效果吧


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3