元素的显示与隐藏:
常见控制元素的显示和隐藏的属性有display、visibility、overflow,需要清楚的理解三者之间的区别。
display显示:
当值为none时为销毁对象,不保留原位置,当值为block时为生成对象。
visibility可见性:
当值为hidden时为隐藏对象,保留原位置,当值为visible时为可见对象。
overflow溢出:
控制当内容超出对象时如何管理内容的显示,其值visible不添加滚动条也不剪切内容、auto内容超出时显示滚动条,不超出时不显示滚动条、hidden超出内容隐藏,scroll无论内容是否超出都显示滚动条。
overflow-x或overflow-y:
此属性是控制溢出元素在水平或垂直方向的显示模式,其值有:visible默认可见 | hidden 不可见| scroll 出现滚动条,区域滚动| auto 自适应,超出会出现滚动条 | no-display 和no-content 两属性谷歌测试无效,可忽略。
opacity透明性:
此属性是改变一个元素半透明,其取值范围0~1,当值为0时为完全透明,占位;当值为1时为不透明。
iconfont字体图标:
图片对于网站开发是有很多的优点,但是图片会增加http请求和文件总大小,及图片不能更好的缩放,此时出现了iconfont字体图标就解决了此问题。
常见字体:
不同浏览器支持的字体格式不同,下面简单介绍一些:
UI设计师设计svg格式图片:
设计师通过illustrator 或 Sketch 等矢量图形软件创建 icon图片。
上传生成字体包:
当UI设计给我们svg文件后,我们需要转换成适合多浏览器兼容页面能够使用的字体文件,图标生成器:icoMoon字体(网站:http://icomoon.io),一个自定义图标生成器,内容种类多,但是服务器是国外的。
icon font字体(网站:http://www.iconfont.cn),阿里字体图标库,可以使用AI制作图标上传生成属于自己的字体图标。
fontello,(网站:http://fontello.com)在线制作属于自己的icon font字体图标,也可以从GitHub下载整个图标集,此项目开源。
Font-Awesome,(网站:http://fortawesome.github.io/Font-Awesome)更新比较快,广受欢迎。
Glyphicon Halflings,(网站:http://glyphicons.com)可在bootstrap下免费使用。
Icons8,(网站:https://icons8.com)提供PNG免费下载,像素可达500px。
下载兼容字体包:
上传完毕后,网站会转换为字体图标,此时下载使用即可,一般我们都是在网站找现成的用就可以,没必要自己设计。
@font-face:自定义字体导入:
使用自定义字体必须导入到网页中并声明,具体如下:
<style>@font-face {/* 1、声明自定义字体 */font-family: "myfont";/* 给自定义的字体起一个名字 */src: url("Fonts/myfont.ttf");/* 引入设计师设计好的字体文件 */}p {/* 2、使用自定义字体 */font-family: myfont;}p::before {/* 可以直接在标签中写自定义字体文本,如p标签 */content: "\e900";}</style><body><p></p></body>
网站图标:
网站ico图标的制作:先把想要的图标设计成图片格式,在利用第三方转换网站比特虫: http://www.bitbug.net转换为ico格式的图标,之后link引入即可
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">/*type="image/x-icon"可以省略*/
追加字体图标:
实际工作中,当原来的字体图标不够用时,我们需要添加新的字体图标,但是之前的不能删掉,此时我们仅需把原文件夹中selection.json文件通过icoMoon的import icons导入到icoMoon继续添加新的图标即可。
CSS代码分析:
在开发中为了验证自己的代码是否规范,通常把代码上传到相关网站进行验证,这里推荐: Unicorn - W3C 统一验证工具: http://validator.w3.org,它支持本地文件、URL、直接写代码到输入框进行验证。
在生产环境,代码一般都是压缩后在上传的,这里推荐代码压缩工具:站长之家:http://tool.chinaz.com
Can I Use:一个可以查看CSS3属性在各浏览器兼容性的网站。
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海