コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

WebMatrix 上級チュートリアル (3): 特定のスタイルを実装する方法

黄舟
リリース： 2016-12-26 16:25:27
オリジナル
1299 人が閲覧しました

Csdn.NET は、Microsoft 史上最も強力な Web 開発ツールとして知られる Microsoft の新しい Web 開発ツール WebMatrix に関する高度なチュートリアルを開発者が理解できるように間もなくリリースします。 Microsoft の新しい開発ツール WebMatrix をインストールして使用する方法に関する前回の投稿に続き、WebMatrix を使用して最初の Web ページを作成する方法を説明します。この号では引き続き、次のチュートリアルを紹介します。

はじめに: Microsoft WebMatrix は、インターネット上で Web サイトを作成、カスタマイズ、公開するために使用できる無料のツールです。

WebMatrix を使用すると、ウェブサイトを簡単に作成できます。オープン ソース アプリケーション (WordPress、Joomla、DotNetNuke、Orchard など) から始めることができ、WebMatrix がアプリケーションのダウンロード、インストール、構成のタスクを処理します。または、すぐに始めるのに役立つ多くの組み込みテンプレートを使用して、自分でコードを作成することもできます。どちらを選択しても、WebMatrix は、Web サーバー、データベース、フレームワークなど、Web サイトの実行に必要なものをすべて提供します。 Web ホストで使用するものと同じスタックを開発デスクトップで使用することで、Web サイトをオンラインにするプロセスが簡単かつスムーズになります。

http://web.ms/webmatrix からダウンロードできます。

これで、WebMatrix、CSS、HTML、HTML5、ASP.Net、SQL、データベースなどの使い方と、簡単な Web アプリケーションの作成方法をわずか数時間で学ぶことができます。内容は次のとおりです:

パート 2 では、WebMatrix を使用して非常に単純な Web ページを作成する方法と、このページがさまざまなブラウザーでどのように実行されるかを説明しました。このセクションでは、カスケード スタイル シート (CSS) テクノロジを使用して Web ページの視覚スタイルを変更する方法を学習します。
Web ページに組み込むことができるムービーの簡単なリストは次のとおりです:

WebMatrix 上級チュートリアル (3): 特定のスタイルを実装する方法

カスケード スタイル シートを使用して Web ページのスタイルを設定する準備をしましょう

次のいくつかの手順では、使用できる HTML タグがさらに表示されます。ハイパーリンク、ページ セクション、スクリプト タグなどの機能に加えて、カスケード スタイル シート (CSS) を使用してページを編集し、外観を設定する方法も学習します。最後に、レイアウトを使用してこのページとサイト上の他のページの間で同じコンテンツを取得し、同じコンテンツの編集が容易になります。

分割線を使用する

HTML では、

タグを使用して Web ページを論理的に分割できます。これは、この記事の後半でスタイルについて説明するときに特に便利です。対応する div を設定することで、Web ページの特定の部分のスタイルを指定できます。

最初の部分の Web ページの 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 では元々アンカー タグと呼ばれていたため、ハイパーリンクを作成する場合は常に タグを使用します。

    (または位置決め) タグは、 と の間のコンテンツをクリック可能にします。ユーザーがこのコンテンツをクリックすると、ブラウザは タグの href 属性を使用して指定された HREF (ハイパーリファレンス) にリダイレクトします。

    属性は、タグ内ではなくタグ自体で定義されます。次のようになります:

    content

    したがって、ハイパーリンクを作成するには、次のような構文を使用します。 :

    ここをクリック

    href は上記のような Web サイトである必要はなく、幹部も使用できます。プログラマーの操作のための JavaScript 関数。特別な href は、ハイパーリンクのスタイルが機能するかどうかをテストできるように、開発中にプレースホルダーとして使用されます。これを行うには、href として「#」文字を使用します。

    したがって、ムービーを含むすべての

  2. アイテムをハイパーリンクに変換するには、ムービーのテキストを タグで囲み、次のように HREF を # に設定します。 , リスト上の要素には、青い下線とも呼ばれるおなじみのハイパーリンク スタイルが使用されていることがわかります。

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

    和