综合案例——淘宝焦点图布局,土豆案例

淘宝焦点图布局 

综合案例——淘宝焦点图布局,土豆案例_第1张图片

 1.大盒子我们类名为:tb-promo 淘宝广告

2.里面放一张图片。

3.左右两个按钮 用链接,左箭头 prev  右箭头 next

4.底侧小圆点ul继续做。类名为 promo-nav





    
    
    
    Document
    



    

土豆案例

1.练习元素的显示与隐藏

2.练习元素的定位

核心原理: 原来半透明的黑色遮罩看不见,鼠标经过大盒子,就显示出来。

遮罩的盒子不占有位置,就需要用绝对定位和display 配合使用。

综合案例——淘宝焦点图布局,土豆案例_第2张图片

当鼠标经过时候遮罩层出现

综合案例——淘宝焦点图布局,土豆案例_第3张图片

 

 





    
    
    
    Document
    



    

你可能感兴趣的:(html和css,css,css3,html)