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;
}

 

 

 

 

 

标签：opacity,网页,2021.7,23,透明度,position,小结,替换,图片
来源： https://www.cnblogs.com/Privatexaio/p/15050118.html