首页
学习
活动
专区
圈层
工具
发布

【CSS3】css开篇基础(5)

❤️❤️前言~ Hello, Hello~ 亲爱的朋友们,这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏。如果你对我的内容感兴趣,记得关注我以便不错过每一篇精彩。...步骤: 字体图标的下载 字体图标的引入(引入到我们html页面中) 字体图标的追加(以后添加新的小图标) 3.1字体图标的下载 icomoon字库:外网,不需要登录即可下载 http:...//icomoon.io 1.点击 IcoMoon App 2.选择需要的图标 3.点击Generate Font 4.点击下载 阿里 iconfont字库:免费,但是需要登录iconfont-阿里巴巴矢量图标库...,我们需要添加新的字体图标到原来的字体文件中。...三角强化 我们不只是能做出如上最简单的三角形,还能根据不同边框长度做出更多不同的三角形,在这三角形的做法我就只说一种,另外的你们自己去探索。此外还说一点不能做出三角形的情况。

42810

05_CSS进阶技巧

因此使用步骤可以分为: 字体图标的下载 字体图标的引入(引入到我们html页面中) 字体图标的追加(以后添加新的小图标) 3.3.1 字体图标的下载 推荐下载网站: icomoon 字库 比较全面,国外服务器...点击 IcoMoon App->选择需要的图标->点击Generate Font->点击下载 阿里 iconfont 字库 免费图标库。...3.3.3 字体图标的追加 如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。...3.4 阿里 iconfont 字体图标 3.4.1 新建项目 在顶部菜单栏找到->资源管理->我的项目->新建项目 右边点击新建项目,用于保存自己常用的图标 3.4.2 添加购物车 项目新建完成后,需要往项目里添加我们要想使用的图标...顶部菜单找到图标库,搜索⼀个想要的图标,然后添加到购物⻋ 3.4.3 添加图标到项目中 添加到购物车完成后,点击右上角的购物车图标,选择添加至项目 选择我们刚刚创建的项目->点击确定 之后自动跳转到对应的项目里了

