做一记录，免得每次都去网上搜图标对应的class. 在线版本：http://dnt.dkill.net/dnt/font/
第二、客户端会缓存这些CSS或JS文件，每次更新了 JS 或 CSS 文件后，改变版本号，客户端浏览器就会重新下载新的JS或CSS文件，起到刷新缓存的作用。...原理： 例如 .htaccess 设置的 CSS、JS 缓存都有一个过期时间，如果在访客的浏览器中已经缓存了这些文件，在这些缓存未过期之前，浏览器只会优先从缓存中读取这些 CSS 和 JS 文件，如果你在服务器上修改了这些文件...="index.css" /> 另外一种更改CSS文件名的方法是将版本号写到文件名中，如： css" /> CSS 文件更新后...，改一下文件名中的版本号即可： css" /> 方法二：给CSS文件添加版本号 每次修改 CSS 文件后还要修改文件名确实有点麻烦...如原先 HTML 中的 CSS 调用语句如下： css?
最近突然有一个想法，文章中的链接不够明显，可不可以在不修改类名的前提下，给所有 a 标签添加一个图标呢？ 答案是肯定的，只有想不到，没有做不到。...我们可以分析一下， bootstrap 的组件图标库。 它们在图标标签上加了一个伪类，这个伪类就代表了相对应的图标。 那么我可以直接拿这个标识来用吗？...我们先看一下字体的 CSS 源码，这里以阿里图标库的 iconfont 生成的 CSS 文件为例： @font-face {font-family: "iconfont"; src: url('iconfont.eot...也可以直接生成 Unicode 代码，放在你 CSS 样式文件的开头，就可以愉快的给某个元素批量设置自定义图标了。...未经允许不得转载：w3h5-Web前端开发资源网 » 使用纯CSS给网站文章中的外链添加小图标
最近突然有一个想法，文章中的链接不够明显，可不可以在不修改类名的前提下，给所有 a 标签添加一个图标呢？ 答案是肯定的，只有想不到，没有做不到。...我们可以分析一下， bootstrap 的组件图标库。 它们在图标标签上加了一个伪类，这个伪类就代表了相对应的图标。 ? 那么我可以直接拿这个标识来用吗？...我们先看一下字体的 CSS 源码，这里以阿里图标库的 iconfont 生成的 CSS 文件为例： @font-face {font-family: "iconfont"; src: url('iconfont.eot....article-content p a[target=_blank]:after { content: "\e989"; } 当然，可以把 iconfont 下载到本地，把 iconfont.css...也可以直接生成 Unicode 代码，放在你 CSS 样式文件的开头，就可以愉快的给某个元素批量设置自定义图标了。
Hexo 支持FontAwesome图标，就是在代码中出现名字以fa fa开头的类名，本文介绍具具体图标来源和使用方法。...图标列表 官方链接 New Icons in 4.7 Web Application Icons Accessibility Icons Hand Icons Transportation...Text Editor Icons Directional Icons Video Player Icons Brand Icons Medical Icons 使用方法 首先引入CSS...文件： 在Hexo中不需要手动引入，可以直接使用。...用 输出图标 比如在hexo文章中添加代码 可输出 家 图标
我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图： 把下载包里面的 fonts 文件夹放入页面根目录下 在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中 一定要注意字体文件路径问题...demo.html ，复制想要的图标，粘贴进我们的 标签中。...3.3.3 字体图标的追加 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。...3.4.4 引入文件 点击项目中下载至本地按钮，将解压的文件夹整体放入项目中，在项目中引用文件中的 iconfont.css 文件 或者点击查看在线链接，生成一个在线地址直接在项目中引用 3.4.5...默认，元素放置在父元素的基线上 top 把元素的顶端与行中最高元素的顶端对齐（顶线对齐） middle 把此元素放置在父元素的中部（中线对齐） bottom 把元素的顶端与行中最低的元素的顶端对齐（底线对齐
动画库的使用 https://daneden.github.io/animate.css/ 字体图标 我们经常把网页常用的一些小的图标，做成精灵图，然后通过background-position去调整位置...在CSS3中可以使用字体图片，即使用图标跟使用文字一样。...CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。...justify-content(重点) justify-content主要用来设置主轴方向的对齐方式 ，可选的值有： 可选值： flex-start: 弹性盒子元素将向起始位置对齐 flex-end:...弹性盒子元素将向结束位置对齐。
列偏移数量，每个列都可以指定向右偏移几列位置（不能用float）,偏移的列会影响后续的列,主要作用是列左右留白，列右对齐，列居中 A. .col-xs-offset-n :在 xs 下，当前列向右偏移...列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离 B、col-lg-pull-n...Bootstrap 组件 － 图标字体.glyphicons 在页面中，显示为图标，本质上是文字，可以设置字体，颜色，大小，阴影等，Web程序中常用的图标字体： (1)....FontAwesome 675 个 免费 由于客户端不具备 bootstrap 中的图标字体，所以使用自定义的图标字体必须声明，需要在服务器端做以下操作： (1). 声明字体 ? (2)....@import 功能 在 Less 中的@import ，在服务器端将多个 less 文件的内容整合到一个 less 文件中 @import "xxx.less"; 在CSS中使用@import功能将多个
注意：读取到静态属性中 springboot无法通过给静态变量赋值，在对应字段的set方法去掉static即可。
还是使用以前的固定单位去布局，会引发两个问题： （1）分辨率太大，网页两边留白太多 （2）分辨率太小，页面显示不完全 概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的...flex布局，能够将容器，按照特定的比例进行划分，从一维的角度，去更好的对容器进行布局。.../landscape No 横屏或竖屏 Resolution 分辨率（dpi/dpcm） Yes 分辨率 Color 整数 Yes 每种色彩的字节数 color-index 整数 Yes 色彩表中的色彩数...Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。字体图标是在 Web 项目中使用的图标字体。...css和字体库文件在同一级别上。 图标 --> <!
end：将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。 before：在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。 ...end：将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。 before：在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。 ...end：将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。 before：在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。 ...end：将弹出窗口对齐到容器的末尾。 这相当于'flex-end'。 before：在容器前对齐弹出窗口。 这不等同于任何CSS定位模型。 ...它是一个“小”的工具提示，它最多应该是一行或两行，并且最大宽度为320px。 通常，工具提示与图标或按钮相关联，并提供有关该元素的标签或简要帮助文本。
前言 导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。...-- /.container-fluid --> 品牌图标 将导航条内放置品牌标志的地方替换为 元素即可展示自己的品牌图标。..."> 表单 将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态...两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 标签里。...还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。
为什么要使用 CSS Scroll Snap 随着移动设备和平板设备的兴起，我们需要设计和构建可以轻触的组件。 以图库组件为例。 用户可以轻松地向左或向右滑动以查看更多图像，而不是分层结构。...这意味着，滚动必须对齐到滚动容器的开始处。 在下图中，每次用户向右滚动时，浏览器都会将项目捕捉到容器的开头。...如果你使用的是手机或平板电脑，可以向右移动滚动条或使用触摸。应该能感受到每个项目是如何从其容器的开始抓取的。 演示地址：https://codepen.io/shadeed/pe......如果scroll-snap-type是垂直的，则对齐对齐将是垂直的。 参见下图： 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。...滚动容器的 center 子项目将吸附到其滚动容器的中心。 滚动容器的 end 子项将对齐到其滚动容器的末尾。
你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。...为什么要使用 CSS Scroll Snap 随着移动设备和平板设备的兴起，我们需要设计和构建可以轻触的组件。 以图库组件为例。 用户可以轻松地向左或向右滑动以查看更多图像，而不是分层结构。...这意味着，滚动必须对齐到滚动容器的开始处。 在下图中，每次用户向右滚动时，浏览器都会将项目捕捉到容器的开头。...如果你使用的是手机或平板电脑，可以向右移动滚动条或使用触摸。应该能感受到每个项目是如何从其容器的开始抓取的。 演示地址：https://codepen.io/shadeed/pe......如果scroll-snap-type是垂直的，则对齐对齐将是垂直的。 参见下图： image.png 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。
自己练习使用字体图标 从iconfont中下载图标练习 方式一 通过对应字体图标的Unicode来显示代码; 方式二 利用已经编写好的class, 直接使用即可; 四....结合CSS元素定位，并且找出对应的练习案例（2个） 第一个模仿京东我的购物车 第二个模仿B站头部服务列表 务必下载！！...float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果; 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具; 绝对定位、浮动都会让元素脱离标准流...浮动规则 浮动规则一 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 浮动规则二 如果元素是向左...元素、块级元素的文字内容 浮动规则五 规则五: 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐 2.3.
3.CSS3引入的新布局模型 4.伸缩元素，自由填充，自适应 2.优势： 1.可在不同方向排列元素 2.控制元素排列的方向 3.控制元素的对齐方式 4.控制元素之间等距 5.控制单个元素放大与缩放比例...2.flex容器的属性和布局 1.属性 1.flex-direction：设置元素的排列方向 row 从左向右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上...stretch:(默认)当元素的高度没有设置,则元素的高度会拉伸至容器高度一致 flex-start：在交叉轴上向起点位置（向上或向左）对齐 flex-end:在交叉轴的结束位置...（向下或向右）对齐*/ align-items: center; } .txt{ background-color: green; text-align: center;...flex-basis：不需要前提，将元素宽度改变为flex-basis宽度*/ /* align-self:重写元素在容器内的交叉轴上的对齐方式，auto表示默认，继承容器的属性 */ .aaa{
定义 弹性盒（Flexible Box，简称Flexbox）属性是一些与弹性盒子布局相关的CSS属性。 概述 弹性盒布局是 CSS3 规范中提出的一种新的布局方式。...该布局模型的目的是提供一种更加灵活的方式来对一个容器中的条目进行排列、对齐和分配空白空间。...flex-direction 决定主轴的方向（即条目的排列方向），可以是水平方向（自左向右，或自右向左），也可以是垂直方向（自上而下或自下而上） flex-grow 定义条目的放大比例，默认为0，即如果存在剩余空间...flex-shrink 定义条目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-wrap 定义如果一条轴线排不下所有条目，是否换你行或如何换行。...编辑 变更点 弹性盒属性全部是CSS3新增加的。
网格（Grid） 属性 属性 描述 CSS grid-columns 指定在网格中每列的宽度 3 grid-rows 指定在网格中每列的高度 3 14....线框(Linebox) 属性 属性 描述 CSS alignment-adjust 允许更精确的元素的对齐方式 3 alignment-baseline 其父级指定的内联级别的元素如何对齐...列表(List) 属性 属性 描述 CSS list-style 在一个声明中设置所有的列表属性 1 list-style-image 将图象设置为列表项标记 1 list-style-position...3 image-orientation 指定用户代理适用于图像中的向右或顺时针方向的旋转 3 page 指定一个元素应显示的页面的特定类型 3 size 指定含有BOX的页面内容的大小和方位...icon 为元素指定图标 3 nav-down 指定用户按向下键时向下导航的位置 3 nav-index 指定导航（tab）顺序。
示例： 这段文本向左对齐 这段文本向右对齐 将长单词或 URL 换行显示。...HelloCSS Hello-CSS 效果： 阴影 可以为文本添加一个或多个（用逗号分隔）阴影效果，以增强文本的可读性或创建独特的设计效果。...h-shadow：水平阴影的位置。可以为正值（向右偏移）或负值（向左偏移）。 v-shadow：垂直阴影的位置。可以为正值（向下偏移）或负值（向上偏移）。 blur：可选。...none：默认值，保持文本的原始大小写形式。 capitalize：将每个单词的首字母转换为大写。 uppercase：将文本全部转换为大写。 lowercase：将文本全部转换为小写。
简单方便将文字对齐的类，它们一般应用在 p 标签上（用在 div 上不符合规范，用在 span 标签则不能生效）。...来源的名称可以包裹进 标签中。 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。...实现三角符号 4.13 左右浮动 添加一个类 .pull-left 或 .pull-right，可以将任意元素向左或向右浮动 使用 .text-hide 类可以用来将元素的文本内容替换为一张背景图 我是隐藏文本 5 字体图标 所有图标都需要一个基类和对应每个图标的类...active 鼠标悬停在行或单元格上时所设置的颜色 success 标识成功或积极的动作 info 标识普通的提示信息或动作 warning 标识警告或需要用户注意 danger 标识危险或潜在的带来负面影响的动作
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
