|
CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。
先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。
1.<ul class="chart">
2. <li><em>使命召唤</em><span>： </span><strong>35%</strong></li>
3. <li><em>机器战争</em><span>：</span><strong>40%</strong></li>
4. <li><em>CS</em><span>：</span><strong>87%</strong></li>
5. <li><em>光环</em><span>：</span><strong>45%</strong></li>
6. <li><em>半条命</em><span>：</span><strong>23%</strong></li>
7.</ul>
解释一下，ul里面的每一个li就代表我们要统计的内容，span为柱身，em为统计项的名字，strong为统计数值。我们可以添加一些背景颜色来区分他们。
01..chart {
02. list-style: none;
03. font-family: '宋体';
04. font-size: 14px;
05. border: 1px solid #ccc;
06. margin: 0;
07. padding: 5px;
08. background:#F2F1D7;
09. }
10. .chart li {
11. width:400px;
12. background:#DDF3FF;
13. }
但怎样把li弄成柱状呢？我们首先把li弄成并排显示，要达到这种效果，我们有两个方法：1、把li的display变成inline，2、把li变成浮动元素。估量一翻，选择了后者，因为内联元素的盒子模型是难以控制的，margin与padding的计算会变得很复杂。既然选择后者，我们必须面对一个情况，就是浮动溢出了。对策是父元素也变成浮动元素。浮动容器会向内收缩，自适应子元素的高度与宽度。也就是说，我们专注于li的设计就可以了！为了让li表现得像柱子， 我们让它的高比宽长很多，同时为了让大家好辩认每个li的范围，我先给它们加上边框！
01..chart {
02. list-style: none;
03. font-family: '宋体';
04. font-size: 14px;
05. border: 1px solid #ccc;
06. margin: 0;
07. padding: 5px;
08. background:#F2F1D7;
09. float:left;
10.}
11..chart li {
12. width:70px;
13. height:300px;
14. float:left;
15. background:#DDF3FF;
16. border:1px solid red;
17.}
接着我们要差开li元素里面的内容，由于它们都是内联元素，因此给他们设高与宽是没有意义，我们得把他们伪装成块元素。这时它们就会各自独占一行。由于我们把span中的冒号删除了，里面为空，span就表现为不占空间，我们可以给它们塞点东西进去，我塞的是，当然你们在textarea中是看不到的，要利用火狐的查看元素功能才行。
01..chart {
02. list-style: none;
03. font-family: '宋体';
04. font-size: 14px;
05. border: 1px solid #ccc;
06. margin: 0;
07. padding: 5px;
08. background:#F2F1D7;
09. float:left;
10.}
11..chart li {
12. width:70px;
13. height:300px;
14. float:left;
15. background:#DDF3FF;
16. border:1px solid red;
17.}
18..chart li em ,
19..chart li span ,
20..chart li strong {
21. display:block;
22.}
上一页12 下一页
< |
