WebMatrix進階教學(3)：如何實作某種樣式-css教學-PHP中文網

首頁

web前端

css教學

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

黄舟

Dec 26, 2016 pm 04:25 PM

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 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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 id="A-nbsp-list-nbsp-of-nbsp-my-nbsp-Favorite-nbsp-Movies">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>

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