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

发布时间：2018-08-24 17:41:03 所属栏目：经验来源：站长网

导读：烈火网(LieHuo.Net)教程今天来介绍一下如何通过css定位，与以往不同今天通过看图方式，用css定位布局（LIEHUO.NET转自蓝色理想）。先来看一下需要定位的图片演示： (图一) 先来看图一，共分为三大部分，分别是：header,wrap与footer，其中在wrap的层中又

　　烈火网(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>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

元宇宙大爆炸，虚拟偶	从科教大市迈向科创强
摩尔线程首颗国产全功	安徽省博士后创新创业