你可以使用css来浮动一个块，建议为浮动div，相关的关键样式为position: fixed，是指布局方式为固定的，为了防止被遮挡一般要搭配z-index:999或者更大的数字，表示该层高度，默认为1。如果一个元素的z-index小于其他元素且位置冲突的话就会被遮挡咯。
然后就是位置的问题，这个可以自行调整啦。
做到比较简单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
position:absolute
width:200px
height:115px
z-index:1
background-color:#CCC
left: 165px
top: 211px
display:none
}
</style>
<script type="text/javascript">
function a(){
var a=document.getElementById("a").value
if(a=="tijiao"){
document.getElementById("apDiv1").style.display="block"
}
}
</script>
</head>
<body>
<input type="button" value="tijiao" id="a" onclick="a()" />
<div id="apDiv1">hello</div>
</body>
</html>
、效果分析根据效果图使用html和css制作一个电商悬浮窗效果，外层使用一个大盒子<ul>定义，内部插入5个<li>列表并添加边框，最后插入图片背景。
二、制作结构
1.使用Dreamweaver新建一个html5文档，修改标题为“电商悬浮框”搭建结构后引入对应的文字。
2.定义整个body的公共的样式，在用并集选择器清除对应标签的样式
<style>
ul,li,body{
margin: 0
padding: 0
list-style: none/*清除列表的样式为none*/
/*定义公共的样式*/
}
body{
font-size: 16px
font-family: "黑体"
color: #999
/*定义公共的样式*/
}
ul{
width: 171px
height: 489px
background: url("bg.jpg") no-repeat
}
</style>
3.最后调整各元素对应的位置，不断调整达到最终效果
<html>
<head>
<meta charset="UTF-8">
<title>电商悬浮框</title>
<style>
ul,li,body{
margin: 0
padding: 0
list-style: none/**/
/*定义公共的样式*/
}
body{
font-size: 16px
font-family: "黑体"
color: #FFF
/*定义公共的样式*/
}
ul{
width: 120px
height: 295px
background: url("bg.jpg") no-repeat center center
padding-top: 194px
padding-left: 45px
/*引入ul的背景图片设置不平铺与图片大小*/
}
li{
width: 80px
height:40px
text-align: center
line-height: 40px
border-bottom: 1px #FFF solid
/*调整各列表对应的位置，添加边框*/
}
</style>
</head>
<body>
<ul>
<li>服装鞋帽</li>
<li>数码家电</li>
<li>运动户外</li>
<li>孕婴用品</li>
<li>厨卫家电</li>
</ul>
</body>
</html>
登录后复制
4.使用浏览器预览效果
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）