这是我目前的代码:
HTML:
<a class="button" href="#">Read More</a>
CSS:
.button {
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%;
font: 12px Helvetica, Arial, sans-serif;
color: #FFF;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer;
border: none;
min-width: 87px;
min-height: 29px;
float: right;
margin-top: 14px;
padding-top: 4.25px;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.button:hover {
background: url('../images/btn_over.jpg') repeat scroll 0% 0%;
}
结果 …
我正在寻找一个无序列表来过滤我的一些工作.我的过滤器工作得很好(不是在这个例子中),我现在正处于我难以造型的阶段.我已经尝试设置div的宽度并进行一些在线研究,但没有成功.
它目前看起来像这样:http://jsfiddle.net/XcVHU/
我希望的是,最初只显示两个单词(过滤器和全部),当用户将鼠标悬停或单击"过滤器"时,列表会以CSS宽度过渡扩展以显示其他类别(Web,还是,动作和游戏).所以,从这个:
过滤| 所有
对此:
过滤| 网络| 还是| 动作| 游戏
我目前正在我的投资组合网站上工作,在关于我的页面上,我想以信息图形的形式显示它(文本,图像/插图,图表等).
我一直在关注这个教程来创建一个图表,在Raphaël.js的帮助下,一切似乎都很好,但是,我现在处于创建另一个图表的阶段,这次只是以条形图的形式.它需要具有与第一个相同的特征(颜色和悬停效果),但我不知道如何做到这一点.
我知道gRaphaël,在那些例子中,你没有得到同样的效果,我发现它更难以风格化.