CSS实例教程：教你怎样定位（组图）

发布时间：2018-08-21 07:47:17 所属栏目：创业来源：站长网

导读：猛火网(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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如