首 页
网络学院
视频教程
资源下载
HOT
实例教程
图文教程
专题中心
学习社区
繁體中文
当前位置:
首页
>
图文教程
>
网页制作
>
CSS样式表
> CSS 柱状图实现代码其实很简单
CSS样式表
网页布局教程:掌握CSS网页布局属性
WEB标准的CSS网页布局技巧5则
你怎么书写CSS代码?
CSS教程:表单元素不继承body的字体属性
调整CSS的方式给滚动条换色
CSS网页布局中表格制作实例
网页设计学习教程:CSS盒模型
网页制作学习教程:CSS Position
网页九宫格布局:应用透明的外圆角
CSS网页布局学习的参考诀窍
把网页按钮伪装成超链接
CSS教程:检验CSS书写是否标准合理
你的网页最好通过HTML校验和CSS校验
网页制作教程:CSS的好处
网页制作心得:分离之后怎么做?
CSS教程:数字和字母将容器撑大问题解决
CSS Sprites优化网页代码的方法
CSS实例:精简代码的兼容各浏览器的滑动门
CSS网页制作技巧:提高CSS可阅读性
英文教程:CSS的Float
No.
«
‹
60
61
62
63
›
»
技术文章搜索
关键字
CSS样式表 中的 CSS 柱状图实现代码其实很简单
出处:
互联网
整理:
软晨网(RuanChen.com)
发布:
2009-09-11
浏览: 131 ::
收藏到网摘: 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
登陆
还没注册?