整体布局思路

整体布局

先分析网页是由哪几个部分组成,再依次创建div元素。分清楚那些块分在一起是可以通过float来完成的。
分完块过后可以填充背景颜色来区分，这样方便布局定位，审查元素。

图片透明

img{
opacity：0.4
}
opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

图像透明度 - Hover 效果

img{
opacity:0.4;
}
img:hover{
opacity:1.0;
}

图片遮盖技术，logo链接

   h1{
        background:url("京东LOGO.png") no-repeat;     logo背景
        width: 168px;                                   宽度  
        height: 81px;                                   高度
        border: 1px solid red;                          边框
    }
    a{
        border: 1px solid #000000;                      边
        display: block;                 将行内元素转换为快元素，使之有宽高
        line-height: 81px;                         和logo一样高度
        text-indent: -1000px;                      缩进，直到看不见
    }
    <h1>
        <a>京东</a>
    </h1>

雪碧图

    div{
        width: 150px;
        height: 120px;
        background: url("sprites2.png");
        background-position: 0 -240px;
    }

        <div> </div>