Home > Developer > CSS

Step by step teach you how to implement the bar chart of pure CSS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS is powerful in processing typographical information, and it cannot be imagined. Below we will implement a bar chart together.

First, build a specific framework. We use the unordered list as a whole, and we choose inline nonprime span, strong, and em to fill in the content.

<Br/> <ul class = "chart"> <br/> <li> <em> Call of Duty </em> <span>: </span> <strong> 35% </strong> </LI> <br/> <li> <em> machine war </em> <span>: </span> <strong> 40% </strong> </LI> <br/> <li> <em> CS </em> <span>: </span> <strong> 87% </strong> </LI> <br/> <li> <em> halo </em> <span>: </span> <strong> 45% </strong> </LI> <br/> <li> <em> half life </em> <span>: </span> <strong> 23% </strong> </LI> <br/> </ul> <br/>

RunCode

 
<Ul class = "chart"> <li> <em> Call of Duty </em> <span>: </span> <strong> 35% </strong> </LI> <li> <em> machine war </em> <span>: </span> <strong> 40% </strong> </LI> <li> <em> CS </em> <span>: </span> <strong> 87% </strong> </LI> <li> <em> halo </em> <span>: </span> <strong> 45% </strong> </LI> <li> <em> half life </em> <span>: </span> <strong> 23% </strong> </LI> </ul>

To explain, every Li in UL represents the content to be counted. span is the column body, Em is the name of the statistical item, and strong is the statistical value. We can add some background colors to distinguish them.

. 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> Call of Duty </em> <span>: </span> <strong> 35% </strong> </LI> <br/> <li> <em> machine war </em> <span>: </span> <strong> 40% </strong> </LI> <br/> <li> <em> CS </em> <span>: </span> <strong> 87% </strong> </LI> <br/> <li> <em> halo </em> <span>: </span> <strong> 45% </strong> </LI> <br/> <li> <em> half life </em> <span>: </span> <strong> 23% </strong> </LI> <br/> </ul> <br/>

Run code

But how to make Li into a column? We first make Li into a side-by-side display. To achieve this effect, we have two methods: 1. Change Li's display to inline; 2. Change Li to a floating element. The latter is selected because the box model of the inline element is difficult to control, and the calculation of margin and padding becomes complicated. Since we select the latter, we must face a situation where floating overflow exists. The countermeasure is that the parent element also becomes a floating element. The floating container shrinks inward to adapt the height and width of the child element. That is to say, we can focus on the design of Li! In order to make Li look like a pillar, we make it much longer than the aspect ratio. At the same time, to let everyone better recognize the range of each Li, I will add borders to them first!

 
. 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> illegal modification of the button's onclick event </title> <br/> </pead> <br/> <body> <br/> <ul class = "chart "> <br/> <li> <em> Call of Duty </em> <span> </span> <strong> 35% </strong> </LI> <br/> <li> <em> machine war </em> <span> </span> <strong> 40% </strong> </LI> <br/> <li> <em> CS </em> <span> </span> <strong> 87% </strong> </LI> <br/> <li> <em> halo </em> <span> </span> <strong> 45% </strong> </LI> <br/> <li> <em> half-lived </em> <span> </span> <strong> 23% </strong> </LI> <br/> </ul> <br/>

Run code

Then we need to separate the content in the Li element. Since they are all inline elements, it makes no sense to set the height and width for them. We have to disguise them as block elements. In this case, each of them occupies an exclusive row. Because we have deleted the colon in the span and it is empty in it, the span is shown as not occupying space. We can add something to them. What I inserted is & #30 ;, of course, you cannot see it in textarea. You must use Firefox's viewing element function. (You can check the difference between & #30;, & #32;, & #160;, & emsp; and & 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> Call of Duty </em> <span> </span> <strong> 35% </strong> </ LI> <li> <em> machine war </em> <span> </span> <strong> 40% </strong> </LI> <li> <em> CS </em> <span> </span> <strong> 87% </strong> </LI> <li> <em> halo </em> <span> </span> <strong> 45% </strong> </LI> <li> <em> half-lived </em> <span> </span> <strong> 23% </strong> </LI> </ul> <p>

Run code

Then, the space occupied by the Column exists and the related items are aligned in the center.

 
. 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> Call of Duty </em> <span> </span> <strong> 35% </strong> </LI> <br/> <li> <em> machine war </em> <Span> </span> <strong> 40% </strong> </LI> <br/> <li> <em> CS </em> <span> </span> <strong> 87% </strong> </LI> <br/> <li> <em> halo </em> <span> </span> <strong> 45% </strong> </LI> <br/> <li> <em> half life </em> <span> </span> <strong> 23% </strong> </LI> <br/> </ul> <br/>

Run code

Then we add an image for the Li element, which is the legendary cylinder. Then we use span as the covering layer. The statistics of the Li project are shown as much as we do, for easy calculation, we reset the Span Height to 100px, And the Li height to 140px. Em and strong set the same background color as Li to cover the top and bottom of the column.

 
. 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 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 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> Call of Duty </em> <span> </span> <strong> 35% </strong> </LI> <br/> <li> <em> machine war </em> <Span> </span> <strong> 40% </strong> </LI> <br/> <li> <em> CS </em> <span> </span> <strong> 87% </strong> </LI> <br/> <li> <em> halo </em> <span> </span> <strong> 45% </strong> </LI> <br/> <li> <em> half life </em> <span> </span> <strong> 23% </strong> </LI> <br/> </ul> <br/>

Run code

Then we get a background image in span. The color is the same as that of the Li element. Then we will move up as much as the number is counted! For convenience, we use the inline style to set this backgroundpositiony value. Finally, the border of the Li element is removed!

 
. 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 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 ;}
 
 
  
  
     
   
   
  •   Call of Duty     35%  
    •  
   
   
  •   machine war     40%  
    •  
   
   
  •   CS     87%  
    •  
   
   
  •   halo     45%  
    •  
   
   
  •   half-lived     23%  
    •

<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> Call of Duty </em> <span style = "background-position: center-35px "> </span> <strong> 35% </strong> </LI> <br/> <li> <em> machine war </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> halo </em> <span style = "background-position: center-45px "> </span> <strong> 45% </strong> </LI> <br/> <li> <em> half-lived </em> <span style = "background-position: center-23px "> </span> <strong> 23% </strong> </LI> <br/> </ul> <br/>

Run code

====================================== Gorgeous demarcation line, it has nothing to do with the question ==================================

<Br/> <pead> <br/> <SCRIPT type = "text/JavaScript"> <br/> var dataset ={< br/> "Final Fantasy": 95, <br/> "White Knight": 20, <br/> "sea of stars": 84, <br/> "Goddess of northern Europe": 77, <br/> "brave man fighting evil dragon": 90, <br/> "different Armor": 100, <br/> "Legend of the Swordsmanship": 68, <br/> "shadow": 72, <br/> "legend series": 85, <br/> "Lost odyssey": 92, <br/> "bright Wind ": 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/> <pead> <br/> <body> <br/> </body> <br/>

run the Code

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
how to host website step by step how to learn php step by step how to affiliate marketing step by step how to web hosting step by step how to use teamviewer step by step how to install mysql in windows 7 step by step how to configure iis in windows 7 step by step
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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