<html>
<head>
<title>友情链接用的CSS图片链接和文字链接样式</title>
<style>
.f4{
width:100%;
overflow:hidden;
clear:both;
margin:0;
padding:0;
}
.f4 li{
width:94px;
height:37px;
display:block;
float:left;
overflow:hidden;
margin:10px 12px 2px 3px;
}
.f4 li a{
width:88px;
height:31px;
overflow:hidden;
float:left;
border:3px solid #FFF;
}
.f4 li a:hover{
border:3px solid #EEE;
}
.f5{
width:100%;
overflow:hidden;
clear:both;
margin:0;
padding:0;
}
.f5 li{
float:left;
line-height:14px;
padding:0px 8px 0px;
white-space:nowrap;
}
.f5 li a{
color:#000;
float:left;
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<ul class="f4">
<li><a href='#' target='_blank'><img src='wall_s8.jpg' width='88' height='31' border='0'></a></li>
</ul>
<ul class="f5">
<li><a href='#' target='_blank'>天气查询网</a> </li>
</ul>
</body>
</html>
1.找到静态页面HTML，找到位置，怎么找到位置，可以右击页面检查，然后通过指针来确定层级关系
2.确定好位置以后，先把你想要的的图片放在img文件夹里，就是你项目中存放图片的地方，然后开始在你确定的位置那写代码如下：
<a href="#"><img class="s-problem" src="img/problem.png"/></a>
3.在CSS中给图片添加样式
.s-problem{
position: fixed;
z-index: 2;
pointer-events: all;
width: 3.5rem;
top: 12rem;
right: 0;
}4.你可以添加自己的图片样式转载于:https://www.cnblogs.com/zhangwq103/p/11529140.html
.play_name { background-image: url(sze.jpg); width: 220px; height: 124px; cursor:pointer; border:1px solid #fff; } .play_name:hover { border:1px solid #cf9; } .play_name:hover .ico_play{ background-image: url(ico_play.png); } .title1 { display: block; padding-top: 80px; padding-left: 4px; font: 12px/1.5 Tahoma, "微软雅黑"; color: #fff; font-weight:bold; } .cname1 { display: block; padding-left: 4px; font: 12px/1.5 Tahoma, "微软雅黑"; color: #cf9; font-weight:bold; } .ico_play { position: absolute; top: 48px; left: 90px; width: 60px; height: 60px; }<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css.css" rel="stylesheet" /> </head> <body> <div class="play_name"> <span class="title1">成为光芒 完整版</span> <span class="cname1">Block B </span> <div class="ico_play"></div> </div> </body> </html>
示例展示一：
鼠标放在上面显示图片查看有边框的层
示例展示二：
鼠标放在上面显示图片查看没有边框的层
<script>
//显示
function show(o,obj){
var m=document.getElementById(obj);
m.style.pixelLeft=getL(o);
m.style.pixelTop=getT(o)+o.offsetHeight;
m.style.visibility=';
}
//隐藏
function hide(obj){
document.getElementById(obj).style.visibility='hidden';
}
//取得左边的位移
function getL(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
//取得顶部的位移
function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
</script>
