大师兄 发表于 2017-11-20 23:01:12

如何制作简易DIV悬浮框的具体方法,可以用在dz的diy里面

我们在进行网页设计时,经常会遇到想设定一个悬浮DIV,却不知道怎么做的情况,下面我将告诉大家怎样制作一个简单的DIV悬浮框。
使用Dreamweaver软件,打开一个已经编辑完成的html页面。

然后打开折叠的body标签,在标签的末尾添加一个DIV
</div>
</div>
<div class="khfwpingtai">
</div>
</body>
</html>在DIV里面加入一个img标签,src指向images文件夹中的一张图片
<div class="khfwpingtai">
<img src="images/khfwpt.png">
</div>
</body>这时的div并没有相应的css样式,只处在整个网页的左下角
接下来我们就需要将给其添加一定的css样式,为了简便起见,我的css样式就写在页面的body标签里面了。
<style>
</style>
首先我们要让这个DIV的position样式为fixed,意为相对于屏幕定位。然后将top设为20px;right也设为20px;这样我们的div就固定在相对距离屏幕上方和右方分别20个像素的地方
.khfwpingtai{display:block; position:fixed; top:20px; right:20px; height:60px; width:180px;}这样就可以了。

[*]元素相对位置,只需要设定上下左右的两个中的一个即可。例如只设定上右,便可以确定元素的位置

[*]一定要将元素的position属性设为fixed,这样才是悬浮的,才能相对于屏幕是悬浮的



页: [1]
查看完整版本: 如何制作简易DIV悬浮框的具体方法,可以用在dz的diy里面