css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失

html-css029

css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失,第1张

1、新建一个html文件,命名为test.html。

2、在test.html文件内,使用div标签创建一个div,同时设置其class属性为con,主要用于下面通过该类名进行样式的设置。

3、在test.html文件内,在div内使用p标签创建一段测试文字的显示。

4、在test.html文件内,在div内,再使用div标签创建一个类名为ff的div,用于作为悬浮的div。

5、在test.html文件内,在css标签内,使用“*”初始化元素样式,设置外边距和内边距都为0。同时,设置类名为con的div的样式,设置其背景颜色为灰色,居中对齐,宽度为640px,高度为1000px。

6、在css标签内,再设置类名为ff的样式,设置其高宽都为100px,背景颜色为红色,使用position定位属性设置div在页面的绝对位置,距离页面顶部为20px,距离页面左边为0px,从而实现div悬浮在页面中。

7、在浏览器打开test.html文件,查看实现的效果。

提供三种自定义导航栏悬浮的方法

在自定义组件中设定css 样式:

利用 position: fixed

利用 position: fixed

1、将对应的大图小图存放在同一个li标签中(鼠标悬浮到小图时,方便定位到大图)。

2、内部样式中利用"display:none"隐藏大图所在div。

3、鼠标悬浮到相应区域时,修改同li标签下大图所在div的display属性("display:block")。

小结:1、最上层的div必须定位,否则无法约束子元素。

2、li标签设置浮动时,图片会重叠,无法排成一列。浮动必须落实到图片。

3、小照片放在span标签中,变成了内联元素。需为其添加"display: block"转换为块级元素,才能设置图片外边距.

以下是代码:

[html] view plain copy

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{

margin: 0px

padding: 0px       }

/*相框背景*/

#all{

width: 800px

height: 800px

background: greenyellow

position: relative

/*父元素必须定位,否则无法约束子元素*/

}

/*相册大图*/

#all ul li .big img{

width: 500px

height: 400px

}

#all ul li .big{

position: absolute

left: 70px

top: 130px

display: none/*内部样式中隐藏大图所在div*/

}

/*小图设置*/

#all ul li .smallhover img{

width: 70px

height: 50px

position: absolute

right: 100px

float: left/*设置浮动,可使图片排成一列*/

}

#all ul li .smallhover{

/*因为小照片放在span标签中,变成内联元素。设置display: block将其转换为块级元素,才能设置图片外边距*/

display: block

margin-top: 40px

overflow: hidden

}

/*实现效果,鼠标悬浮在小图片时,相应的大图片显示*/

#all ul li:hover .big{

display: block

}

</style>

</head>

<body>

<div id="all">

<ul>

<li>

<!--小图-->

<span class="smallhover"><img src="img/lotus1.jpg"  /></span>

<!--大图-->

<div class="big" style="display: block" >

<!--设置初始图片-->

<img src="img/lotus1.jpg" />

</div>

</li>

<li>

<span class="smallhover"><img src="img/lotus2.jpg"  /></span>

<div class="big"><img src="img/lotus2.jpg"  /></div>

</li>

<li>

<span class="smallhover"><img src="img/lotus3.jpg"  /></span>

<div class="big"><img src="img/lotus3.jpg"  /></div>

</li>

</ul>

</div>

</body>

</html>