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>