首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用纯CSS给网站文章中的外链添加小图标

最近突然有一个想法,文章中的链接不够明显,可不可以在不修改类名的前提下,给所有 a 标签添加一个图标呢? 答案是肯定的,只有想不到,没有做不到。...我们先看一下字体的 CSS 源码,这里以阿里图标库的 iconfont 生成的 CSS 文件为例: @font-face {font-family: "iconfont";   src: url('iconfont.eot...article-content p a {   font-family: 'iconfont'; } .article-content p a:after {   content: "\e989"; } 如果只给外链设置图标....article-content p a[target=_blank]:after {   content: "\e989"; } 当然,可以把 iconfont 下载到本地,把 iconfont.css...也可以直接生成 Unicode 代码,放在你 CSS 样式文件的开头,就可以愉快的给某个元素批量设置自定义图标了。

1.7K30

使用纯CSS给网站文章中的外链添加小图标

最近突然有一个想法,文章中的链接不够明显,可不可以在不修改类名的前提下,给所有 a 标签添加一个图标呢? 答案是肯定的,只有想不到,没有做不到。...我们先看一下字体的 CSS 源码,这里以阿里图标库的 iconfont 生成的 CSS 文件为例: @font-face {font-family: "iconfont";   src: url('iconfont.eot...article-content p a {   font-family: 'iconfont'; } .article-content p a:after {   content: "\e989"; } 如果只给外链设置图标...也可以直接生成 Unicode 代码,放在你 CSS 样式文件的开头,就可以愉快的给某个元素批量设置自定义图标了。...未经允许不得转载:w3h5-Web前端开发资源网 » 使用纯CSS给网站文章中的外链添加小图标

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

    天了噜,为什么外链css要放在头部,js要放在尾部?

    1、async和defer虽然都是异步的,不过使用async标志的脚本文件一旦加载完成就会立即执行;而使用defer标记的脚本文件,会在 DOMContentLoaded 事件之前(也就是页面DOM加载完成时...2、如果有多个js脚本文件,async标记不保证按照书写的顺序执行,哪个脚本先下载结束,就先执行那个脚本。而defer标记则会按照js脚本书写顺序执行。...3、一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。...会放在header中,而header又会存在外链css,那么二者有顺序要求吗?...header中script和外链css的位置顺序 先说结论: 如果在html的header中同时有js脚本和外链css,js脚本最好放外链css前面。 其实js的执行是依赖css样式的。

    2.7K20

    Hexo博客推荐安装的插件

    ' ## 你的熊掌号 token xz_count: 10 ## 从所有的提交的数据当中选取最新的10条,该数量跟你的熊掌号而定 其次,记得查看_config.ym文件中url的值, 必须包含是百度站长平台注册的域名...新链接的产生, hexo generate 会产生一个文本文件,里面包含最新的链接 新链接的提交, hexo deploy 会从上述文件中读取链接,提交至百度搜索引擎 每天定时提交 关于这部分,我在网上没有找到合适的插件...自动为所有html文件中外链的a标签生成对应的属性。...base64编码 - 默认 fasle url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’ html_file_name - 跳转到外链的页面文件路径...如 SMTP_SERVICE 中没有你使用的邮件服务提供商, 也可以进行自定义。

    1.3K20

    如何在Ubuntu 14.04中使用NodeJS,SailsJS和DustJS构建SPA(单页应用程序)

    在本教程中,我们将设置一个带有SailsJS的NodeJS服务器作为管理代码的框架。我们将使用DustJS用于客户端和服务器上使用的同构模板。...如果没有,请查看以前的步骤。此外,链接在此时不起作用。 第5步 - 创建部分 注意:部分(或模板)是页面的一部分。在SPA中,我们不会替换整个页面,只是部分。...这个模板的编译版本(我们编译使用dust-compiler)驻留在assets/templates/home.js。此编译的模板稍后将包含在脚本标记中。...使用标记包含模板后,它(模板)会自动添加到frontend的dust.cache对象中。...您可以检查assets/js/clickHandler.js中的代码,以便更好地理解代码。 名为xxx的Dust模板是在名为xxx.dust的文件中创作出来的。

    3K00

    html+css面试题集锦(一)

    ②对于css和js,尽量使用外链css样式表和js脚本,使结构,表现和行为分为三块,提高页面渲染速度,提高用户体验,尽量少用行间样式表,使结构与表现分离,标签的id和class等属性名要做到见文知意。...link和@import的区别是? ①内联方式(很糟糕的书写方式) 直接在html标签中的style属性中添加css。...②嵌入方式 在html头部中的标签下书写css代码 ③链接方式 在hrml的头部的标签中引入外部的css文件。...最常见也是最推荐的引入css的方式,使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。...并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。

    1.1K10

    网页死链检测方法「建议收藏」

    内容死链:服务器返回状态是正常的, 但内容已经变更 为不存在、已删除或需要权限等与原内容无关的信息页面。 死链出现的原因 网站目录更换。 服务器里某个文件移动了位置或者删除。...网站服务器设置错误。 动态链接在数据库不再支持的条件下。 死链的影响 影响功能、用户体验。 减少搜索引擎的收录页面数量,降低网站在搜索引擎中的权重。 影响网站加载速度。 损伤网站的整体形象。...链接的HTML 链接语法 a标签 通过使用 href 属性 – 创建指向另一个文档的链接; Link text 通过使用 name 属性 – 创建文档内的书签。...---- 网页死链检测 是日常网页测试中的一个基本测试点,相关的测试方法记录如下: 【方法一】点点点 在手动的人工功能中去测试相关的链接是否正常。...优点: 全面:从待测网站的根目录开始搜索所有的网页文件并读取其中的所有的超级链接、图片文件、包含文件、CSS文件、页面内部链接等; 高效:最大支持100线程,检测速度非常快; 记录网站内文件不存在、指定文件链接不存在或者是指定页面不存在

    2K10

    常用的CSS3选择器

    目录 一、属性选择器 二、关系选择器 三、结构化伪类选择器 四、伪元素选择器 五、链接伪类 CSS选择器的作用就是从HTML页面中找出特定的某类元素。...(1)临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。...:target选择器 :target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。...CSS不起作用....:after选择器 :after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同。 五、链接伪类 1.链接伪类 在CSS中,通过链接伪类可以实现不同的链接状态。

    4.1K20

    JavaWeb学习——4.XML

    前言 继续记录javaweb学过的东西 开始 1.xml的简介 1.什么是xml  XML:eXtensible Markup Language,可扩展标记性语言  和html一样,xml也是使用标签 ...标记性语言:html就是标记性语言  可扩展:html中每个标签是固定的,每个标签都有其特定的含义  但是xml中的标签是可以自己定义的 2.xml用途和介绍  html是用于显示数据,xml也可以显示数据...6.PI指令  PI指令也叫处理指令  可以再xml中设置样式(比如css等)  写法: 1 ?...注意:PI指令对中文的标签元素是不起作用的 注意:PI指令对中文的标签元素是不起作用的 3.xml的约束 1.为什么需要约束  比如现在定义一个person的xml文件,只想要在这个文件中保存person...(2)直接在内部写dtd ? (3)使用网络上的dtd文件 ? 3.使用dtd定义元素  语法: ? 4.使用dtd定义属性  语法 ?

    73420

    Web性能优化:不要与浏览器预加载扫描器对抗

    在这里,主HTML解析器在开始处理元素中的图像标记之前,由于加载和处理CSS而受阻,但预加载扫描器可以在原始标记中向前看,找到图像资源,并在主HTML解析器解除封锁之前开始加载。...相比之下,由于元素在服务器提供的标记中是可以被发现的,它可以被预加载扫描仪发现。 那么,如果我们使用一个带有async属性的普通标签,而不是将脚本注入DOM,会发生什么?...可以无效化预加载扫描器的一种模式是使用客户端 JavaScript 呈现标记: 图12:通过模拟 3G 连接在移动设备上的 Chrome 上运行的客户端呈现网页的 WebPageTest 网络瀑布图。...因为内容包含在 JavaScript 中并且依赖于框架来呈现,所以客户端呈现的标记中的图像资源对预加载扫描器是隐藏的。等效的服务器渲染体验如图 9 所示。...在这些例子中,与不需要JavaScript的服务器渲染体验相比,对LCP图片的请求被大大延迟了。 这有点偏离了本文的重点,但在客户端渲染标记的影响远远超出了对预加载扫描器的破坏。

    5.4K151

    HTML和CSS面试题及答案总结一

    标签本身所代表的语义,每一个标签所带有的语义,根据语义去使用标签,依赖标记确定权重,同时也可以提高SEO的优化。对于结构化标签,按照一定的结构去使用标签。...4) 在服务器上的作用不同,get是从服务器上获取数据,而post是向服务器上传送数据。 在实际开发中的应用: 1)在重要数据进行传输数据的时候,用post的方式进行提交数据。...2) 第二种是内部样式表,通过style标签将CSS的样式写在style属性当中,链入内部的CSS文件。...3)书写顺序不同,内联样式表写在标签当中,内部样式表写在style标签中来链入内部的CSS文件,外部样式表是通过link或者是@import的方式来链入外部的CSS文件。...3)在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。 4)min-height在IE6下不起作用。

    1.2K10

    html基础知识点合集

    (markup language) 标记语言是一套标记标签 (markup tag) 总结: HTML 作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来。...如果希望某段文本强制换行显示,就需要使用换行标签 这时如果还像在word中直接敲回车键换行就不起作用了。...中只能嵌套,直接在标签中输入其他标签或者文字的做法是不被允许的。 2. 与之间相当于一个容器,可以容纳所有元素。 3....表格中由行中的单元格组成。 表格中没有列元素,列的个数取决于行的单元格个数。 表格不要纠结于外观,那是CSS 的作用。...表单域: ​ 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

    2.4K20

    【专业技术】CSS作用及用法

    层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。...CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。.../Firefox 浏览器中不起作用。...使用方法编辑 有三种方法可以在站点网页上使用样式表: 外联式Linking(也叫外部样式):将网页链接到外部样式表; 嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表; 内联式Inline...使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

    1.4K70

    前端面试基础题:从浏览器地址栏输入url到显示页面的步骤

    、CSS、图像等); 浏览器对加载到的资源(HTML、JS、CSS 等)进行语法解析,建立相对应的内部数据结构(如 HTML 的 DOM); 载入解析到的资源文件,渲染页面,完成。...缓存 DNS递归查询(可能存在负载均衡导致每次IP不一样) 6.打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下: 客服端发送一个TCP的SYN=1,Seq=X的包到服务器端口 服务器发回...SYN=1,ACK=X+1,Seq=Y的响应包 客户端发送ACK=Y+1,Seq=Z 7.TCP链接建立后发送HTTP请求 8.服务器接受请求并解析,将请求转发到服务器程序,如虚拟主机使用HTTP Host...DOM树 19.解析过程中遇到图片、样式表、js文件,启动下载 20.构建CSSOM树: Tokenizing:字符流转换为标记流 Node:根据标记创建节点 CSSOM:节点创建CSSOM树 21.根据...生存 css 规则树、合并成 render 树,然后 layout、painting渲染、复合图层的合成、GPU 绘制、外链资源的处理、loaded 和 DOMContentLoaded 等) 7.CSS

    1K30

    从浏览器地址栏输入url到显示页面的步骤

    浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP , 向服务器发起请求; 服务器交给后台处理完成后返回数据, 浏览器接收文件 ( HTML、JS、CSS 、图象等); 浏览器对加载到的资源...( HTML、JS、CSS 等) 进行语法解析, 建立相应的内部数据结构 ( 如HTML 的DOM ); 载入解析到的资源文件, 渲染页面, 完成。...TCP链接建立后发送HTTP请求 8.服务器接受请求并解析,将请求转发到服务程序, 如虚拟主机使用工TTP工ost头部判断请 求的服务程序 9....DOM construction:根据工TML标记关系将对象组成DOM树 19. 解析过程中遇到图片 、样式表 、js文件,启动下载 20. 构建CSSOM树: 1....层的合成 、 GPU 绘制 、外链资源的处理 、 loaded 和 DOMContentLoaded 等) 7.

    10310

    八个技巧,提高Web前端性能

    这保证了访问者能在最短时间内使用链接在画面间切换。 幸运的是,预先获取很容易实现。...根据你想要使用的预先获取形式,你只需在网站 HTML 中的链接属性上增加 rel="prefetch",rel="dns-prefetch",或者 rel="prerender" 标记。 5....使用 CDN 和缓存提高速度 内容分发网络能显著提高网站的速度和性能。使用 CDN 时,您可以将网站的静态内容链接到全球各地的服务器扩展网络。如果您的网站观众遍布全球,这项功能十分有用。...此方法的配置可以直接在源服务器的配置文件中完成。 了解更多有关缓存和不同类型的缓存方法,请参阅缓存定义。 6....压缩文件 虽然许多 CDN 服务可以压缩文件,但如果不使用 CDN,您也可以考虑在源服务器上使用文件压缩方法来改进前端优化。 文件压缩能使网站的内容轻量化,更易于管理。

    2K100
    领券