CSS3学习案例1——超级链接类型标示图标

深藏阁楼爱情的钟 2021-12-22 09:13 79阅读 0赞

效果如图：

![2012101204361431.jpg][]

p{
        margin:4px;}
    a[href^="http:"]{
        
      background:url(images/window.gif) no-repeat left center;
      padding-left:18px;  
    }   /*匹配所有的有效超链接*/
    a[href$="pdf"]{
        
      background:url(images/icon_pdf.gif) no-repeat left center;
      padding-left:18px;  
    }/*匹配所有的pdf文件*/
    a[href$="xls"]{
        
      background:url(images/icon_xls.gif) no-repeat left center;
      padding-left:18px;  
    }/*匹配所有的xls文件*/
    a[href$="ppt"]{
        
      background:url(images/icon_ppt.gif) no-repeat left center;
      padding-left:18px;  
    }/*匹配所有的ppt文件*/
    a[href$="rar"]{
        
      background:url(images/icon_rar.gif) no-repeat left center;
      padding-left:18px;  
    }/*匹配所有的rar文件*/

<h1>超级链接类型标示图标</h1>
    <p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
    <p><a href="http://www.baidu.com/name.ppt">ppt文件</a></p>
    <p><a href="http://www.baidu.com/name.xls">xls文件</a></p>
    <p><a href="http://www.baidu.com/name.rar">rar文件</a></p>
    <p><a href="http://www.baidu.com/name.jpg">jpg文件</a></p>

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/10/12/2720722.html

[2012101204361431.jpg]: /images/20211220/d6846a80db6c4c4f937bf11e234f1c85.png

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 Css3制作三角形图标

在建站过程中，有时候需要给部分容器添加装饰效果，这样就会添加小图标，今天和大家分享用Css3制作三角形图标。在Css3之前，我们使用transparent属性来实现背景颜色

布满荆棘的人生/ 2022年12月04日 08:44/ 0 赞/ 286 阅读

相关 HTML5超级链接、图片与多媒体

HTML5超级链接、图片与多媒体网页超级链接超级链接（hyperlink）也简称为链接（link），是网站的重要组成部分，HTML正是因为有了超级链接才显得与

￡神魔★判官ぃ/ 2022年10月29日 08:00/ 0 赞/ 322 阅读

相关 html5中如何添加超级链接

HTML 5 <a> 标签定义和用法 <a> 标签定义超链接，它用于从一个页面连接到另一个页面。 HTML 4.01 与 HTML 5 之间的差异在 H

灰太狼/ 2022年09月17日 05:27/ 0 赞/ 306 阅读

相关 JavaWeb学习之路(18)–HTML之超级链接

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 前言 2. 跳转指定网址页面 3. 跳转当前网站其他网页 4. 在新

分手后的思念是犯贱/ 2022年09月14日 00:15/ 0 赞/ 268 阅读

相关学习链接

1.云端分布式搜索技术（ElasticSearch插件大全） http://www.searchtech.pro/elasticsearch-plugins 2.Elast

朱雀/ 2022年08月19日 11:17/ 0 赞/ 219 阅读

相关 CMFCEditBrowseCtrl 静态链接无图标

静态链接时： void CMFCEditBrowseCtrl::SetInternalImage() \{ if (m\_ImageBr

亦凉/ 2022年08月03日 03:22/ 0 赞/ 178 阅读

相关解决超级链接虚框的方法

[http://hi.baidu.com/trying\_before/blog/item/40f7cf2f8bc99e5c4ec22641.html][http_hi.bai

梦里梦外;/ 2022年07月14日 16:18/ 0 赞/ 210 阅读

相关 css绘制loading图标（1）

![这里写图片描述][70] <!DOCTYPE html> <html> <head> <meta charset="utf-8">

刺骨的言语ヽ痛彻心扉/ 2022年05月31日 13:15/ 0 赞/ 257 阅读

相关 CSS3学习案例1——超级链接类型标示图标

效果如图： ![2012101204361431.jpg][] p{ margin:4px;} a[href^="http:"]{

深藏阁楼爱情的钟/ 2021年12月22日 09:13/ 0 赞/ 80 阅读

相关学习链接

正则表达式入门：[https://deerchao.net/tutorials/regex/regex.htm\mission][https_deerchao.net_tuto

逃离我推掉我的手/ 2021年12月12日 16:43/ 0 赞/ 378 阅读