您當前位置：首頁 > web前端 > htmlcss > CSS實例教程：教你如何定位（組圖）

CSS實例教程：教你如何定位（組圖）

來源：程序員人生發布時間：2013-12-28 23:06:57 閱讀次數：3689次

　　網(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空間沒有大眾化的三個原因分析

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

CSS實例教程：教你如何定位（組圖）