简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

WebMatrix進階教學(3)：如何實作某種樣式

黄舟
發布： 2016-12-26 16:25:27
原創
1252 人瀏覽過

Csdn.NET近期將發表微軟全新Web開發工具WebMatrix的進階教程，幫助開發人員人士認識這一號稱微軟史上最強的Web開發工具。繼上次發布的如何安裝和使用微軟全新開發工具WebMatrix 和 教您如何使用WebMatrix建立第一個網頁 後。本期將繼續為您介紹接下來的教學。

導讀：Microsoft WebMatrix是一個免費的工具，可用於建立、自訂和在Internet上發佈網站。

WebMatrix讓您能夠輕鬆建立網站。您可以從一個開源應用程式（例如WordPress、Joomla、 DotNetNuke或Orchard）開始，WebMatrix會為您處理下載、安裝和設定這些應用程式的任務。或者您可以使用許多內建的模板自行編寫程式碼，這些模板有助於您迅速上手。無論您做何選擇，WebMatrix都提供了您的網站運作所需的一切內容，包括Web伺服器、資料庫和框架。透過在您的開發桌面上使用與您將在Web主機上使用的相同堆疊，將網站上線的過程變得既輕鬆又順利。

您可以從http://web.ms/webmatrix下載它。

現在您只需花幾個小時便可學會使用WebMatrix、CSS、HTML、HTML5、ASP.Net、SQL、資料庫等知識以及如何編寫簡單的Web應用程式。內容如下：

在第2部分，您看到如何使用WebMatrix建立非常簡單的網頁，以及此頁面如何在多種不同瀏覽器中運作。在這一部分中，您將了解如何變更網頁的視覺樣式，並使用級聯樣式表(CSS)技術。
這裡是您在網頁上內建的簡單電影清單：

WebMatrix進階教學(3)：如何實作某種樣式

使用級聯樣式表準備設定網頁樣式

在接下來的幾步中，您將看到更多的HTML標記，它們可用於實作超連結、網頁分割區和腳本標記等功能，您還將了解如何使用級聯樣式表(CSS) 編輯此網頁，設定它的外觀。最後將使用版面來取得此網頁和網站上其他網頁之間相同的內容，這樣可以更輕鬆地編輯相同內容。

使用分隔線

在HTML中，可以使用

標記以邏輯方式將網頁劃分為幾個區塊。這在您在本文後面查看樣式時尤其有用，您可以透過設定相應的div來指定網頁某個部分的樣式。

這裡是第一部分中您的網頁的HTML：

<!DOCTYPE html>  
   
<html lang="en">  
    <head>  
        <meta charset="utf-8" />  
        <title>My Favorite Movies</title>  
    </head>  
    <body>  
    <h1>A list of my Favorite Movies</h1>  
       <ol>  
            <li>Its a wonderful life</li>  
            <li>Lord of the Rings</li>  
            <li>The Fourth World</li>  
            <li>The Lion King</li>  
       </ol>  
    </body>  
</html>
登入後複製

要做的第一件事是將包含電影的清單包裝到它自己的

中，如下所示

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1>A list of my Favorite Movies</h1>  
  <div id="movieslist">  
  <ul>  
    <li>Its a wonderful life</li>  
    <li>Lord of the Rings</li>  
    <li>The Fourth World</li>  
    <li>The Lion King</li>  
  </ul>  
</div>  
</body>  
</html>
登入後複製

現在可以看到，包含影片的

  1. 清單現在包含在
    標記中。如果現在查看該網頁，會發現與之前沒什麼不同。這是因為
    標記是一個邏輯分隔線。它沒有任何物理外觀。

    使用超連結

    您可能已經熟悉超連結–一個頁面上連結到另一個頁面的可點擊區域。儘管這些區域稱為超鏈接，但在HTML中它們最初稱為定位標記(anchor)，因此只要您希望創建超鏈接，就可以使用標記。

    （或定位）標記使和之間的內容可以按一下。當使用者按一下此內容時，瀏覽器將會重新導向到標記中使用href屬性指示的一個HREF（超引用）。

    屬性在標記本身上定義，而不是在標記內定義，類似於：

    content

    因此，要創建超鏈接，您可以使用這樣的語法：

    Click Here

    href不必是一個像上面這樣的網站，也可以是一個執行程式設計人員所使用的操作的JavaScript函數。一種特殊的href可在開發期間用作佔位符，這樣您可以測試超連結的樣式是否有效。為此，使用“#”字元作為href。

    所以，為了將所有包含電影的

  2. 項目轉換為超鏈接，我們將電影的文本包裝在標記中，將HREF設置為#，類似於以下形式：

    <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1>A list of my Favorite Movies</h1>  
  <div id="movieslist">  
    <ol>  
      <li><a href="#">Its a wonderful life</a></li>  
      <li><a href="#">Lord of the Rings</a></li>  
      <li><a href="#">The Fourth World</a></li>  
      <li><a href="#">The Lion King</a></li>  
  </ol>  
  </div>  
</html>
    登入後複製

    如果運行網頁，您將看到清單上的元素將使用熟悉的超連結樣式，也就是所謂的藍色底線：

    WebMatrix進階教學(3)：如何實作某種樣式

    添加頁眉和頁腳

    🎜🎜🎜🎜添加頁眉和頁腳🎜

    将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新

    和