|
我们要做任何事情之前一定要有计划，设计页面同样如此，下面我们来看一下如何制作一个静态页面，这里采用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>
怎么样，经过上面的分析后是不是看代码就觉得很简单。那赶快自己配上色去看看效果吧。
(责任编辑：admin) |
