頁面總體佈局思路

總體佈局

先分析網頁是由哪幾個部分組成,再依次建立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>