40810
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    分享八个免费的Vue图标库,轻松修饰你的应用

    它的每个图标作为单个文件组件,所以可以准确导入每个Vue项目所需的图标。 而且,该库使用的是SVG图标,所以可以轻松更改来自定义自己喜欢的图标 ?...具备这两种功能使Vuetify是为寻求一致UI的开发人员的绝佳选择。 它凭借每周的补丁程序和不断的更新,Vuetify可能仍会是数年来最受欢迎的Vue库之一。 ? 5....具备使用CSS预处理程序的能力,它几乎适用于几乎所有开发团队。 AT UI中默认的最小样式和字体选择功能,并且添加到任何项目中都非常直观且容易。...Icomoon Icomoon是超级流行的图标库,谷歌和苹果等一些主要公司都在使用它。它提供了大量的SVG图标和图标字体,同时也有很多高级的付费选项,可以将其混合搭配以找到理想的图标。...如果想要快速上手该项目,只需要复制粘贴并嵌入代码到项目中。 ? 建立自己的图标库 如果在不同的库中选择SVG图标,可以用其他办法将这些图标聚合在一起。

    9.4K21

    App之可点击元素的设计

    hi,这是系列文章:App之xxx的第3篇,前2篇我总结了 App之“文字”的设计技巧 App之底部导航栏的设计 直接点击可以查阅以上2篇文章。 我为什么写这个系列的文章。...在工作之余,我决定把所研究的内容写成关于app之xxx的系列文章,文章选择的题材会往“小而精”这个方向努力,范围在我的工作内容中选取。 今天来总结下App的可点击元素的设计。...三、卡片式,点击卡片任意位置打开详页,可以使app逻辑简单明了。 同时,卡片UI可以做得比较丰富,图片、标题、简介、按钮等元素都尽情表达。如 微信的消息列表: ? QQ的消息列表 ?...4.1语义化的图标 图标需要具有高度可识别性,具有高度识别性的图标我称为“语义化图标”,因为看到这些图标,已经不需要更多的文字来解释它的具体含义了。...加号--“新建、增加”的含义,比如 印象笔记的加号就是表示新建新笔记; 微信、QQ、支付宝的表示发起群聊、添加朋友、扫一扫、收付款; 知乎的加号,是发表新的问题; 百度云的表示上传照片、上传视频; 网易新闻的表示切换栏目

    3.1K70

    程序员自我欺骗的 9 个谎言

    计算机是由晶体管构成的,没有任何巧妙的标点符号和类型理论可以掩盖一个事实,即我们所有的代码都归结为像一点点掺杂的硅,选择在代码中向左或向右向下移动来优化,没有其他技巧可以逾越。...而且,如果有人为自己的姓名字符串选择了新的表情符号,但该表情符号未在列表框列出,该怎么办?...夏令时会增加和减少小时数,这个在每年某个变化的时间点都会这样做。如 2000 年美国这一转变发生在 4 月。今年,美国在 3 月的第二个星期日更改了时钟。...每当我要求 Mac 检查文件系统并修复错误时,它总是会告诉我文件“权限错误”,它们会尽力为我修复文件错误。如果没有我的授权许可,该软件如何获得更改我的文件访问权限?...如果我们用自己的自定义引导程序替换 BIOS,可以吗?或许可以,但是您的计算机中仍然有许多固件程序需要替代, 如您的磁盘驱动器、网卡和视频卡等等。

    87430

    前端成神之路-品优购项目(一)

    比特虫 总结: 代码: 注意: 她(它)是显示在浏览器中的网页图标...Keywords 关键字 Keywords是页面关键词,是搜索引擎关注点之一。Keywords应该限制在6~8个关键词左右,电商类网站可以多 少许。...一般情况下,三大标签里面的优化词,都是专门的优化人员写的,我们大概了解一下规范就可以了。 我们的主要任务是,能写出这三大标签, 然后把优化人员给我们的内容,添加到里面。 9....推荐网站: http://icomoon.io icomoon字库 IcoMoon成立于2011年,推出的第一个自定义图标字体生成器,它允许用户选择他们所需要的图标,使它们成一字型。...追加字体图标 如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做 把压缩包里面的selection.json 从新上传,然后,选中自己想要新的图标

    1.9K20

    CSS笔记(16)

    使用精灵图的时候需要精确测量,每个背景小图片的大小和位置. 其实就是放一个盒子,然后给盒子添加一个背景图片,移动背景图片的位置,让想要的图案出现在盒子里....字体图标的优点: 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器请求. 灵活性:本质其实是文字,可以随意的更改颜色,产生阴影,透明效果,旋转等....如果遇到一些结构和样式比较复杂的小图片,就用精灵图. 字体图标下载: icomoon字库 阿里icofont字库 如何使用字体图标: 这个比较麻烦,我一步一步讲解....我使用的是icomoon网站,进去以后点击右上紫色的icomoon App....点进来以后会有很多的图标可以选择 selection是我们已经选择好的字体图标,generate font就是生成字体图标.我们选好以后生成字体图标.

    79220

    字体图标

    字体图标优点 可以做出跟图片一样可以做的事情,改变透明度、旋转度,等.. 但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小,但携带的信息并没有削减。...推荐网站: http://icomoon.io icomoon字库 IcoMoon成立于2011年,推出的第一个自定义图标字体生成器,它允许用户选择他们所需要的图标,使它们成一字型。...font-family: "icomoon"; } 第三步:盒子里面添加结构 span::before { content: "\e900"; } 或者      追加新图标到原来库里面 如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做 把压缩包里面的selection.json...从新上传,然后,选中自己想要新的图标,从新下载压缩包,替换原来文件即可。

    4.5K20

    编写干净的C#代码技巧

    乍一看,任何以前从未见过您的代码的开发人员都必须尽可能地理解它,它帮助我们更好地理解代码。 下面是编写干净C#代码的一些重要技巧。 使用好的IDE 首先,为您的技术堆栈选择最好的IDE。...; } } 注意格式 对代码进行格式化可以提高代码的可读性。制表符优于空格,记得吗?...很讨厌,是吗?现在,Visual Studio有一个内置特性,可以完美地格式化代码。要做到这一点,只需到相关的类中按CTRL + K和CTRL + d,看到了吗?很酷,是吗?...相反,您可以做的是创建一个共享库项目,并在每个必需的项目中引用它。通过这种方式,我们构建了可重用的函数。而且,如果需要进行任何修改,您只需要更改共享库中的代码,而不是在任何地方更改。...把您的解决方案组织好 你构建结构化的解决方案吗?建立一个这样的系统是非常令人满意和重要的。下面是我遵循洋葱架构的一个解决方案。 在单个项目中仍然可以完成所有工作。

    57130

    Ways to Use Icons on Android (2)

    在Fontello主页上可以访问大量专业级的开源图标,并支持添加自定义的图标(SVG格式),而且可以在网站上选择不同来源的图标合并到单个字体文件中。...如下图所示,我添加了两个Custom Icons,从Fontelico中选了6个图标,从Font Awesome中选了3个图标等,最终导出得到的图标字体文件就会包含这些我需要的图标。 ?...自定义图标名称和对应的Unicode:在页面顶部的配置中可以选择设置图标名称的前缀,例如fe- ? ?...2.IcoMoon IcoMoon网址:https://icomoon.io/app/ IcoMoon和Fontello一样,既可以添加自己的图标,又可以从其他的图标库中选择图片,而且也支持设置图标的名称和...看下下面的代码就清楚了,下面显示了4中不同的调用方式,并给出了不同方式下的显示结果 ?

    73110

    llvm入门教程-Kaleidoscope前端-4-JIT和优化器支持

    本章介绍两种新技术:向语言添加优化器支持和添加JIT编译器支持。这些新增内容将演示如何为Kaleidoscope语言获得漂亮、高效的代码。 琐碎的常数折叠 我们在第3章中的演示是优雅的,并且易于扩展。...一旦设置了PASS管理器,我们将使用一系列的“add”调用来添加一组LLVM PASS。 在本例中,我们选择添加四个优化过程。我们在这里选择的通道是一组非常标准的“清理”优化,对各种代码都很有用。...添加JIT编译器 LLVM IR中提供的代码可以应用多种工具。...TheFunction) return nullptr; 要实现这一点,我们将从添加一个新的全局FunctionProtos开始,它保存每个函数的最新原型。...答案出奇的简单:KaleidoscopeJIT有一个简单明了的符号解析规则,它用来查找任何给定模块中没有的符号:首先,它搜索已经添加到JIT的所有模块(从最新到最旧),以找到最新的定义。

    1.1K30

    前端不止:请告诉我,你要什么样的图标

    制作雪碧图的工具有很多,我比较常用的在线雪碧图工具是:Sprite Cow,或者是NodeJS平台下的构建工具插件,如:webpack-spritesmith。...它能提供如裁剪路径、Alpha通道、滤镜效果等复杂渲染能力,具备传统图片没有的矢量功能,还可以被记事本等阅读器、搜索引擎访问。...博客和视频中谈到了多个点导出SVG需要注意的地方,由于篇幅限制,这里简单描述三个tips: 选择适合绘画的画板 你有在网页上嵌入过SVG吗,给它指定一个高度和宽度,然后发现它其实比你指定的尺寸要小?...选择合适的导出选项 上图展示的选项是推荐的生成适合Web使用的SVG。如果你不想使用Web字体,可以选择把文本转换成轮廓。...至于“设计师和开发者应该成为好朋友”,作为一名Dev,我就跟好多设计师都是朋友(至少我是这么认为的)。 而为了更好的做到沟通顺畅和职责共享,还出现了一种新(相对较新)的角色UI Dev,如下图。

    1.9K70

    Web 反爬虫实践与反爬虫破解

    font-face 反爬虫 实现原理 网页内的文字,如中文、英文、数字等,这些内容的显示都是按照具体的字体来进行显示(绘制)的。...使用该svg文件,生成目标字体库 使用在线工具进行转换 https://icomoon.io/app/#/select 第一步导入svg文件,第二步选择你要加密的字体 ?...第三步 编辑并下载生成的字体 ? 在这里对上一步选择的内容进行编码设置,应用我们的编码规则,然后下载编码后的字体文件。 ? ? ? ?...使用工具 fontmin http://ecomfe.github.io/fontmin/en#source 该工具可以方便的实现字体压缩,从字体源文件内提取目标字体作为一个新的字体文件。...具体代码就不写了,比较简单。 反爬虫破解 上面介绍的反爬虫方案也不能100%防止页面内容不被爬,而是提高了爬虫爬取的难度。 说说如何破解?

    2.6K22

    HTML5新特性

    概述 HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。...这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 语义化标签 (★★) 以前布局,我们基本用 div 来做。...一些常用的公式: 公式不是死的,在这里列举出来让大家能够找寻到这个模式,能够理解代码,这样才能写出满足自己功能需求的代码 nth-child公式.png 常用的结构伪类选择器是: nth-child(n...、伪类选择器,权重为 10 伪元素选择器(★★★) 伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构 伪元素.png 示例demo div...父级添加 overflow 属性 父级添加after伪元素 父级添加双伪元素 额外标签法也称为隔墙法,是 W3C 推荐的做法 额外标签法.png 注意: 要求这个新的空标签必须是块级元素 后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化

    2.5K41

    网络编程(五)之HTML5和CSS3提高

    一、 HTML5的新特性 HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 1.1 HTML5 新增的语义化标签 以前布局,我们基本用div 来做。...这种语义化标准主要是针对搜索引擎的 这些新标签页面中可以使用多次 在 IE9 中,需要把这些元素转换为块级元素 其实,我们移动端更喜欢使用这些标签 1.2 HTML5 新增的多媒体标签 使用它们可以很方便的在页面中嵌入音频和视频...属性选择器(权重为10) 结构伪类选择器(权重为10) 伪元素选择器(权重为1) 2.1 属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。...伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。...> 【7】CSS新增属性 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果

    1.5K40

    P003PHP之用户页面注册信息填写页面

    可以到国外的一个网站icomoon制作图标字体,不过这个网站打开起来比较慢,需要耐心等待。利用在线资源,接受新思想与新技术,让工作变得越来越简单。 这些小图标都是从icomoon网站上面导出的。...这种方式操作对齐,大小非常方便,不过IE6和IE7不支持选择器before(关于选择器的浏览器兼容可以参考这里),所以在这两个浏览器中将不能显示这个图标。...让用户是在“做正确的事”。下拉列表中的红色能够凸显出匹配值与输入值的区别,便于识别。 从网上查到了相关的JS脚本代码,自己再做了一点小修改,集成到我的代码中。...这个动画提示还很粗糙,但给了我一个新的想法。唯一觉得变复杂的就是CSS代码一下子庞大了很多。 这个动画就是在控制margin-left的值,做来回移动。...,以后有新的体会后,将会不断的做修改。

    2.4K30

    Java 异常|Java Exceptions

    我们需要重启JVM吗? 我们需要重写代码吗? 知道异常类,我们可以预测可能出错的地方。考虑潜在的原因,我们可以假设问题的原因是什么以及如何解决它。...提供的例外可能是彼此的父级,但是,在这里,我只列出最流行的案例,而不管它们的关系如何:  潜在原因原因的可能性有多大怎么修需要重写代码吗?需要重启吗?...空指针异常预期的不可为空的对象为空高的调用前添加验证层是的是的某些资源不可用并返回空数据中等的调用前添加验证层是的是的并发修改异常迭代期间集合已更改高的分别进行集合迭代和修改是的是的 集合在迭代期间已从另一个线程更改高的为集合添加同步是的是的非法参数异常传递的参数无效高的在传递参数之前添加验证是的是的数字格式异常传递的参数格式错误或符号错误高的在传递数据之前添加格式或删除不可见符号是的是的...在大多数情况下,这是正确的,因为不更改代码就无法恢复应用程序。最终,运行时异常是我们的坏人,它会导致新的代码更改、开发人员的压力和业务损失。...就个人而言,我更喜欢使用运行时异常。即使在设计库的情况下,您仍然可以在方法签名中保留运行时异常,并在 API 中添加一些注释。在这种情况下,您的 API 用户将能够决定如何处理它。

    3.9K40

    Hello GitHub

    GitHub是一个用于版本控制和协作的代码托管平台。它允许你和其他人在任何地点一起对同一个项目进行操作。本教程向您介绍GitHub的基本功能,如存储库、分支、提交和拉请求。...您不需要知道如何编写代码、使用命令行或者安装Git(版本控制软件GitHub是构建在Git之上的)。 提示:在单独的浏览器窗口(或选项卡)中打开本指南,以便在完成教程中的步骤时可以看到它。...你曾保存过同一文件的不同版本吗?...它们看起来一模一样,但这只是暂时的!接下来,我们将把更改添加到新分支。 步骤三:做出更改并提交 好了!现在,您在readme-edits分支的代码界面中,它是master的副本。让我们做一些编辑。...拉请求会显示来自两个分支内容上的差异。对内容的更改,添加和删除等操作将会以绿色和红色显示。 一旦内容提交,你便可以打开拉请求并开始进行讨论啦,这些甚至都可以在代码完成之前进行。

    1.5K20

    程序员应该知道的13个设计技巧

    只学习视觉,然后用自己的代码实现。当你慢慢有经验了,就可以开始创造自己的东西了。 忘了PhotoShop 如果你和我一样不知道怎么用PS,用你的代码直接在浏览器里边设计吧。...icon fonts让你很容易给一个元素添加图标,你只需要加个class就好了。 icon fonts大法好的另一个原因是你可以像改变字体大小一样改变这些图标的大小。换颜色也一样。...下边是我喜欢的一些icon资源 Themify Icons IcoMoon ( Easy注:icomoon是我最喜欢的,可以选择好图标,自动生成css和sprite,甚至还能直接引用。严重推荐。...即使不用专业培训,一点小常识就能让你在构建可用的app上受益匪浅。 你只需要中一件事就可以确保app的可用性—— 保证你真的在用你开发的app。经常用。如果有东西让你觉得小不爽,修理它。相信你的自觉。...不管可用性问题在哪儿,只要你一直用你的app,我相信你能发现它的,然后你会修好它。 显然这个流程是不完美的,你代表不了其他的每一个用户使用它的方式,但我的经验是绝大部分问题通过这个方式可以找出来。

    48910

    PPT 中插入域代码公式的方法

    大家好,又见面了,我是你们的朋友全栈君。...PPT 中插入域代码公式的方法 插入对象,选择 Word * Document,或 OpenDocument 都可以; 在新打开的页面中,选择 插入 文档部件,再选择 域代码; 在域代码选项中...我们的目的是使此内容能对你有所帮助。可以在本页面底部告诉我们此信息是否对你有帮助吗? 请在此处查看本文的 英文版本 以便参考。 Eq 域产生数学等式。...\fon () 向右n绘制点。 \ban () 向左n绘制点。 \li () 向上下一个字符的空白添加下划线。...\su 符号更改为大写的sigma并生成求和公式。 \pr 符号更改为大写pi并创建产品。 \in 创建嵌入式格式上方和下方它而不是符号的右侧显示的限制。

    4.5K30
    领券