今天完成的事情：

根据最终的宣传页ui图，修改样式，用到了俩个新的没用过的css属性和方法

a.引入特殊字体的方法

在css文件中使用

@font-face {
    
font-family: 'hy';（要全英文）    
src: local('../fonts/hanyiweibei.ttf');（这个字体在你本地的访问路径）
src: url('fonts/hanyiweibei.ttf');（这个字体在服务器里的访问路径）
}

b.倒影和渐变的写法

-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.3)));

这里的-webkit是兼容谷歌浏览器的前缀。用到的是css3 box-reflect新属性。可写的属性值算上none的话有四类

none：

无倒影

<direction>

above：

指定倒影在对象的上边

below：

指定倒影在对象的下边

left：

指定倒影在对象的左边

right：

指定倒影在对象的右边

<offset>

<length>：

用长度值来定义倒影与对象之间的间隔。可以为负值

<percentage>：

用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>

none：

无遮罩图像

<url>：

使用绝对或相对地址指定遮罩图像。

<linear-gradient>：

使用线性渐变创建遮罩图像。

<radial-gradient>：

使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>：

使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>：

使用重复的径向(放射性)渐变创建遮罩图像。

多样的写法参照了这篇教程：http://www.html5tricks.com/css3-image-reflection.html

遇到的困难：

1.gif直接插入html是不会自己动的，因为之前没有写过这个，查资料也暂时没有查的太清楚，不知道是html里本来就是这样的，还是有什么其他的影响；目前找到了一个jq插件打算引用这个插件来达到播放和暂停gif图的效果。

2.ui给的动图有毛边，之前自己用ps做过简单的动图，这个毛边的原因看起来像是像素太小的原因，已经拜托ui优化了，如果明天ui没解决打算自己来研究一波。

明天计划的事情：继续修改12期客卿的问题。

收获：如上