请问frontpage好学吗？如果做一个宣传网页的话。
现在用一个dreamweaver感觉好难。还有要在里面添加一个点击小图片可以显示大图片的功能。用这个可以实现吗...
现在用一个dreamweaver感觉好难。
还有要在里面添加一个 点击小图片可以显示大图片的功能。用这个可以实现吗 展开
还有要在里面添加一个 点击小图片可以显示大图片的功能。用这个可以实现吗 展开
1个回答
展开全部
CSS放大图片，鼠标经过放大图片，有的人把它称为放大镜效果。实现方法是：先定义一个图片列表，可以不设置图片的长宽，此时图片默认显示大小，然后定义
此图片hover属性，也就是鼠标放上后的变化，这里我们定义图片的长宽要稍大于图片原始大小，这样这种功能就完成了，具体请看代码。（图片地址可以自己换）
<head>
<title>CSS图片放大镜效果</title>
<style type="text/css">
body{margin:0;padding:0;}
ul#bigs{
LIST-STYLE-TYPE: none;DISPLAY:inline;
margin: 0px;
clear: both;
}
ul#bigs li{
FLOAT: left;
display: inline;
margin-top: 9px;
margin-left: 8px;
}
ul#bigs li a {
display: block;width:116px;
}
ul#bigs li a img{
border:1px #666 solid;
}
ul#bigs li a:hover{
position: absolute;
z-index:100;
margin: -8px;
}
ul#bigs li a:hover img{
width:138px;
height:107px;
border:1px #ccc solid;
}
</style>
</head>
<body>
<div>
<ul id="bigs">
<li><a href="/"><img src="/jscss/demoimg/wall_s3.jpg" /></a></li>
<li><a href="/"><img src="/jscss/demoimg/wall_s5.jpg" /></a></li>
<li><a href="/"><img src="/jscss/demoimg/wall_s7.jpg" /></a></li>
</ul>
</div>
</body>
此图片hover属性，也就是鼠标放上后的变化，这里我们定义图片的长宽要稍大于图片原始大小，这样这种功能就完成了，具体请看代码。（图片地址可以自己换）
<head>
<title>CSS图片放大镜效果</title>
<style type="text/css">
body{margin:0;padding:0;}
ul#bigs{
LIST-STYLE-TYPE: none;DISPLAY:inline;
margin: 0px;
clear: both;
}
ul#bigs li{
FLOAT: left;
display: inline;
margin-top: 9px;
margin-left: 8px;
}
ul#bigs li a {
display: block;width:116px;
}
ul#bigs li a img{
border:1px #666 solid;
}
ul#bigs li a:hover{
position: absolute;
z-index:100;
margin: -8px;
}
ul#bigs li a:hover img{
width:138px;
height:107px;
border:1px #ccc solid;
}
</style>
</head>
<body>
<div>
<ul id="bigs">
<li><a href="/"><img src="/jscss/demoimg/wall_s3.jpg" /></a></li>
<li><a href="/"><img src="/jscss/demoimg/wall_s5.jpg" /></a></li>
<li><a href="/"><img src="/jscss/demoimg/wall_s7.jpg" /></a></li>
</ul>
</div>
</body>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
