ウェブフロントエンドCSSチュートリアルCSS Web ページ レイアウト入門チュートリアル 11: 現在のロゴを使用したラベル付き水平ナビゲーション画像の美化バージョン_基本チュートリアル
タブナビゲーションは完成しましたが、四角形のナビゲーションは現在のデザイントレンドに沿っていないように見えます。実際、ナビゲーションは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>
WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PMCSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。
GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または
最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AMSvelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。
上品でクールなカスタムCSSスクロールバー：ショーケースMar 10, 2025 am 11:37 AMこの記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます
ショー、Don＆＃039; t TellMar 16, 2025 am 11:49 AMあなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか？新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか
Redwood.jsと動物相を使用してイーサリアムアプリを構築しますMar 28, 2025 am 09:18 AM最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました
NPMコマンドは何ですか？Mar 15, 2025 am 11:36 AMNPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。
特異性について話すために（x、x、x、x）を使用しましょう（x、x、x、x）Mar 24, 2025 am 10:37 AM先日、エリック・マイヤーとおしゃべりをしていたので、形成期のエリック・マイヤーの話を思い出しました。 CSS特異性に関するブログ投稿を書きました
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7433
15135952