首頁 > 開發者 > CSS

一步步教你實現純CSS的直條圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CSS在處理排版之強大，沒有做不到，只有想不到。下面我們將一同實現一個柱狀圖。

先打好一個具體的架構。我們利用無序列表做整體，裡面的東西我們根本選擇內聯無素span，strong，em來填充。

<br /> <ul class="chart"><br /> <li><em>使命召喚</em><span>: </span><strong>35%</strong></li><br /> <li><em>機器戰爭</em><span>: </span><strong>40%</strong></li><br /> <li><em>CS</em><span>: </span><strong>87%</strong></li><br /> <li><em>光環</em><span>: </span><strong>45%</strong></li><br /> <li><em>半條命</em><span>: </span><strong>23%</strong></li><br /> </ul><br />

運行代碼

    <ul class="chart">      <li><em>使命召喚</em><span>： </span><strong>35%</strong></li>      <li><em>機器戰爭</em><span>：</span><strong>40%</strong></li>      <li><em>CS</em><span>：</span><strong>87%</strong></li>      <li><em>光環</em><span>：</span><strong>45%</strong></li>      <li><em>半條命</em><span>：</span><strong>23%</strong></li>    </ul>

解釋一下，ul裡面的每一個li就代表我們要統計的內容，span為柱身，em為統計項的名字，strong為統計數值。我們可以添加一些背景顏色來區分他們。

   .chart {        list-style: none;        font-family: '宋體';        font-size: 14px;        border: 1px solid #ccc;        margin: 0;        padding: 5px;        background:#F2F1D7;      }      .chart li {        width:400px;        background:#DDF3FF;      }

<br /> <style type="text/css"><br /> .chart {<br /> list-style: none;<br /> font-family: '宋體';<br /> font-size: 14px;<br /> border: 1px solid #ccc;<br /> margin: 0;<br /> padding: 5px;<br /> background:#F2F1D7;<br /> }</p><p> .chart li {<br /> width:400px;<br /> background:#DDF3FF;<br /> }<br /> </style></p><p> <ul class="chart"><br /> <li><em>使命召喚</em><span >: </span><strong>35%</strong></li><br /> <li><em>機器戰爭</em><span >: </span><strong>40%</strong></li><br /> <li><em>CS</em><span >: </span><strong>87%</strong></li><br /> <li><em>光環</em><span >: </span><strong>45%</strong></li><br /> <li><em>半條命</em><span >: </span><strong>23%</strong></li><br /> </ul><br />

運行代碼

但怎樣把li弄成柱狀呢？我們首先把li弄成並排顯示，要達到這種效果，我們有兩個方法：1、把li的display變成inline，2、把li變成浮動元素。估量一翻，選擇了後者，因為內嵌元素的盒子模型是難以控制的，margin與padding的計算會變得很複雜。既然選擇後者，我們必須面對一個情況，就是浮動溢出了。對策是父元素也變成浮動元素。浮動容器會向內收縮，自適應子項目的高度與寬度。也就是說，我們專註於li的設計就可以了！為了讓li表現得像柱子， 我們讓它的高比寬長很多，同時為了讓大家好辯認每個li的範圍，我先給它們加上邊框！

      .chart {        list-style: none;        font-family: '宋體';        font-size: 14px;        border: 1px solid #ccc;        margin: 0;        padding: 5px;        background:#F2F1D7;        float:left;      }      .chart li {        width:70px;        height:300px;        float:left;        background:#DDF3FF;        border:1px solid red;      }

<br /> <style type="text/css"><br /> .chart {<br /> list-style: none;<br /> font-family: '宋體';<br /> font-size: 14px;<br /> border: 1px solid #ccc;<br /> margin: 0;<br /> padding: 5px;<br /> background:#F2F1D7;<br /> float:left;<br /> }</p><p> .chart li {<br /> width:70px;<br /> height:300px;<br /> float:left;<br /> background:#DDF3FF;<br /> border:1px solid red;<br /> }<br /> </style><br /> <script type="text/javascript"></p><p> </script><br /> <title>非法修改button的onclick事件</title><br /> </head><br /> <body><br /> <ul class="chart"><br /> <li><em>使命召喚</em><span ></span><strong>35%</strong></li><br /> <li><em>機器戰爭</em><span ></span><strong>40%</strong></li><br /> <li><em>CS</em><span ></span><strong>87%</strong></li><br /> <li><em>光環</em><span ></span><strong>45%</strong></li><br /> <li><em>半條命</em><span ></span><strong>23%</strong></li><br /> </ul><br />

運行代碼

接著我們要差開li元素裡面的內容，由於它們都是內嵌元素，因此給他們設高與寬是沒有意義，我們得把他們偽裝成塊元素。這時它們就會各自獨佔一行。由於我們把span中的冒號刪除了，裡面為空白，span就表現為不佔空間，我們可以給它們塞點東西進去，我塞的是&#30;，當然你們在textarea中是看不到的，要利用Firefox的查看元素功能才行。(你們自己可以查一下&#30;，&#32;，&#160;，&emsp;與&ensp;的區別！)

      .chart {        list-style: none;        font-family: '宋體';        font-size: 14px;        border: 1px solid #ccc;        margin: 0;        padding: 5px;        background:#F2F1D7;        float:left;      }      .chart li {        width:70px;        height:300px;        float:left;        background:#DDF3FF;        border:1px solid red;      }      .chart li em ,      .chart li span ,      .chart li strong {         display:block;      }

<br /><style type="text/css"> .chart { list-style: none; font-family: '宋體'; font-size: 14px; border: 1px solid #ccc; margin: 0; padding: 5px; background:#F2F1D7; float:left; }</p><p> .chart li { width:70px; height:300px; float:left; background:#DDF3FF; border:1px solid red; } .chart li em , .chart li span , .chart li strong { display:block; } </style><ul class="chart"><li><em>使命召喚</em><strong>35%</strong></li><li><em>機器戰爭</em><strong>40%</strong></li><li><em>CS</em><strong>87%</strong></li><li><em>光環</em><strong>45%</strong></li><li><em>半條命</em><strong>23%</strong></li></ul><p>

運行代碼

接著我們把柱子占的空間突現出來，並把相關的東西置中對齊一下。

      .chart {        list-style: none;        font-family: '宋體';        font-size: 14px;        border: 1px solid #ccc;        margin: 0;        padding: 5px;        background:#F2F1D7;        float:left;      }      .chart li {        width:70px;        height:300px;        float:left;        background:#DDF3FF;        border:1px solid red;      }      .chart li em {        display:block;        height:20px;        text-align:center;      }      .chart li span {        display:block;        background:#F1FAFA;        height:260px;      }      .chart li strong {        display:block;        height:20px;        text-align:center;      }

<br /> <style type="text/css"><br /> .chart {<br /> list-style: none;<br /> font-family: '宋體';<br /> font-size: 14px;<br /> border: 1px solid #ccc;<br /> margin: 0;<br /> padding: 5px;<br /> background:#F2F1D7;<br /> float:left;<br /> }</p><p> .chart li {<br /> width:70px;<br /> height:300px;<br /> float:left;<br /> background:#DDF3FF;<br /> border:1px solid red;<br /> }<br /> .chart li em {<br /> display:block;<br /> height:20px;<br /> text-align:center;<br /> }<br /> .chart li span {<br /> display:block;<br /> background:#F1FAFA;<br /> height:260px;<br /> }<br /> .chart li strong {<br /> display:block;<br /> height:20px;<br /> text-align:center;<br /> }<br /> </style></p><p> <ul class="chart"><br /> <li><em>使命召喚</em><span></span><strong>35%</strong></li><br /> <li><em>機器戰爭</em><span></span><strong>40%</strong></li><br /> <li><em>CS</em><span></span><strong>87%</strong></li><br /> <li><em>光環</em><span></span><strong>45%</strong></li><br /> <li><em>半條命</em><span></span><strong>23%</strong></li><br /> </ul><br />

運行代碼

然後我們為li元素添加一張圖片，它就是傳說的圓柱了，然後用span為作罩遮層，li所在項目的統計是多少，我們就露出多少，為了方便計算，我們把span的高度重設為100px，li的高度相應改為140px。em與strong設定與li相同的背景顏色，遮住柱子的最上面與最下面。

  .chart {        list-style: none;        font-family: '宋體';        font-size: 14px;        border: 1px solid #ccc;        margin: 0;        padding: 5px;        background:#F2F1D7;        float:left;      }      .chart li {        width:70px;        height:140px;        float:left;        border:1px solid red;        background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;      }      .chart li em,  .chart li span,.chart li strong {        display:block;        height:20px;        text-align:center;      }      .chart li em,  .chart li strong{        background: #DDF3FF;      }      .chart li span {        height:100px;      }

<br /> <style type="text/css"><br /> .chart {<br /> list-style: none;<br /> font-family: '宋體';<br /> font-size: 14px;<br /> border: 1px solid #ccc;<br /> margin: 0;<br /> padding: 5px;<br /> background:#F2F1D7;<br /> float:left;<br /> }<br /> .chart li {<br /> width:70px;<br /> height:140px;<br /> float:left;<br /> border:1px solid red;<br /> background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;<br /> }<br /> .chart li em, .chart li span,.chart li strong {<br /> display:block;<br /> height:20px;<br /> text-align:center;<br /> }<br /> .chart li em, .chart li strong{<br /> background: #DDF3FF;<br /> }<br /> .chart li span {<br /> height:100px;<br /> }<br /> </style></p><p> <ul class="chart"><br /> <li><em>使命召喚</em><span></span><strong>35%</strong></li><br /> <li><em>機器戰爭</em><span></span><strong>40%</strong></li><br /> <li><em>CS</em><span></span><strong>87%</strong></li><br /> <li><em>光環</em><span></span><strong>45%</strong></li><br /> <li><em>半條命</em><span></span><strong>23%</strong></li><br /> </ul><br />

運行代碼

接著我們在span弄一張背景圖片，顏色與li元素的一樣，統計數字為多少，我們就向上移多少！為了方便，我們用內聯樣式設定這個backgroundPositionY數值。最後去掉li元素的邊框便大功告成了！

       .chart {        list-style: none;        font-family: '宋體';        font-size: 14px;        border: 1px solid #ccc;        margin: 0;        padding: 5px;        background:#F2F1D7;        float:left;      }      .chart li {        width:70px;        height:140px;        float:left;        background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;      }      .chart li em,  .chart li span,.chart li strong {        display:block;        height:20px;        text-align:center;        background: #DDF3FF;      }      .chart li span {        height:100px;        background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg)  no-repeat;      }
   <ul class="chart">      <li><em>使命召喚</em><span style="background-position: center -35px"></span><strong>35%</strong></li>      <li><em>機器戰爭</em><span style="background-position: center -40px"></span><strong>40%</strong></li>      <li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li>      <li><em>光環</em><span style="background-position: center -45px"></span><strong>45%</strong></li>      <li><em>半條命</em><span style="background-position: center -23px"></span><strong>23%</strong></li>    </ul>

<br /> <style type="text/css"><br /> .chart {<br /> list-style: none;<br /> font-family: '宋體';<br /> font-size: 14px;<br /> border: 1px solid #ccc;<br /> margin: 0;<br /> padding: 5px;<br /> background:#F2F1D7;<br /> float:left;<br /> }<br /> .chart li {<br /> width:70px;<br /> height:140px;<br /> float:left;<br /> background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;<br /> }<br /> .chart li em, .chart li span,.chart li strong {<br /> display:block;<br /> height:20px;<br /> text-align:center;<br /> }<br /> .chart li em, .chart li strong{<br /> background: #DDF3FF;<br /> }<br /> .chart li span {<br /> height:100px;<br /> background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;<br /> }<br /> </style></p><p> <ul class="chart"><br /> <li><em>使命召喚</em><span style="background-position: center -35px"></span><strong>35%</strong></li><br /> <li><em>機器戰爭</em><span style="background-position: center -40px"></span><strong>40%</strong></li><br /> <li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li><br /> <li><em>光環</em><span style="background-position: center -45px"></span><strong>45%</strong></li><br /> <li><em>半條命</em><span style="background-position: center -23px"></span><strong>23%</strong></li><br /> </ul><br />

運行代碼

=======================華麗的分界線，與題目無關===========================

<br /><head><br /> <script type="text/javascript"><br /> var dataSet = {<br /> "最終幻想":95,<br /> "白騎士":20,<br /> "星之海樣":84,<br /> "北歐女神":77,<br /> "勇者鬥惡龍":90,<br /> "異度裝甲":100,<br /> "聖劍傳說":68,<br /> "影之心":72,<br /> "傳說系列":85,<br /> "失落奧德賽":92,<br /> "光明之風":40<br /> }<br /> var markPollarChart= function(parent,dataset){<br /> var p = document.createElement("div"),<br /> builder = [];<br /> builder.push("<ul class='chart'>");<br /> for(var i in dataset){<br /> builder.push("<li><em>") ;<br /> builder.push(i) ;<br /> builder.push("</em><span style='background-position: center -") ;<br /> builder.push(dataset[i]) ;<br /> builder.push("px'></span><strong>") ;<br /> builder.push(dataset[i]) ;<br /> builder.push("%</strong></li>") ;<br /> }<br /> builder.push("</ul>");<br /> p.innerHTML = builder.join('');<br /> parent.insertBefore(p,null);<br /> }<br /> window.onload = function(){<br /> markPollarChart(document.getElementsByTagName("body")[0],dataSet);<br /> }<br /> </script><br /> <style type="text/css"><br /> .chart {<br /> list-style: none;<br /> font-family: '宋體';<br /> font-size: 14px;<br /> border: 1px solid #ccc;<br /> margin: 0;<br /> padding: 5px;<br /> background:#F2F1D7;<br /> float:left;<br /> }<br /> .chart li {<br /> width:75px;<br /> height:140px;<br /> float:left;<br /> background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;<br /> }<br /> .chart li em, .chart li span,.chart li strong {<br /> display:block;<br /> height:20px;<br /> text-align:center;<br /> }<br /> .chart li em, .chart li strong{<br /> background: #DDF3FF;<br /> }<br /> .chart li span {<br /> height:100px;<br /> background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;<br /> }<br /> </style><br /><head><br /><body><br /></body><br />

運行代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More