話說前陣子，我們公司那老掉牙的網(wǎng)站終于要更新?lián)Q代。老板大手一揮，說要搞個(gè)高大上的，特別強(qiáng)調(diào)“電話”這塊，說一定要顯眼，讓客戶一眼就能找到！這任務(wù)就落到我頭上，誰讓我是公司里唯一一個(gè)懂點(diǎn)網(wǎng)頁的。

接到任務(wù)后，我先是把市面上那些做得比較好的企業(yè)網(wǎng)站都扒拉一遍。像什么“深圳尼高”、“祥云平臺(tái)”、“新鴻儒”、“028工作室”……看一圈，心里大概有個(gè)數(shù)，知道現(xiàn)在都流行啥樣的設(shè)計(jì)。

第一步，就是確定電話放哪兒。

我琢磨著，這電話肯定不能藏著掖著，得放最顯眼的地方。參考幾個(gè)大公司的網(wǎng)站，我決定把電話放在網(wǎng)頁頂部，和公司logo并排。這樣不管客戶瀏覽到哪個(gè)頁面，都能第一時(shí)間看到聯(lián)系方式。

第二步，就是設(shè)計(jì)電話的樣式。

光禿禿的一個(gè)電話號(hào)碼肯定不行，太丑！我找美工妹子商量一下，決定給電話號(hào)碼加個(gè)醒目的圖標(biāo)，再配上一個(gè)簡(jiǎn)短的文字說明，比如“咨詢熱線”之類的。顏色嘛當(dāng)然要用公司的主色調(diào)，這樣才能和整個(gè)網(wǎng)站風(fēng)格統(tǒng)一起來。

第三步，就是技術(shù)實(shí)現(xiàn)。

• 我用一些簡(jiǎn)單的代碼實(shí)現(xiàn)這個(gè)效果。

• 先用<div> 標(biāo)簽把電話號(hào)碼和圖標(biāo)包起來。

• 然后給這個(gè) <div> 標(biāo)簽設(shè)置一些樣式，比如字體大小、顏色、背景色等等。

• 再用一些定位的設(shè)置，把這個(gè) <div> 標(biāo)簽放到網(wǎng)頁頂部。

搞定！測(cè)試一下，完美！

最終實(shí)現(xiàn)：

打開我們公司的新網(wǎng)站，一眼就能看到那個(gè)醒目的電話號(hào)碼，旁邊還有個(gè)小圖標(biāo)，配上“24小時(shí)服務(wù)熱線”幾個(gè)字，簡(jiǎn)直不要太顯眼！老板看之后，那是相當(dāng)滿意，還夸我辦事效率高，哈哈！

這回的網(wǎng)站設(shè)計(jì)，雖然只是一個(gè)小小的電話號(hào)碼，但也讓我學(xué)到不少東西。做事情，就得細(xì)心，多琢磨，多參考，才能把事情做