【網頁切版】把文字替換成圖片

在網站的上面很常會放logo連結，但是....如果只放圖片google就會爬不到字了耶

因此就出現了把文字替換成圖片技巧了，簡單來說就是三行
其他注意事項

• logo文字要放在h1中，google才會覺得他重要去爬他
• 表頭按鈕最好要用ul>li寫，這樣比較好閱讀

text-indent: 101%;  //把第一行縮排
overflow: hidden;  //把多出去的隱藏
white-space: nowrap;  //不換行

 <div class="header">
        <h1>
            <a href="">六角學院</a>  //把東西放在h1中，google才會覺得他重要！
        </h1>
        <div class="menu">
            <ul>
                <li>
                    <a href="#">聯絡我們</a>
                </li>
                <li>
                    <a href="#">產品介紹</a>
                </li>
                <li>
                    <a href="#">首頁</a>
                </li>
            </ul>
        </div>
    </div>

.header h1 a {
//長寬省略
display: block 
background-image: url("圖片連結");
text-indent: 101%;  //把第一行縮排
overflow: hidden;  //把多出去的隱藏
white-space: nowrap;  //不換行
}

​