【html】超链接样式「建议收藏」

编程小6 (55) 2023-06-09 13:12

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说【html】超链接样式「建议收藏」,希望能够帮助你!!!。

超链接样式

超链接样式

超链接样式

根据超链接的类型，显示不同图片的前缀

根据

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> body { 
      background: url(images/bg2.jpg) no-repeat; width: 995px; height: 1401px; } #wrap { 
      position: absolute; width: 242px; height: 232px; z-index: 1; left: 737px; top: 395px; } a { 
      padding-left: 24px; text-decoration:none; } span { 
      color:#999; font-size:12px; display:block; padding-left: 24px; padding-bottom:6px; } p { 
      margin:4px; } a[href^="http:"] { 
      /*匹配所有有效超链接*/ } a[href$="pdf"] { 
      /*匹配PDF文件*/ background: url(images/pdf.jpg) no-repeat left center; } a[href$="ppt"] { 
      /*匹配演示文稿*/ background: url(images/ppt.jpg) no-repeat left center; } a[href$="txt"] { 
      /*匹配记事本文件*/ background: url(images/txt.jpg) no-repeat left center; } a[href$="doc"] { 
      /*匹配Word文件*/ background: url(images/doc.jpg) no-repeat left center; } a[href$="xls"] { 
      /*匹配Excel文件*/ background: url(images/xls.jpg) no-repeat left center; } </style>
</head>

<body>
<div id="wrap">
    <p><a href="http://www.baidu.com/name.pdf">移动互联网</a><span><img src="images/star1.jpg"> 81页 免费</span> </p>
    <p><a href="http://www.baidu.com/name.ppt">什么是移动互联网</a><span><img src="images/star1.jpg"> 8页 1财富值</span> </p>
    <p><a href="http://www.baidu.com/name.xls">中国移动互联网</a><span><img src="images/star1.jpg"> 38页 1财富值 </span> </p>
    <p><a href="http://www.baidu.com/name.txt">移动互联网</a> <span><img src="images/star2.jpg"> 57页 5财富值</span></p>
    <p><a href="http://www.baidu.com/name.doc">移动互联网</a><span><img src="images/star2.jpg"> 42页 2财富值</span> </p>
</div>
</body>
</html>