---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>---恢复内容结束---</p> <style> div{ width: 100px; height: 100px; background-color: cyan; margin-top: 10px; font:900 18px/100px "STsong"; text…

复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重新撑开父级高度 子级浮动(约定俗成如果有子级浮动, 该子级的所有兄弟都应该浮动) 父级清浮动, 拥有合适的高度, 让兄弟标签布局不出现问题(约定俗成父级都必须清浮动) float: left | right; .sup:after { content: ""; display: block…

字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css"> 设置预定好的类名 <i class="fa fa-**"></i> ''' 盒子显隐 ''' 1.显示效果 displa…

-盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 background-color:rgba( 0 0 0 0 ) 背景色,透明色 显隐方式(1)  消失的时候不占位置,显示的时候占位(不可以动画处理) display:none; 消失的时候不占位置,显示的时候占位(不可以动画处理) display:block; 盒子显示 显隐方式(2)  无论是…

1.盒子的显隐 display:none      在页面中不占位,采用定位布局后,显示隐藏都不会影响其他标签,不需要用动画处理时,一般用这个 opacoity : 0        在页面中占位,采用定位布局后,显示隐藏都不会影响其他标签,要用动画处理时,一般用这个 一般显隐操作的盒子都是采用定位布局: 悬浮父级,显示子级. 2.相对定位布局 设置定位属性,要先打开定位方位 position: relative; 通过定位方位完成布局 top: 100px; left: 100px; bott…

使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页上轻松地添加图标.由于使用的是字体图标,所以利用文本相关的标签引用,并且放大不会失真.但是和字体不一样的是,如果用<i>标签或者<b>标签等引用的时候,并不会有斜体或者粗体的效果,但是<u>标签却有下划线的效果.在font-awesome官网上找到icon的名字,在引用的元…

响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icons>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://webstandardssherpa.com/reviews/responsive-webfont-icons,以及作者相关信息 ——作者:Jason ——译者:大漠 响应式…

字体图标介绍 网页中图片有很多优点,但也有很多缺点,会增加文件的大小以及增加http请求.这时候就需要用的字体图标(iconfont).字体图标的优点,可以跟图片一样改变透明度.旋转等,本质上是文字,可以改变颜色,产生阴影等:本身体积小:几乎支持所有浏览器.移动端设备必备. 项目中字体图标使用流程 1.UI人员设计字体图标效果图(svg) 2.前端人员上传生成兼容性字体文件包 3.前端人员下载兼容字体文件包到本地 4.把字体文件包引入到HTML页面中 生成字体文件包方法 上传文件到专门的网站,生…

目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真. 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的.此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦.. 这就是字体图标(iconfont). 1: 字体图标优点 可以做出跟图片一样可以做的事情,改变透明…

字体图标的作用: 1. 可以做出图片一样可以做的事情, 改变透明度, 旋转度,等... 2. 但是本质其实是文字,可以很随意的改变颜色, 产生阴影,透明效果等 3. 本身体积更小,但携带的信息并没有消减 4. 几乎支持所有的浏览器 5. 移动端设备必备良药 字体图标使用流程: 1. UI人员设计好字体图标效果图 (svg) 使用软件 illustrator 或sketch 2. 前端人员上传生成兼容性字体文件包 https://icomoon.io/ iconfont.cn 3. 前端人员下载兼…