第一:css3下载字体,代码如下
@font-face
{
font-family:
'自己命名字体名字'
src:
url('字体路径')
src:
url('FileName.eot?#iefix')
format('embedded-opentype'),
/*其它格式*/
url('FileName.woff')
format('woff'),
url('FileName.ttf')
format('truetype'),
url('FileName.svg#FontName')
format('svg')
font-style:
normal
font-weight:
normal
/*设置默认样式*/
}
.aa{font-family:"自己命名字体名字"}
不兼容ie8及以下浏览器
第二:切png图片
首先我们创建一个html文件,写出html文件的一些基础代码然后我们在网页中新建一个div,并新建一个
无序列表并创建4个然后使用浏览器直接打开html文件,查看效果,可以看到我们创建的标签自带有一定的格式,
接下来我们使用下面的代码去除标签的格式,其中:list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示,并且为左浮动margin-right:20px表示设置标签右外边距
刷新浏览器中html文件查看效果,
这里我们开始添加动画:
给
标签添加:
transition:transform 0.1s
transform表示变换的属性,0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性
li:hover{cursor:pointertransform:translate(0,-10px)}
cursor:pointer表示鼠标滑过显示为小手形状
transform:translate(0,-10px)translate表示移动,第一个参数为水平移动值,第二个参数为垂直移动值,
进入浏览器直接查看效果,如下图实现了鼠标滑过块,块上移的动画特效,如下图:
如Alert弹出窗口的旋转特效css中
@namespace
s
"library://ns.adobe.com/flex/spark"
@namespace
mx
"library://ns.adobe.com/flex/mx"
mx|Alert
{
fontFamily:
VerdanaEmbedded
creationCompleteEffect:
myEffect
}
mxml中
<fx:Style
source="css/style.css"
/>
<fx:Declarations>
<mx:Sequence
id="myEffect">
<mx:Parallel>
<mx:Zoom
/>
<mx:Fade
/>
</mx:Parallel>
<mx:Rotate
/>
</mx:Sequence>
</fx:Declarations>
这样弹出窗口时就有了旋转特效
如果只是改样式的话有以下几种
直接改写默认控件样式
mx|button{
……
}
对指定控件增加样式,#后为控件ID
mx|Button#check{
……
}
或直接指定ID
#haloButton
{
base-color:#0000ff
}
通过状态定义样式
s|Button:down
{
color:#33CC33
}
增加控件样式,用styleName+"样式名"的方式应用于控件
.myButton{
……
}
增加子样式
mx|TabNavigator{
firstTabStyleName:
"MyFirstTab"
}
.MyTabs
{
……
}