CSS bar charts are a form we often encounter in web design. A bar chart can be shown visually in the form of a bar graph.
What is the implementation of the CSS Basic bar chart? Let's look at the following examples:
The following is a reference fragment:
<div class= "graph" >
<strong class= "Bar" style= "width:24%;" >24%</strong>
</div>
This is the XHTML code, which defines a container, applies class graph, includes an XHTML element strong, and applies class bar to this element.
Let's look at the following CSS definition:
The following is a reference fragment:
. Graph {
position:relative/* IE is dumb */
& nbsp; width:200px;
border:1px solid #B1D632;
padding:2px;
& nbsp
graph. Bar {
display:block;
position:relative;
background: #B1D632;
text-align:center;
color: #333;
& nbsp; height:2em;
line-height: 2em;
}
. Graph. Bar span {position:absolute; left:1em;}
With the above border, the definition of the color, we sketch out a strip shape, we style= "width:24%" in the XHTML code, and define the size of the area that is set. Such a basic bar chart is done!
All code:
The following is a reference fragment:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv=" Content-type " Content= "text/html; charset=gb2312 "/>
<title>homepage.yesky.com</title>
<style type=" Text/css ">
graph {
position:relative/* IE is dumb/*
width:200px;
border:1px solid #B1D632;
padding:2px;
& nbsp
graph. Bar {
display:block;
position:relative;
background: #B1D632; &nbsP
text-align:center;
Color: #333;
height:2em;
& nbsp; line-height:2em;
}
. Graph. bar span {position:absolute; left:1em;}
</style>
<body>
<div class= "graph" >
<stron G class= "Bar" style= "width:24%;" >24%</strong>
</div>
<br/>
<div class= "graph" >
<str Ong class= "Bar" style= "width:60%;" >60%</strong>
</div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
