html旅遊網頁制作，用 HTML 和 CSS 實現

雲端運算與程式碼 2023年05月15日 14:26 679 訪客

下面是一個簡單的html旅遊網頁制作示例代碼，使用 HTML 和 CSS 實現頁面樣式和布局。

html旅遊網頁制作，用 HTML 和 CSS 實現第1张

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>旅遊網站</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    nav {
      background-color: #555;
      color: #fff;
      padding: 10px;
      text-align: center;
    }
    main {
      background-color: #fff;
      padding: 20px;
      margin: 10px;
    }
    footer {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <header>
    <h1>旅遊網站</h1>
  </header>
  <nav>
    <a href="#">首頁</a> |
    <a href="#">景點</a> |
    <a href="#">住宿</a> |
    <a href="#">交通</a> |
    <a href="#">聯系我們</a>
  </nav>
  <main>
    <h2>熱門景點</h2>
    <p>這裏介紹一些熱門的旅遊景點，並提供相關的信息和預訂鏈接。</p>
    <ul>
      <li><a href="#">北京故宮</a></li>
      <li><a href="#">上海外灘</a></li>
      <li><a href="#">西安兵馬俑</a></li>
    </ul>
  </main>
  <footer>
    &copy; 2021 旅遊網站
  </footer>
</body>
</html>

代碼元素解釋：

- `<!DOCTYPE html>`：文檔類型聲明，告訴瀏覽器當前文檔使用的是 HTML5 規範。

- `<html>`：HTML 頁面的根元素，包含整個頁面的內容。

- `<head>`：頁面頭部，包含元數據和其他引用信息。

- `<meta>`：用於設置頁面的元數據，如字符集、關鍵詞等。

- `<title>`：頁面標題，顯示在瀏覽器的標簽欄上。

- `<style>`：用於設置頁面的樣式和布局。

- `<body>`：頁面的主要內容部分。

- `<header>`：頁面頭部，通常包含網站標誌、主導航等元素。

- `<nav>`：頁面導航欄，通常包含站點鏈接和其他導航元素。

- `<main>`：頁面的主要內容，通常包含文章、圖片和其他相關信息。

- `<h1>`、`<h2>`：標頭元素，用於顯示不同級別的標題文本。