移动web开发，day1,字体标签、平面位移、渐变总结

移动web开发

第一天内容分为三大块：字体标签iconfont,

平面转换

渐变background-image:linear-gradient

字体图标：

字体图标iconfont(必须在html里加入一个标签)

一般使用行内标签span,b,u,i,s

需要在阿里巴巴图标iconfont下载进行使用（官方免费）

加入购物车-添加到项目-本地下载-解压-把包放到css文件夹里

使用link进行导入

需要给一个标签，给类iconfont 字体图标名称（打开下载包里面的html，fontclass下查看名称）

相对于精灵图sprite来说有以下优点：

灵活性强：字号，字体，图标的颜色可以通过iconfont选择器进行更改，

轻量化：由于是字体标签，体积较小，服务器访问的压力大大的降低，浏览器执行速度快

兼容性强：几乎兼容所有主流的浏览器

但是只能是简单的图片，颜色单一的可以使用字体图标，否则使用精灵图

字体标签导入：前提是跟设计师进行沟通，获取到后缀名为svg的图片进行去色后上传，然后在进行下载使用

平面转换：

transform 具有层叠性，如果出现多个transform一般用复合属性，rotate至于最后

位移：

x,y可使用像素px

x和y左上为负数，右下为正数

transform-translate(x,y)

百分比%（按宽高比例）

单独取水平或者垂直的则

transform-translateX（水平方向取值）

transform-translateY（垂直方向取值）

一般平面转换位移配合Hover和过渡使用

旋转：

transform-rotate

属性是deg

一般平面转换位移配合Hover和过渡使用

用于复合属性一般至于最后，因为旋转会让x,y发生改变

位移： transform-scale(1)表示1倍

transform-scale(1.2)表示1.2倍

一般平面转换位移配合Hover和过渡使用

总结：一般位移transform-translate

旋转： rotate

缩放 scale

三者至于hover内

而过渡transtion all time至于标签内

一般平面转换位移配合Hover和过渡使用

复合属性的使用顺序: transform translate() scale() rotate()

企业开发中常用于:hover

渐变色：background-image:lineargrdient(

transparent,

rgba(0,0,0,(0-1))

)

opacity 0;

transtion all time;

移动web开发，day1,字体标签、平面位移、渐变总结相关推荐

Web开发day1：使用flask快速搭建网站
目录 1. 简单跑通 2. 浏览器能识别的标签 2.1 编码(head中) 2.2 标题(head中) 2.3 标题(body中,块级标签) 2.4 div和span(body中,div块级标签,sp ...
web开发之字体应用
font-family,这是一个很容易被忽视的环节,却直接影响了网站的体验. 本文不谈技术细节,只说设计准则. 1.使用英文名尽量不要使用下面的声明方式: font-family: "华文 ...
Java Web开发4___HTML基本标签: 超链接标签之页面内部链接
页面内部链接: 意思是在一个页面内, 点一个网页元素会链接到当前页面另外一个地方去,称之为页面内部链接实现步骤 1. 首先在页面中给需要链接的位置命名, 方法如下: <a name= ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
小小base标签在web开发中的大作用
稍微上点规模的项目,通常都会为不同模块或功能的页面,js,css等资源建立不同的路径,或者对不同的servlet等配置不同的虚拟路径.这时,关于各种路径的包含和转向问题长期困扰开发人员. ...
jsp快到截止日期字体颜色变色_jsp页面中字体变色问题 - Java / Web 开发
jsp页面中字体变色问题 - Java / Web 开发 [@title] function diyCheck(){ var fm = document.frmMain; s1=fm.YEAR.val ...
HTML与CSS基础（一）—— HTML基础（web标准、开发工具、标签）
目标能够理解HTML的基本语法和标签的关系能够使用排版标签实现网页中标题.段落等效果能够使用相对路径选择不同目录下的文件能够使用媒体标签在网页中显示图片.播放音频和视频能够使 ...
css 所有字体大小,前端Web开发人员的CSS相对字体大小
在本文中,我们将看几种不同的方式,前端Web开发人员可以使用CSS操作其网页的字体. 网页设计中最大的混乱之一是由font-size属性造成的. 在CSS中,可以使用多个单元,这只会导致设计人员额外头 ...
移动web开发（三）——字体使用
参考: 移动web页面使用字体的思考.http://www.cnblogs.com/PeunZhang/p/3592096.html

移动web开发，day1,字体标签、平面位移、渐变总结

移动web开发，day1,字体标签、平面位移、渐变总结相关推荐

最新文章

热门文章