本文来源:网站建设-网站制作|网络营销专家慧云科技-抢滩登陆2009-7-8 17:54:13
2 排版技巧
CommandShift3 ,使用一个有趣的打字技巧,为您已提交表决的网站显示表决结果。显然,这种效果仅使用的CSS 就能实现。

具体方法
每个结果行包含“胜率”+截图以及“失去的百分比” , +截图。每个百分比块的宽略小于以显示其全文需要的宽度。此外,这个CSS属性溢出:隐藏用于隐藏的内容没有必要。
这是 “胜率”所必需的所有的代码。在“失去的百分比”得到相同的代码,增加了负面利润率使其失去网站的缩图后出现下滑。

HTML
- <div class="bar">
- <div class="screen-left loser choice">
- <div class="pct">
- <div>46<span>%< SPAN>span>< SPAN>div>
- < SPAN>div>
- <div>
- --the image goes here--
- < SPAN>div>
- < SPAN>div>
- <div class="screen-right winner">
- <div>
- --the image goes here--
- < SPAN>div>
- <div class="pct">
- <div>54<span>%< SPAN>span>< SPAN>div>
- < SPAN>div>
- < SPAN>div>
-
- <div class="legend">
- --You voted for text goes here--
- < SPAN>div>
- < SPAN>div>
--You voted for text goes here--
CSS
- .result .pct {
- float:left;
- height:80px;
- margin:0;
- overflow:hidden;
- padding:0;
- white-space:nowrap;
- width:95px;
- }
- .result .screen-left .pct div {
- margin:28px 0 0 10px;
- float: left;
- }
- .result .loser .pct div {
- color:#84C3FF;
- }
- .result .pct div span {
- display:inline;
- font-size:55px;
- }
- .result .screen-right .pct div {
- margin:28px 0 0 -8px;
- float: left;
- }
- .result-first .pct div {
- color:#FFFFFF;
- }
本文国际来源