歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

div css絕對定位布局案例 不規律業務流程CSS布局實例,position布局實例position:absolute,position:relative絕對定位實例布局。關于業務流程不規律布局css div布局實例,采用絕對定位position實現布局。

一般不規律的布局比如此業務流程布局,我們采用css position絕對定位布局可以非常簡單的來實現此網頁布局。

div css絕對定位業務流程布局實例圖
采用div css絕對定位業務流程布局實例圖

一、為什么采用css絕對定位   -   TOP

此案例如果通過普通float浮動定位很難實現,而且會浪費很多代碼,可能通過float:leftfloat:right浮動比較復雜。所以對于這種不規律的DIV布局,建議采用position css絕對定位布局,非常簡單。只需要在ps軟件中測量出子級(服務定義、卡種定義、結算方式定義、結算成功、銷售開單、會員卡辦理)在外層div定位位置(left、right、top、bottom)即可布局出此實例。

二、使用關鍵css樣式單詞及解釋   -   TOP

1、position:relative
父級賦予其定位

2、position:absolute
子級設置其樣式,相等于父級設置定位樣式

3、left、top、right、bottom
對子級設置定位在父級位置

css模塊實例布局代碼中給大家詳細介紹作用用法。

相關教程:
1、css position
2、left、top、right、bottom
3、另外一個CSS絕對定位實例

三、DIV絕對定位案例代碼及解釋   -   TOP

1、實例對應html代碼與解釋

  1. <div id="divcss5"> 
  2. <div class="title"><img src="images/tit.gif" alt="業務流程" /></div> 
  3. <div class="divcss5"> 
  4. <div class="no no1"><a href="#" title="服務定義">服務定義</a></div> 
  5. <div class="no no2"><a href="#" title="卡種定義">卡種定義</a></div> 
  6. <div class="no no3"><a href="#" title="結算方式定義">結算方式定義</a></div> 
  7. <div class="no no4"><a href="#" title="結算成功">結算成功</a></div> 
  8. <div class="no no5"><a href="#" title="銷售開單">銷售開單</a></div> 
  9. <div class="no no6"><a href="#" title="會員卡辦理">會員卡辦理</a></div> 
  10. </div> 
  11. </div> 

首先我們設置一個“id="divcss5"”盒子里放一個裝標題盒子(<div class="title">)和一個裝流程內容的盒子(<div class="divcss5">),而其它的“<div class="no no1">”這些是具體裝流程圖內容。

本實例主要內容是“<div class="divcss5">”內的布局,首先我們將業務流程內容作為“<div class="divcss5">”背景,然后再分別使用六個子div盒子分別裝具體業務流程內容。

2、實例對應CSS代碼與解釋

  1. #divcss5{ margin:0 auto; width:862px} 
  2. /*定位最外層盒子寬度與布局居中(margin:0 auto css布局居中功能)*/ 
  3. #divcss5 .title{ padding-bottom:24px;} 
  4. /*設置裝業務標題盒子距離下一個盒子距離為24px*/ 
  5. #divcss5 .divcss5{ position:relative; background:url(process.gif) no-repeat 0 0; height:361px;} 
  6. /*position:relative聲明絕對定位父級,設置高度361px,寬度默認繼承其父級862寬度,
    將整個流程圖作為圖片設置為背景*/ 
  7. .no{ position:absolute;width:211px; height:49px} 
  8. /*公用六個內容class設置寬度、高度、定位子級*/ 
  9. .no a{ display:block; width:100%; height:100%; text-indent:-9999px} 
  10. /*隱藏超鏈接內文字功能*/ 
  11. .no1{ left:50px; top:0} 
  12. /*定位第一個“服務定義”內容距離父級左邊距離50px、距離上為0距離*/ 
  13. .no2{ left:18px; top:137px} 
  14. /*定位第二個“卡種定義”內容距離父級左邊距離18px、距離上為137px距離*/ 
  15. .no3{ left:60px; top:268px} 
  16. /*定位第三個“結算方式定義”內容距離父級左邊距離60px、距離上為268px距離*/ 
  17. .no4{ right:49px; top:0} 
  18. /*定位第四個“結算成功”內容距離父級右邊距離49px、距離上為0距離*/ 
  19. .no5{ right:17px; top:138px} 
  20. /*定位第五個“銷售開單”內容距離父級右邊距離17px、距離上為138px距離*/ 
  21. .no6{ right:59px; top:268px} 
  22. /*定位第六個“會員卡辦理”內容距離父級右邊距離59px、距離上為268px距離*/ 

以上采用css注釋為大家介紹每段CSS代碼意義與功能。具體left、right、top、bottom定位距離使用ps軟件切片工具準確測量獲得。

CSS絕對定位具體距離值ps切片劃分截圖
DIV+CSS絕對定位具體距離值ps切片劃分截圖

3、絕對定位position案例瀏覽器效果截圖

css絕對定位案例瀏覽器效果截圖
css絕對定位案例瀏覽器效果截圖

四、css position絕對實例在線演示與下載   -   TOP

1、在線演示

查看案例

2、打包下載

 

如需轉載,請注明文章出處和來源網址:http://www.khijtf.live/template/m780.shtml

江西多乐彩走势图今天 现在哪个拼车软件赚钱 ps可以做什么赚钱 海王捕鱼刷金币软件 杭州麻将图解 袁枚赚钱的诗词 到哪卖珍珠赚钱 彩客网游戏 梦幻西游怎么赚钱快109 建筑工程什么项目赚钱 达人彩票网址 能够赚钱的键盘 2019年电脑维修还赚钱吗 yy湖南转转麻将作弊器 卖二手车 赚钱嘛 正点彩票网址 移动云商城推广赚钱吗