如何制作一个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>
怎么样,经过上面的分析后是不是看代码就觉得很简单。那赶快自己配上色去看看效果吧



相关阅读:
javascript 扫雷游戏示例
PHP开源网站程序如何使用的更好
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
PHP 分页类代码(简单好用型)
PHPnow轻松打造专业PHP服务器环境
css自动换行 防止撑破div影响排版
经验总结:VMware虚拟机上安装Linux系统
Append打开指定文件夹中的数据文件就象这些文件在当前文件夹中一样
php 生成静态页面的办法与实现代码详细版
ASP.NET实现数据采集
[HTML/CSS/Javascript]WWTJS
Atlas学习手记(12):使用CascadingDropDown控件
MySQL 5.0触发器参考教程
jquery 查找iframe父级页面元素的实现代码
快速导航

Copyright © 2016 phpStudy |