html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
CSS 柱状图实现代码其实很简单
时间:2016-05-10
<!doctype html> <head> <style> ul.chart{padding:0;margin:0;list-style:none;border:1px #ccc solid;height:255px;font-size:9pt;background:#ddf3ff} ul.chart p{padding:0;margin:0} ul.chart .title{text-align:center;height:25px;line-height:25px;} ul.chart li{width:80px;float:left;padding:0;} ul.chart li:hover{background:#f7f7f7;} ul.chart .total{height:230px;position:relative;} ul.chart .percent{background:#f0f;width:20px;position:absolute;left:25px;bottom:0;} </style> </head> <body> <ul class=chart> <li><p class=title>最终幻想</p><div class=total><p class=percent style="height:50%;">50%</p></div></li> <li><p class=title>星之海样</p><div class=total><p class=percent style="height:10%;">10%</p></div></li> <li><p class=title>白骑士</p><div class=total><p class=percent style="height:70%;">70%</p></div></li> </ul> </body>
提示:您可以先修改部分代码再运行
上一条:IE对CSS样式的数量和大小是有限制的
下一条:CSS 约定写法 利用扩展
相关文章
css子绝父相什么意思?
子绝父相 这个子绝父相太重要了,是我们学习定位的口诀,时时刻刻记住的。 这句话的意思是 子级是绝对定位的话, 父级要用相对定位。 首先, 我们说下, 绝对定
纯CSS打造响应式自适应分页条
分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Boot
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行。 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31
css margin外边距使用实例分析
css margin用于设置对象标签之间距离间隔,例如如果要使两个div标签之间有一定的间距,我们可以使用css margin属性来设置。本文章向码农介绍css margin外边距使用
css float 浮动属性使用方法和实例讲解
在网站开发中,css float是一个经常需要使用的css属性,改属性用于设置css块级元素的浮动方向(左右浮动)。本文章向码农介绍css float使用方法和实例应用,需要
css sprite讲解与使用实例
css sprite直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一
最新文章
Windows自动更新造成“HTTP Error 503,The service is unavailable。”
公司开发的某业务系统出故障了,于是通过VPN在家里直接访问该系统,结果系统器返回 Service Unavailable --------------------------------------------------------------
iframe 如何设置高度自适应 - iframe 自适应高度的方法
最近些项目遇到用iframe的地方,发现设置的固定高有时不能完全适应项目环境,不是高了就是不够高,在页面里看着很不爽。如何想办法到使用 iframe 自适应高度的方法,下面分
纯CSS打造响应式自适应分页条
在html中,怎么设置背景图片不重复不平铺,只显示一张图片
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
css float 浮动属性使用方法和实例讲解
css margin外边距使用实例分析
iframe 如何设置高度自适应 - iframe 自适应高度的方法
完美解决Iframe高度自适应(兼容性好并且支持跨域)
html hidden隐藏域作用及用法实例介绍
CSS 背景background使用方法
css sprite讲解与使用实例