CodeSky 代码之空

实际上我们往往会有不想竖直滚动要想一路水平滚动的需求，比如今天在公司里就需要，其实是很简单的，不过对于结构来说，还是需要做一些改动。

1<div class="main">
2	<div class="img">
3		<div class="description">class</div>
4	</div>
5	<div class="img"></div>
6	<div class="img"></div>
7	<div class="img"></div>
8	<div class="img"></div>
9	<div class="img"></div>
10	<div class="img"></div>
11</div>
12

CSS3能达到渐变的效果，而不用再大费周章的用JS来实现效果了，这点实际上是非常方便的……

比如说：

1div
2{
3width:100px;
4transition: width 2s;
5-moz-transition: width 2s; /* Firefox 4 */
6-webkit-transition: width 2s; /* Safari 和 Chrome */
7-o-transition: width 2s; /* Opera */
8}
9

目前在山寨百度首页，于是乎就用各种三角，实际上，在前一阵子（考试前）仿照自己博客样式的时候（xsky.me），也曾经折腾过三角形，所以这次来总结（备份）一下。

1	height: 0;
2	width: 0;
3	overflow: hidden;
4	font-size: 0;
5	line-height: 0;
6	border-color: #000 transparent transparent transparent;
7	border-style: solid dashed dashed dashed;
8	border-width: 5px;
9

在此，border-width决定了三角形的大小，具体发生了什么，可以参考：三种纯CSS实现三角形的方法，里面介绍了三种，而我只是用了其中的一种。

决定了三角形方向的是由border-color定义来的，transparent的一侧为透明。

如果想要规定a标签以外的，比如增加点击事件，可以大家怎么知道这货可不可以点，一般来说，一是做成按钮样式，而是改变鼠标放置Play时的样式咯，这样大家就知道，哦这货八成可以点。

用cursor就能改变鼠标样式了。

cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。但用FireFox浏览时才注意到使用cursor:hand在FireFox里并被支持。 cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。 cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。