div+css实现window xp桌面图标布局（至上而下从左往右）_html/css

首頁

web前端

html教學

div+css实现window xp桌面图标布局（至上而下从左往右）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:28 PM

前不就公司项目要求做一个比较蛋疼的布局，类似于window xp桌面图片布局方式，而且要求尽量不要用嵌入js脚本，用纯div+css布局，在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器，别的不多说，直接上代码。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8"/> 5 <title>window xp桌面图标布局</title> 6 <style> 7 html,body{ margin:0; border:0; padding:0; width:100%; height:100%; } 8 .parent{ display:block; background:gray; width:100%; height:100%; } 9 .parent{10     -webkit-column-width:100px; 11     -moz-column-width:100px;12     -webkit-column-gap:0px; 13     -moz-column-gap:0px;14 }15 .parent{ writing-mode: tb-lr; }/*ie8 竖直排列*/16 .parent{ *white-space:nowrap;}17 18 .child{ 19     display:inline-block; 20     *display:inline; 21     margin:10px 10px 10px 10px; 22     border:5px solid black; 23     padding:5px; 24     width:50px; 25     height:50px; 26     text-align:center; 27     background:lightblue;    28 }29 .child{ writing-mode: lr-tb; } /*ie8 竖直排列*/30 </style>31 </head>32 <body>33 <div class="parent">34     <div class="child">1</div>35     <div class="child">2</div>36     <div class="child">3</div>37     <div class="child">4</div>38     <div class="child">5</div>39     <div class="child">6</div>40     <div class="child">7</div>41     <div class="child">8</div>42     <div class="child">9</div>43     <div class="child">10</div>44     <div class="child">11</div>45     <div class="child">12</div>46     <div class="child">13</div>47 48     <div class="child">14</div>49     <div class="child">15</div>50     <div class="child">16</div>51     <div class="child">17</div>52     <div class="child">18</div>53     <div class="child">19</div>54     <div class="child">20</div>55     <div class="child">21</div>56     <div class="child">22</div>57     <div class="child">23</div>58 </div>59 </body>60 </html>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7885

Java教學

1649

CakePHP 教程

1410

Laravel 教程

1301

PHP教程

1245

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。