【Web前端实操10】定位实操_图片上面定位文字

参考实现的效果是这样的:

目前还没有学到渐变色,所以标签效果的渐变色没有实现,只是利用radius设置了圆角图形,辅之以背景色和设置其中文本文字的颜色和居中对齐。

在自己写的过程中,对于标签的定位写成了相对定位,效果怎么都不对,因此有关于定位,需要好好地再琢磨以下,如果整个模块不设置定位的话,后面的标签进行定位的时候是会对于浏览器整个开始来定位的,因此整个模块最好是设置成相对定位,然后在设置标签的时候可以设置成绝对定位,就可以实现如图的效果。

【Web前端实操10】定位实操_图片上面定位文字_第1张图片

代码如下:




    
    
    定位实操_图片上面定位文字
    


    

实现效果:

【Web前端实操10】定位实操_图片上面定位文字_第2张图片

 

你可能感兴趣的:(Web前端实操,html,css,前端)