4.通栏

  • 效果图:


    image.png
image.png
image.png
image.png
  • index.css
/*京东首页的css*/

.jd{
    /*height: 480px;*/
    background-color: pink;
    position: relative;
}
.jd-inner{
    height: 480px;
    background-color: skyblue;
    position: relative;
    z-index: 1;
}
.ad{
    height: 480px;
    background: url(../images/bg.png) no-repeat top center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /*一定要写  position会转换为行内块 根据内容多少定宽度*/
    z-index: 0;
}
.ad a{
    display: block;
    width: 100%;
    height: 100%;
}
  • index.html



    
    京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!
    
    
    
    
    
    
    
    
    
    
    


    
    
    
    


    
    
    

    

    
    
123

你可能感兴趣的:(4.通栏)