CSS Web ページレイアウト入門チュートリアル 11: 現在のロゴを使用したラベル付き水平ナビゲーション画像の美化バージョン

CSS Web ページレイアウト入門チュートリアル 11: 現在のロゴを使用したラベル付き水平ナビゲーション画像の美化バージョン_基本チュートリアル

PHP中文网

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

オリジナル

1534 人が閲覧しました

タブナビゲーションは完成しましたが、四角形のナビゲーションは現在のデザイントレンドに沿っていないように見えます。実際、ナビゲーションはcssの色を使用して定義するだけでなく、慎重にデザインされた画像やその他の要素を使用することもできますここで、ナビゲーションのデザインを改善し、ラベル効果を向上させます。
単一の正方形の背景要素を削除し、色付きの丸いラベルを使用してデザインを完成させることを検討します。しかし、この改善により、構造コードを変更する必要がなく、スタイルを変更するだけで改善が完了するという css デザインのもう 1 つの利点を実現できるため、ここで css のデザインを直接見ることができます。 css コード:

<style> 
body { background-color:#000000;} 
#nav { height:30px; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;} 
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif ) left 84px; ; color:#ffffff;} 
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;} 
</style>

ログイン後にコピー

上記のコードからわかるように、背景色の設定を削除し、ページの body タグに黒の背景を追加しました。オブジェクトを再作成した gif 画像に配置しました。、通常、マウスオーバー、および現在のページ 3 の対話状態が含まれます。しかし、これら 3 つの州の写真が 1 枚の写真に収まっていることがわかります。なぜ？ここではソフトウェア上のデザイン手法を利用しており、一方では画像管理を利用し、他方ではwebページをダウンロードする際に画像を1枚だけダウンロードするというものである。この画像を背景画像として設定する場合は、css を使用して画像の位置を制御するだけで済みますが、css の機能は非常に強力であるようです。
css コードを変更するだけで、ナビゲーションの外観が変更されます。大規模な web サイトのアプリケーションで、特定の共通モジュールに満足できない場合、すべてのページを変更する必要はありません。 , 変更することしかできません。スタイルは実装されています。 css を使用するとデザインが本当に簡単になります。

<!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> 
body { background-color:#000000;} 
#nav { height:30px; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;} 
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;} 
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;} 
</style> 
</head> 
<body> 
  <ul id="nav"> 
    <li><a href="/index.asp">主页</a></li> 
    <li><a id="current" 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> 
</body> 
</html>

ログイン後にコピー