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

DIV CSS布局圖文列表布局案例 ul li圖文列表

使用div css ul li布局圖文列表小局部案例,學習圖文列表布局實際案例。

div+css圖文布局案例圖
div+css圖文布局案例圖

本案例在DIVCSS5模板基礎上進行(讓開發項目或案例兼容更好),采用ul li列表標簽+css布局,簡單易學易懂。

一、css實例布局思維分析   -   TOP

1、ul li列表布局選擇。因為此CSS DIV布局實例是典型列表型布局,可以將每個li里放入一組圖片和標題。
2、對ul設置好總css寬度;對ul里li設置好寬度并且浮動靠左(float:left)這樣讓li并列顯示,一排顯示不完自動換行繼續顯示圖文li內容。
3、獲得高度寬度。PS軟件獲取li內容寬度(間距錯外)寬度為160px,圖片寬度為160px,css高度為90px。
4、每個li上下左右有相同間距,所以要獲取一組圖文與相鄰圖文的間距距離。我們采用對li使用padding設置間距(使用PS軟件測的padding:6px 8px的值)

以上分析我們采用ul li布局,li里放上圖片下文字(圖片使用img標簽,文字使用span盒子包裹,同時設置span背景色)。

二、準備素材   -   TOP

1、DIVCSS5初始化模板
為了兼容各大瀏覽器,開發案例或項目建議下載使用。使用前先修改預先設置的樣式(DIVCSS5初始化模板)。

2、圖片素材
主要是使用PS切出所需內容圖片素材。(已經放入images文件夾)

三、案例詳細代碼與效果截圖   -   TOP

1、CSS代碼

  1. ul.imglist{ margin:0 auto; width:536px; overflow:hidden} 
  2. ul.imglist li{ float:left; padding:4px 8px; width:160px} 
  3. ul.imglist li img{ display:block; width:160px; height:90px} 
  4. ul.imglist li span{ display:block; width:100%; height:30px; line-height:30px; background:#F6F6F6} 

2、主要HTML代碼

  1. <ul class="imglist"> 
  2. <li>
  3. <a href="#" target="_blank">
  4. <img src="images/i160x90.jpg" />
  5. <span>自制快手糟黃瓜 吃完整個</span>
  6. </a>
  7. </li> 
  8.  
  9. <li>
  10. <a href="#" target="_blank">
  11. <img src="images/i160x90-2.jpg" />
  12. <span>標題內容 吃完整個</span>
  13. </a>
  14. </li> 
  15. <li>
  16. <a href="#" target="_blank">
  17. <img src="images/i160x90-3.jpg" />
  18. <span>自制快手糟黃瓜 吃完整個</span>
  19. </a>
  20. </li> 
  21. <li>
  22. <a href="#" target="_blank">
  23. <img src="images/i160x90-2.jpg" />
  24. <span>自制快手糟黃瓜 吃完整個</span>
  25. </a>
  26. </li> 
  27. <li>
  28. <a href="#" target="_blank">
  29. <img src="images/i160x90.jpg" />
  30. <span>自制快手糟黃瓜 吃完整個</span>
  31. </a>
  32. </li> 
  33. <li>
  34. <a href="#" target="_blank">
  35. <img src="images/i160x90-2.jpg" />
  36. <span>自制快手糟黃瓜 吃完整個</span>
  37. </a>
  38. </li> 
  39. </ul> 

3、效果截圖

實際CSS圖文列表實例在瀏覽器中效果截圖
實際CSS圖文列表實例在瀏覽器中效果截圖

四、關鍵代碼解釋   -   TOP

1、CSS關鍵樣式單詞解釋

1)、ul.imglist{ margin:0 auto; width:536px; overflow:hidden}
使用margin:0 auto,讓ul結構布局居中;
使用overflow:hidden,因為ul的子級使用float屬性會產生浮動,所以使用清除子級使用float對父級產生不能撐開問題;
使用寬度width:536px;固定寬度讓子級li準確一排只排3個效果

2)、ul.imglist li{ float:left; padding:4px 8px; width:160px}
float:left,讓li靠左開始并列;
padding:4px 8px設置li與li盒子之間間距;
width:160px 必須設置固定好li寬度(寬度值通過ps軟件的切片工具測得)

3)、ul.imglist li img{ display:block; width:160px; height:90px}
display:block對圖片設置獨占一行;
width:160px; height:90px必須固定設置好圖片高度寬度

4)、ul.imglist li span{ display:block; width:100%; height:30px; line-height:30px; background:#F6F6F6}
display:block讓span設置寬度高度生效同時獨占一行效果;
width:100%; height:30px; 設置寬度和高度,寬度100%會繼承父級li寬度相等于設置(160px寬度,設置100%寬度好處是隨父級寬度而自動計算出100%寬度與父級寬度保持一致);
line-height:30px; 設置文字在30px中垂直居中;
background:#F6F6F6設置span背景顏色

2、HTML關鍵點
使用ul li組合列表標簽布局,每個li盒子放圖片+文字標題內容,li盒子直接使用a超鏈接標簽將圖片和文字內容包裹著,使用img標簽引入圖片,使用span標簽與img形成兩個盒子而CSS分別設置獨占一行功能效果的樣式(display:block),避免文字和圖片排成一排而非上下結構。

五、在線演示與打包下載   -   TOP

1、在線瀏覽

查看案例

2、打包下載

通過本CSS DIV實例學會對圖文布局思路到技巧掌握,靈活運用到你的項目中。

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

江西多乐彩走势图今天 腾讯答题赚钱的 天刀游侠如果赚钱 聚游公社靠什么赚钱 遵义 卖什么比较赚钱 彩票2元网苹果 新型农业不赚钱项目 赖子麻将怎么打 聊天还能赚钱哦 腾讯自媒体和头条号哪个赚钱 海王捕鱼2无限金币版 茗创优选商城赚钱吗 中原河北麻将下载 代理企业社保赚钱吗 收卡怎么赚钱吗 彩38彩票网址 学历低学什么手艺最赚钱