前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]
滑动门门技术
所谓滑动门技术就是利用背景图片的分割,实现不同内容长度下,按钮的可伸缩性。
具体思路:根据文本自适应大小,我们可用两个独立的背景图像来创造它。一个在左边,一个在右边。把这两幅图像想象成两扇可滑动的门,它们滑到一起并交迭,占据一个较窄的空间;或者相互滑开,占据一个较宽的空间。
所用图片:
a{height: 92px;line-height: 92px;padding-right: 52px;display: inline-block;background: url(Sliding.png) no-repeat right top;
}
span{display: inline-block;height: 92px;line-height: 92px;background: #fff url(Sliding.png);
}
span{padding:0px 10px 0px 30px;font-size: 20px;font-weight: bold;color: #fff;
}
<a href="javascript:;"><span>点击进入首页</span></a>
<a href="javascript:;"><span>更多详情</span></a>
<a href="javascript:;"><span>联系</span></a>
执行结果:
字体图标
通常下载字体图标网站:
IcoMoon、iconfont、fontello
> SVG (可缩放矢量图形)
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
svg格式,是基于svg字体渲染的一种格式。
> 操作步骤
1,打开下载字体网站,以IcoMoon为例,点击右上角IcoMoon App按钮。
2,上传以前使用的字体的selection.json文件(第一次使用字体图标忽略此步骤)。
3,点击下面需要使用的字体图标。
然后点击Generate Font按钮,再点击Download下载。
4,打开压缩包把fonts文件夹与style.css文件复制到项目目录,即可使用。
使用方案一:
引入style.css文件后,为span标签添加相应图标的class即可:
注:span标签内就不要再加其他内容了
<span class="icon-image"></span>
使用方案二
写入css样式:
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?e2ufrf');
src:url('fonts/icomoon.eot?e2ufrf#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?e2ufrf') format('truetype'),
url('fonts/icomoon.woff?e2ufrf') format('woff'),
url('fonts/icomoon.svg?e2ufrf#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
i{font-family: 'icomoon';font-style: normal;/*可忽略不写*/vertical-align: -10%;/*可忽略不写*/
}
<p><i></i> 上传图片</p>
注:i标签内的内容,是在压缩文件内有个demo.html,其内容中复制到的(复制“”内容)
执行结果:
前端笔记—从入门到坟墓[CSS][滑动门技术与字体图标][11]相关推荐
- css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享 发布时间:2009-10-15 12:48:01 作者:佚名 我要评论 可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
- css滑动门技术的应用,DIV+CSS滑动门技术简介
你对DIV+CSS滑动门技术的概念和使用是否熟悉,这里和大家分享一下,其实DIV+CSS滑动门技术是一种只需要鼠标悬停便可自动切换板块的JS特效,相信本文介绍一定会让你有所收获. DIV+CSS滑动门 ...
- 前端笔记—从入门到坟墓[HTML][知识准备][1]
常用浏览器 IE/火狐/谷歌/Edge/Safari/Opera/等 注:通常前端学习,一个核心之一就是在于需要做浏览器适配工作,所以了解各种浏览器内核也就尤为重要. 通常编写HTML与CSS时在谷歌 ...
- 前端笔记—从入门到坟墓[网站基础与优化][12.1]
网站icon图标 引入方式: <link rel="shortcut icon" href="favicon.ico" type="image/ ...
- CSS学习笔记——滑动门技术
1.CSS滑动门技术产生的原因 例如:导航栏中,同样的背景,字数不同,背景可以自己适应字数的增加,本质上就是各种形状背景的左右自由拉伸,以适应元素内部的文本内容. 2.CSS精灵技术 精灵技术的本质: ...
- HTML+CSS(精灵图)实现微信滑动门技术
微信滑动门技术 为了使各种[特殊形状的背景]能够[自适应元素中文本内容的多少],出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强 ...
- 前端复习 Sixty Day 滑动门技术
1.滑动门技术原理 为了使各种特殊形状的背景能够自适应元素中文本文本内容的多少,出现了css滑动门技术,它从新的角度构建页面,是各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性强, ...
- CSS——CSS滑动门及其应用(制作微信导航栏) ※
滑动门 先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...
- CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
最新文章
- hashtable源码解析
- 认证登录时代来临,主流验证登录方式盘点
- 你还不知道 Eureka 和 zookeeper 的区别吗?
- python学习之路
- SDCC 2015前端专场札记:Facebook、百度、腾讯、美团、饿了么等互联网公司的前端实战
- opc服务器组态文件已写保护_iscada电力组态监控源代码,电力组态版,只有opc驱动版本...
- spring 使用XML配置开发Spring AOP
- FormView控件
- 数据导入导出、备份恢复
- Google research 一行预处理代码,让你的CV模型更强!
- 图像处理中各种边缘检测的微分算子简单比较(Sobel,Robert, Prewitt,Laplacian,Canny) 【转】
- appium自动化测试环境部署_Android
- ZOJ - 2865 A very easy task
- 如何构建批流一体数据融合平台的一致性语义保证?
- 计算机专业学ROSTCM,ROST-CM软件分词和词频统计用法体验
- 1万条数据大概占多大空间_国漫丨2019年上半年漫画数据报告
- es文件浏览器开启ftp服务器,es文件浏览器访问ftp服务器
- pmp知识点(11)-项目风险管理
- 服务器主板2个芯片供电端短路了,笔记本主供电短路维修思路
- 解决ubuntu 16.04 启动黑屏,出现dev/sda7: clean, xxx/xxx files, xxx/xxx blocks字样问题
热门文章
- Python风轮绘制
- Apple4.21春季新品发布会
- python列表的嵌套_Python-嵌套列表list的全面解析
- c语言欧拉求解素数个数,初学MillerRabin素数测试
- iOS苹果内购流程(Apple Pay)
- 嵌入式工程师综合笔试题之指针和内存
- 解方程AX=b与矩阵分解:奇异值分解(SVD分解) 特征值分解 QR分解 三角分解 LLT分解
- 不知道怎么用小图标?简单的iconfont矢量图标教学,装饰你的网页
- 基于ssm线上花店管理系统获取(java毕业设计)
- macOS “应用程序不能打开”