首页
学习
活动
专区
工具
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.6K30

使用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给网站文章添加小图标

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

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

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

2.6K20

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.2K20

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

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

97510

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

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

1.8K10

常用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.为什么需要约束  比如现在定义一个personxml文件,只想要在这个文件中保存person...(2)直接在内部写dtd ? (3)使用网络上dtd文件 ? 3.使用dtd定义元素  语法: ? 4.使用dtd定义属性  语法 ?

70920

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

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

5.3K151

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

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

CSS、图像等); 浏览器对加载到资源(HTML、JS、CSS 等)进行语法解析,建立相对应内部数据结构(如 HTML DOM); 载入解析到资源文件,渲染页面,完成。...缓存 DNS递归查询(可能存在负载均衡导致每次IP不一样) 6.打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下: 客服端发送一个TCPSYN=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

html基础知识点合集

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

2.3K20

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

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

1.4K70

从浏览器地址栏输入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.

5310

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

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

2K100
领券