2021.7.23今日小结
今天继续完成了小米商城的网页,经过了两天的练习,对网页的排版,有了更进一步的了解。
还有对元素的用法和意思也有了更进一步的理解。网页的样式总共就那么多,主要是得样式的排版和组合的过程。
几个新学到的操作方法。
利用了 opacity透明属性实现图片的简单覆盖
html代码:
<div>
<img alt="" src="images/1.jpg" />
<span><img alt="" src="images/1.png" /></span>
</div>
css代码:
div{
width: 300px;
height: 260px;
position: relative;
}
span{
display: block;
position: absolute; 绝对定位
top: 0;
left: 0;
opacity: 0; 透明度为0,隐藏
}
span:hover{
opacity: 1; 透明度为1,显示
cursor: pointer;
}
先是用了position定位,把替换的图片定位在div中和原来img图片重合的地方,然后把替换的图片设置成透明,
到鼠标经过的时候把透明度改为1,来实现替换效果,这里的好处是替换的图片用png格式的话就是遮罩,并不是完全替换。
利用了position:fixed实现了把元素固定在页面不让其跟随网页滑动。但是IE6和许多移动设备外不能使用。
.fix {
position: fixed;
bottom: 0;
right: 0;
}