控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析

元素的显示与隐藏:

常见控制元素的显示和隐藏的属性有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联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575424.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制

Canvas容器: canvas标签用来定义图像的容器&#xff0c;必须配合脚本来绘制图像&#xff0c;canvas也运用于游戏开发。注意&#xff1a;canvas绘制图时会出现线条模糊情况&#xff0c;这是因为显示屏像素和canvas中定义的一个点不完全重合&#xff08;相差0.5&#xff09;导致…

MySQL INFORMATION_SCHEMA 使用

一、INFORMATION_SCHEMA介绍 第一个查询看看库里有多少个表&#xff0c;表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名&#xff0c;数据库的表&#xff0c;表栏的数据类型与访问权限等。再简单点…

mrql初级教程-使用(er)

最近使用mrql做xml文件解析&#xff0c;使用xpath来进行判断使用的方法如下&#xff0c;其中t.mrql文件如下&#xff1a;v args[1];store ty:source(xml,args[0],{"page"},xpath(.[idID6]/place));ty;执行下面的命令mrql -local t.mrql hdfs://183.175.12.220:9010/u…

web Worker简介、web Worker报错分析、作用

web Worker&#xff1a; web Worker是运行在后台的javascript&#xff0c;不会影响性能&#xff0c;常用于高耗费CPU的任务&#xff0c;必须部署到线上才可以正常使用&#xff0c;这里有三个方法比较重要&#xff0c;需要注意&#xff1a; postMessage(),发送消息&#xff0c…

SSE事件作用,错误分析

Server-Sent&#xff08;SSE&#xff09;&#xff1a; server sent用于自动接收服务器更新&#xff0c;当服务器发生数据更新时&#xff0c;此事件将自动执行来更新页面数据&#xff0c;常用于博文、股价等不断变化的项目中。下面将简单介绍SSE中三个常用事件&#xff1a; on…

css3盒模型、过渡、转换介绍

CSS3中盒模型&#xff1a; 前面CSS中学到的盒子模型给padding、border会撑开盒子的大小&#xff0c;实际大小要通过计算才能得到&#xff0c;为了解决这个问题&#xff0c;CSS3推出了box-sizing属性来解决此问题&#xff0c;当box-sizing的属性值为border-box时&#xff0c;无…

css3中animation动画、浏览器私有前缀、文字阴影、滤镜

animation动画&#xff1a; 可以设置多个节点来控制一个或 一组动画&#xff0c;动画可以实现更多变化&#xff0c;更多控制&#xff0c;连续自动播放等效果。动画的使用分两步&#xff1a;1、定义动画 2、调用动画&#xff08;调用必须写调用名称和持续时间)&#xff0c;其属…

ASP.NET 页生命周期

参考&#xff1a;http://msdn.microsoft.com/zh-cn/library/ms178472(vvs.100).aspx转载于:https://www.cnblogs.com/pengpenghappy/p/3778721.html

计算机基础简介、编程语言、翻译器、数据储存

计算机基础&#xff1a; 编程语言&#xff1a; 编程语言分机器语言、汇编语言、高级语言&#xff0c;机器语言只有计算机本身认识&#xff0c;是二进制的&#xff1b;汇编语言是较低层的指令式语言&#xff0c;有很多指令单词发出命令&#xff0c;程序员可以认识&#xff0c;…

IE8“开发人员工具”(下)

浏览器模式 说白了&#xff0c;就是让用户选择当前页面用何种IE版本去渲染。 文本模式 说起“文本模式”这个名词&#xff0c;这又要回到渲染页面的3种模式了&#xff1a;诡异模式&#xff08;Quirks mode&#xff0c;也有翻译为兼容模式、怪异模式的&#xff09;&#xff0c;标…

javascript历史、作用、三大组成、javascript代码书写位置、注意事项、变量

JavaScript简介 JavaScript历史&#xff1a; JavaScript是一门解释型、动态类型、基于对象的脚本语言(不需要编译&#xff0c;直接执行&#xff0c;与之相对的是编译型语言)&#xff0c;由美国网景公司的布兰登艾奇发明&#xff0c;起初称LiveScript&#xff0c;其简称js。 …

javascript中基本包装、算数运算符、递增递减运算符、赋值运算符、比较运算符、逻辑运算符、运算符优先级

基本包装类型&#xff1a; 指基本类型的数据变量通过调用属性或者方法包装成了复杂类型&#xff0c;这个变量也称为基本包装类型对象 <script>var str hello;str str.replace(ll, ee);console.log(str); //heeeo//通过基本包装&#xff0c;无论Boolean对象中传入true还…

流程控制介绍,顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制 流程控制&#xff1a;指代码的执行顺序&#xff0c;有三种方式&#xff1a;顺序结构、分支结构、循环结构 顺序结构&#xff1a; 代码从上到下&#xff0c;从左到右的执行顺序。 分支语句&#xff1a; if语句、if-else语句、if-else if-else语句、switch-case语…

楼宇对讲门铃的芯片选型分析

目前很多的高层住宅都使用了对讲门铃了&#xff0c;在频繁使用中&#xff0c;门铃会出现的越来越多种类&#xff0c;下面我就简单的介绍会有用到的几款芯片. 语音通话芯片&#xff1a;D34018,D34118,D5020,D31101; D34018 单片电话机通话电路&#xff0c;合并了必 需的放大器…

javascript中内置对象简介、Array

内置对象&#xff1a; javascript的三种对象&#xff1a;1.内置对象—JavaScript自带的对象&#xff1b;2.自定义对象—自己定义构造函数创建对象&#xff1b;3.浏览器对象— BOM时候介绍&#xff0c;几个常用内置对象&#xff1a;Math Date String Array Object Array对象&a…

javascript中Date对象及方法

Date对象&#xff1a; 该对象呈现时间中的某个时刻。其本质是自1970年1月1日&#xff08;UTC&#xff09;起经过的毫秒数&#xff0c;相关属性的方法如下&#xff1a;&#xff08;如果Date对象中传入指定的时间&#xff0c;则以传入的指定时间返回相关数据&#xff0c;就不会以…

JAVA Web学习篇--Servlet

Servlet由来 做过BS项目的人都知道&#xff0c;浏览器可以依据HTML静态标记语言来显示各式各样的网页。可是假设我们须要在网页上完毕一些业务逻辑&#xff1a;比方登陆验证。或者说网页显示的内容在server的数据库中。假设是这样&#xff0c;除了负责显示的HTML标记之外&#…

javascript中Math对象及方法

Math对象&#xff1a; 其所有属性与方法都是静态的&#xff0c;其相关属性和方法如下&#xff1a; 继&#xff1a; 继&#xff1a; 提示&#xff1a;本文图片等素材来源于网络&#xff0c;若有侵权&#xff0c;请发邮件至邮箱&#xff1a;810665436qq.com联系笔者 删除。 笔者…

javascript中NaN属性、null对象、Number对象、Object对象

NaN属性&#xff1a; 表示不是一个数字&#xff0c;是全局对象的属性&#xff0c;其初始值为NaN <script>console.log(NaN NaN); //false</script>null对象&#xff1a; 特指对象的值未设置 <script>console.log(null undefined); //trueconsole.log(nul…

Apache安装、配置、卸载

下载安装配置Apache&#xff1a; 1.将Apache官方下载地址&#xff1a;https://www.apachelounge.com/download/&#xff0c;复制到浏览器打开&#xff0c;选择系统支持的版本下载&#xff0c;如&#xff1a; 2.将下载好的压缩包剪贴到C盘根目录&#xff08;这里为了方便&…