CSS Web ページレイアウト入門チュートリアル 10: 現在のロゴを使用したタブ付き水平ナビゲーション

CSS Web ページレイアウト入門チュートリアル 10: 現在のロゴを使用したタブ付き水平ナビゲーション_基本チュートリアル

PHP中文网

リリース： 2016-05-16 12:07:09

オリジナル

1493 人が閲覧しました

現在のロゴは、ユーザーがチャネルまたは列をクリックしたことを意味します。列のラベルは、ユーザーに場所を思い出させるために、他のラベルとは異なる色で表示されます。
このデザインは、web サイトのデザインにおいて web サイトの使いやすさを向上させるための非常にシンプルで古典的な方法です。 web サイトをユーザーが利用する場合、web サイトを閲覧するときのユーザーの思考プロセスを考慮する必要があります。悪い web デザインは、ユーザーのエクスペリエンスを考慮せず、ページ自体を考慮するだけです。優れたデザインは、ユーザー中心である必要があります。このような単純な現在チャネルの識別は、多くのデザイナーが無視することがよくあります。ユーザーは、自分がどこにいるのか、他にどこに行けるのかを知る必要があります。現在の場所を識別することで、ユーザーは web サイト内での自分の位置を理解し、ガイドするのに役立ちます。他のチャネルにアクセスします。
前の記事のコードの続きを書いていきます。特定のチャンネルが現在のチャンネルになるためには、このチャンネルの背景色やテキストが他のチャンネルとは異なる必要がありますが、現在はすべてのチャンネルを対象としています。タグの統一設定の背景であるため、最初のタスクは例外、つまり現在のチャネルを設計することです。このような特別なチャネルの場合、html 内のタグにいくつかの変更を加えます:

<ul id="nav"> 
    <li id="current"><a href="/index.asp">主页</a></li> 
    <li><a href="/sort/list_4.html">div+css教程</a></li> 
    <li><a href="/sort/list_5.html">常用代码</a></li> 
    <li><a href="/sort/list_6.html">水晶图标</a></li> 
    <li><a href="/sort/list_7.html">幻灯图片</a></li> 
    <li><a href="/sort/list_10.html">软件下载</a></li> 
    <li><a href="/css2/">css2.0实用手册</a></li> 
  </ul>

ログイン後にコピー

最初の a タグに次の内容を追加します: 新しい id が追加され、current という名前が付けられます。css 部分を読み続けます。まず、id current のカラーデザインを作成します:

#nav li a#current { background-color:#2788da; color:#fff;}

ログイン後にコピー

効果をプレビューします。ホームページの背景色が青になりました。

<style> 
#nav li { float:left;} 
#nav li a { color:#000000; text-decoration:none; padding-top:4px; 
display:block; width:120px; height:22px; text-align:center; 
background-color:#ececec; margin-left:2px;} 
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;} 
#nav li a#current { background-color:#2788da; color:#fff;} 
</style> 
  <ul id="nav"> 
    <li>主页</li> 
    <li>div+css教程</li> 
    <li>常用代码</li> 
    <li>水晶图标</li> 
    <li>幻灯图片</li> 
    <li>软件下载</li> 
    <li>css2.0实用手册</li> 
  </ul>

ログイン後にコピー

ナビゲーションの改善を続け、ページメニューの下に水平線を追加しました。

#nav { height:26px; border-bottom:2px solid #2788da;}

ログイン後にコピー

ul タグの高さを設定し、その下部まで 2 ピクセルの実線です。線、効果を再度プレビューします。最初に想像したタブ付きナビゲーションとほぼ同じです。nav 要素の定義に戻ります。border-bottom は、新しく追加した属性です。これを参照します。要素の下枠の設定です。そのパラメータは 2px の幅、単線スタイル、#2788da の色の値を指します。この設定では、ul タグには 2px の色付きの下枠が付きます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#000000; text-decoration:none; padding-top:4px; 
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;} 
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;} 
#nav li a#current { background-color:#2788da; color:#fff;} 
</style> 
</head> 
<body> 
  <ul id="nav"> 
    <li>主页</li> 
    <li>DIV+CSS教程</li> 
    <li>常用代码</li> 
    <li>水晶图标</li> 
    <li>幻灯图片</li> 
    <li>软件下载</li> 
    <li>CSS2.0实用手册</li> 
  </ul> 
</body> 
</html>

ログイン後にコピー

シンプルなタブ付きナビゲーションは、一連の css デザインによって完成します。チャンネルページを変更するときは、id="current "move" を変更するだけで済みます。現在のチャネルが配置されている a 要素にコピーして、色の切り替えを完了します。カラー属性を記述する必要はなく、変更する必要がある場合は css で簡単に変更できます。

この例では、xhtml の要素間で css プロパティの継承を使用する場合の問題について説明します。
継承とは何ですか?継承とは、各要素が複数のスタイルを持つことができることを意味します。通常の状況では、要素は最も外側のスタイル設計に従います。独自のスタイル設計に遭遇すると、外側のスタイルを継承し、それ自体を優先します。
内側のレイヤーのスタイルが外側のレイヤーのスタイルと競合する場合、内側のレイヤーのスタイル効果が表示されます。

この例では、プレビュー用のスタイルコード内の新しい属性 list-style:none; にも触れます。
前の章からわかるように、デフォルトでは、ul の li リスト形式の前にドットが付いています。この文は、前にあるデフォルトのドットを削除することを意味します。

上記は、css web ページレイアウト入門チュートリアル 10: 現在のロゴを使用したラベル付き水平ナビゲーション_基本チュートリアルの内容です。その他の関連コンテンツについては、php 中国語 web サイト (m.sbmmt.com) に注目してください。