根据效果图使用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.使用浏览器预览效果
首先根据需求我们需要一个按钮，一个d出窗口层；\x0d\x0aOK，废话不多说；\x0d\x0a按钮就用一个基本的：\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分：\x0d\x0a首先需要引入一个JS库，版本自己定义：\x0d\x0a然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a}) 回答于 2022-11-16问题分析：
HTML中的浮动窗口，可以使用CSS的定位方式完成，同时使用这种方式来完成这个功能也是一种较为简单的方式，只需要有HTML以及CSS的知识就可以完成了。
举例如下：
在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。
HTML代码：
<div id="left"><p>我是左侧浮动窗口的内容</p>
</div>
<div id="right">
<p>我是右侧浮动窗口的内容</p>
</div>
CSS代码：
body{/*
* 为body标签设置背景仅仅是为了演示效果。
* 与浮动窗口本身无关。
*/
background-color: #ccc
}
#left, #right{
position: fixed
top: 100px
width: 200px
height: 500px
line-height: 500px
text-align: center
border: 1px solid #000
background-color: #FFF
}
#left{
left: 50px
}
#right{
right: 50px
}
页面初始化效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）