WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

5-4. 蒂莫絲位置:運用資源

導覽區第 4 個連結按鈕呈現顯著的樣式

  1. <nav>
  2. <a href="index.html">回網站首頁</a>
  3. <a href="about.html">關於蒂莫絲</a>
  4. <a href="service.html">客房的服務</a>
  5. <a href="location.html" class="active">我們的位置</a>
  6. <a href="contact.html">聯絡蒂莫絲</a>
  7. </nav>

 

修改 #banner 區域表現的影像

  1. <link rel="stylesheet" href="layout.css">
  2. <style>
  3. #banner {
  4. background-image: url(images/banner/banner4.png);
  5. }
  6. </style>
  7. </head>

 

修改左側 標題1 的文字

修改右側 標題2 的文字

修改右側 插入的影像

 

設計運用 Google Map 地圖資源將地圖嵌入網頁

在左側 標題1 的下方嵌入 Google Map 地圖資源

前往 Google Map, 輸入查詢地址, 在左側按「分享」按「嵌入地圖」,
<iframe ...... > 語法複製回來貼在左側 標題1 的下方, 設計寬度700px高度500px。

 

 

go TOP