DIV+CSS布局综述——布局方式

1.用DIV将页面分块

一般页面布局的框架包括:页面容器、页面头部、页面主体和页脚几个部分,每个部分使用ID来表示

页面头部一般包括Logo及导航菜单等一些信息,页面主体主要是网页所要显示的内容、链接及广告等,页脚一般就是网站的信息、版权等内容。

2.设计各块的位置

3.用CSS将分布的DIV定位

<!DOCTYPE html>
<html>
<head>
	<title>DIV</title>
	<style type="text/css">
	body{font-family: Verdana;font-size: 14px;margin: 0;}
	#divmax{margin: 0 auto;width: 100%;}
	#divheader{height: 100px;background: #6cf;margin-bottom: 5px;}
	#divContent{height: 400px;margin-bottom: 5px;}
	#divleft{float: left;width: 45%;height: 400px;background: #9ff; }
	#divright{float: right;width: 55%;height: 400px;background: #cff;}
	#divfoot{height: 50px;background: #6cf;}
	</style>
</head>
<body>
<div id="divmax">
<div id="divheader">页面头部</div>
<div id="divContent">
<div id="divleft">左面页面内容</div>
<div id="divright">右面页面内容</div></div>
<div id="divfoot">页脚</div>
</div>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值