Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

WebMatrix Advanced Tutorial (3): So implementieren Sie einen bestimmten Stil

黄舟
Freigeben： 2016-12-26 16:25:27
Original
1299 Leute haben es durchsucht

Csdn.NET wird in Kürze ein erweitertes Tutorial zu Microsofts neuem Webentwicklungstool WebMatrix veröffentlichen, um Entwicklern das Verständnis zu erleichtern, das als das leistungsstärkste Webentwicklungstool in der Geschichte von Microsoft gilt. Im Anschluss an die letzte Veröffentlichung erfahren Sie, wie Sie das neue Entwicklungstool WebMatrix von Microsoft installieren und verwenden und wie Sie mit WebMatrix Ihre erste Webseite erstellen. In dieser Ausgabe werden Ihnen weiterhin die folgenden Tutorials vorgestellt.

Einführung: Microsoft WebMatrix ist ein kostenloses Tool, mit dem Websites im Internet erstellt, angepasst und veröffentlicht werden können.

Mit WebMatrix können Sie ganz einfach eine Website erstellen. Sie können mit einer Open-Source-Anwendung (wie WordPress, Joomla, DotNetNuke oder Orchard) beginnen und WebMatrix übernimmt für Sie den Download, die Installation und die Konfiguration der Anwendung. Oder Sie können den Code selbst schreiben und dabei die vielen integrierten Vorlagen verwenden, die Ihnen den schnellen Einstieg erleichtern. Was auch immer Sie wählen, WebMatrix bietet alles, was Ihre Website zum Betrieb benötigt, einschließlich Webserver, Datenbanken und Frameworks. Durch die Verwendung desselben Stacks auf Ihrem Entwicklungsdesktop, den Sie auch auf Ihrem Webhost verwenden würden, ist die Online-Schaltung Ihrer Website einfach und reibungslos.

Sie können es von http://web.ms/webmatrix herunterladen.

Jetzt können Sie in nur wenigen Stunden lernen, WebMatrix, CSS, HTML, HTML5, ASP.Net, SQL, Datenbanken usw. zu verwenden und einfache Webanwendungen zu schreiben. Hier ist der Inhalt:

In Teil 2 haben Sie gesehen, wie Sie mit WebMatrix eine sehr einfache Webseite erstellen und wie diese Seite in verschiedenen Browsern ausgeführt wird. In diesem Abschnitt erfahren Sie, wie Sie den visuellen Stil einer Webseite mithilfe der Cascading Style Sheets (CSS)-Technologie ändern.
Hier ist eine einfache Liste von Filmen, die Sie in Ihre Webseite integrieren können:

WebMatrix Advanced Tutorial (3): So implementieren Sie einen bestimmten Stil

Bereiten Sie die Gestaltung Ihrer Webseite mithilfe von Cascading Style Sheets vor

In In den nächsten Tagen werden Sie weitere HTML-Tags sehen, die zum Implementieren von Funktionen wie Hyperlinks, Webseitenabschnitten und Skript-Tags verwendet werden können. Außerdem erfahren Sie, wie Sie Cascading Style Sheets (CSS) zum Bearbeiten dieses Webs verwenden Seite und legen Sie ihr Erscheinungsbild fest. Schließlich werden Layouts verwendet, um den gleichen Inhalt zwischen dieser Seite und anderen Seiten der Website zu erhalten und so die Bearbeitung desselben Inhalts zu erleichtern.

Trennzeichen verwenden

In HTML können Sie das

-Tag verwenden, um eine Webseite logisch in Teile zu unterteilen. Dies ist besonders nützlich, wenn Sie sich später in diesem Artikel Stile ansehen. Dort können Sie den Stil eines bestimmten Teils einer Webseite festlegen, indem Sie das entsprechende Div festlegen.

Hier ist der HTML-Code für Ihre Seite im ersten Teil: 

<!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>
Nach dem Login kopieren

Als Erstes müssen Sie die Liste mit den Filmen in ein eigenes

einschließen, wie unten gezeigt 

<!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>
Nach dem Login kopieren

Sie können jetzt sehen, dass die Liste

  1. jetzt in einem
    -Tag enthalten ist. Wenn Sie sich die Seite jetzt ansehen, werden Sie feststellen, dass sie nicht viel anders ist als zuvor. Dies liegt daran, dass das Tag
    ein logisches Trennzeichen ist. Es hat keine physische Erscheinung.

    Hyperlinks verwenden

    Vielleicht sind Sie bereits mit Hyperlinks vertraut – anklickbaren Bereichen auf einer Seite, die auf eine andere Seite verweisen. Obwohl diese Bereiche als Hyperlinks bezeichnet werden, wurden sie in HTML ursprünglich als Anker-Tags (Anker) bezeichnet. Daher verwenden Sie das Tag , wann immer Sie einen Hyperlink erstellen möchten. Das Tag

    macht den Inhalt zwischen Wenn ein Benutzer auf diesen Inhalt klickt, leitet der Browser zu einer HREF (Hyperreferenz) weiter, die mithilfe des href-Attributs im -Tag angegeben wird.

    Attribute werden auf dem Tag selbst und nicht innerhalb des Tags definiert, ähnlich wie:

    content

    Um einen Hyperlink zu erstellen, können Sie also eine Syntax wie diese verwenden:

    Hier klicken

    Das href muss keine Website wie oben sein, es kann eine JavaScript-Funktion sein, die einen von Programmierern verwendeten Vorgang ausführt. Bei der Entwicklung wird ein spezielles href als Platzhalter verwendet, damit Sie testen können, ob der Stil des Hyperlinks funktioniert. Verwenden Sie dazu das Zeichen „#“ als href.

    Um alle

  2. -Elemente, die Filme enthalten, in Hyperlinks umzuwandeln, packen wir den Text des Films in ein -Tag und setzen den HREF auf #, etwa so: 

    <!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>
    Nach dem Login kopieren

    Wenn Sie die Webseite ausführen, werden Sie feststellen, dass die Elemente in der Liste den bekannten Hyperlink-Stil verwenden, der auch als blaue Unterstreichung bekannt ist:

    WebMatrix Advanced Tutorial (3): So implementieren Sie einen bestimmten Stil

    Kopf- und Fußzeile hinzufügen

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

    和