首 页
网络学院
视频教程
资源下载
HOT
实例教程
图文教程
专题中心
学习社区
繁體中文
当前位置:
首页
>
图文教程
>
网页制作
>
CSS样式表
> CSS 柱状图实现代码其实很简单
CSS样式表
CSS网页设计实例:15个用CSS设计的网页表单实例
让IE可以变相支持CSS3选择器
CSS3制作的精彩的网页实例教程
5个实例让你轻松了解CSS3新属性
CSS教程:详解CSS特定值
网页制作中的水平居中和垂直居中解决方案
CSS教程:CSS属性behavior的语法
网页制作实例:用CSS样式描述表格Table边框
CSS Hack兼容各浏览器是否正常
应聘网页设计师常见的8个面试试题和答案
5个帮助你实现未来的网页设计的CSS3技巧
CSS教程:纯CSS实现的圆角化图片
CSS命名规范和CSS书写规范及方法
CSS教程:expression在Chrome的问题
CSS教程:CSS变换(transition)
float闭合(清除浮动)和CSS HACK
letter-spacing和word-spacing
CSS基础语法:群组化选择符
黑客选择CSS代码挂马 CSS挂马攻防实录
CSS3制作网页下拉菜单代码解释
No.
«
‹
116
117
118
119
›
»
技术文章搜索
关键字
CSS样式表 中的 CSS 柱状图实现代码其实很简单
出处:
互联网
整理:
软晨网(RuanChen.com)
发布:
2009-09-11
浏览: 35 ::
收藏到网摘: n/a
IE对CSS样式的数量和大小是有限制的
HTML5和CSS3让网页设计提升到下一个高度
<!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样式的数量和大小是有限制的
HTML5和CSS3让网页设计提升到下一个高度
评论 (0)
All
登陆
还没注册?