程序员人生网站导航

CSS实例教程：教你如何定位（组图）

栏目：htmlcss时间：2013-12-28 23:06:57

　　网(LieHuo.Net)教程 今天来介绍一下如何通过css定位，与以往不同今天通过看图方式，用css定位布局（LIEHUO.NET转自蓝色理想）。先来看一下需要定位的图片演示：

网(liehuo.net)提示：点击新窗口预览！
(图一)

　　先来看图一，共分为三大部分，分别是：header,wrap与footer，其中在wrap的层中又有四个分层，那么这样的例子如何写呢，请看实际代码：

<!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>CSS实例教程：教你如何定位（组图）-LIEHUO.NET</title><style>*{ margin:0; padding:0}html,body{text-align:center}.fl{float:left} .fr{float:right}.clear{ clear:both;}.header{ width:928px; margin:10px auto; height:25px; border:1px solid #999}.wrap{ width:928px; margin:0 auto;}.ubar{ width:298px;height:400px; border:1px solid #999; }.content{ width:298px; height:400px;border:1px solid #999; margin-left:15px }.footer{width:928px; margin:10px auto 0 ; height:25px; border:1px solid #999}</style></head><body><div class="header">header</div><div class="wrap"><div class="fl ubar">ubar</div><div class="fr ubar">ubar</div><div class="fl content">conter</div><div class="clear footer">footer</div></div></body></html>
提示：可修改后代码再运行!

------分隔线----------------------------

上一篇 CSS3 RGBA 属性高级用法

下一篇 QQ空间没有大众化的三个原因分析

------分隔线----------------------------