[awei研究室]主題式分隔網頁版型

2014.11.27 / 分類: awei研究室, 網頁版型 / 0 則回應

有時候接稿時會發現同一個網站,會有不同主題的入口頁面…要如何整合在一起呢?
利用色塊的表現可以輕鬆達成,主題式說明文字,外加生動的滑鼠切換動畫更可以讓人感到煥然一新的感受!!

空間規畫
Head——-網站LOGO /MENU主選單 / 網站特別功能(線上諮詢或是其他客服功能)
content——-主題頁面切換
Footer——–FB連結/DM活動擺放/網站版權宣告

---

製作完成大概會是底下這樣~~
範例網頁

---

應用解析
主要是利用JAVA與CSS做搭配

包含一個index.css檔與JS檔

在滑鼠位於第一個區塊DIV時顯示Photo-1 並隱藏其他Photo
在滑鼠位於第二個區塊DIV時顯示Photo-2 並隱藏其他Photo
在滑鼠位於第三個區塊DIV時顯示Photo-3 並隱藏其他Photo
在滑鼠位於第四個區塊DIV時顯示Photo-4 並隱藏其他Photo

<script>
function Show(ID){
document.all(ID).style.display=””;
}
function Display(ID){
document.all(ID).style.display=”none”;
}
</script>

---

完整檔案下載

一般留言 (0)

1. 

   紅茶

   2015-08-03 @ 16:53

   您好，

   我非常喜歡這個網頁版型，
   請問若我要使用的話，直接下載就可以了嗎?
   請問有需要付費嗎?

   回覆
• 

  awei

  2015-08-04 @ 14:50

  可以阿~~歡迎下載使用.

  回覆

發表留言 取消

名稱

電子郵件

個人網站

Δ