网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
CSS 柱状图实现代码其实很简单
(编辑:jimmy 日期: 2024/12/26 浏览:
2
)
<!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>
提示:您可以先修改部分代码再运行
上一篇:
CSS 约定写法 利用扩展
下一篇:
IE对CSS样式的数量和大小是有限制的
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
首页
音乐
电影
资源