CSS3 Secrets の第 3 版は、HTML5 学習ノート_html/css_WEB-ITnose の第 9 章から第 12 章までをカバーしています。

第 9 章、Web サイトのナビゲーションの装飾

アクセスの制限 プライバシー上の理由から、ブラウザは疑似クラス:visited に適用できる CSS 属性を制限し始めています。これには、訪問したリンクの色、背景色、境界線の色、およびその他のスタイルの定義が含まれます (これらのリンクの通常の状態に対して色、背景色、境界線の色が定義されていない限り)

タグの場合、すべてさまざまな訪問状態がスタイル設定されますが、スタイルを有効にするには、リンクを特定の順序で指定する必要があります: リンク、訪問済み、ホバー、アクティブ

CSS3 ボタン ジェネレーター: http://css3button.net

CSS3 ボタンの優れた例: http://hellohappy.org/css3-buttons/ および http://webdesignerwall.com/tutorials/css3-gradient-buttons

垂直ナビゲーション バー

1. リンクをブロックとして表示する

2. ボタンの幅を制限する

水平ナビゲーション バー

方法 1. display:inline-block 属性を使用しますが、ボタンの間に小さな隙間が残ります。

スペースを削除する方法 1: 前の と次の

を同じ行に配置します

deb132c5ab21c45c9292487497c8598d

但，如果border-collapse设为collapse，则浏览器忽略empty-cells属性，依然显示空白单元格边框和背景色

给表单定义样式

HTML表单元素

1、fieldset，

标签用来集中相关表单问题

2、legend，

标签就在

标签的HTML代码之后，它给一组域提供一个标签

3、text fields（文本域）

4、buttons（按钮），表单按钮：提交，重置或其他动作

5、drop-down menus（下拉菜单），

6、checkbox（复选框）和radio button（单选按钮）

第三部分----CSS页面布局 第12章，CSS布局简介

网页布局类型

1、固定宽度，参看 www.alistapart.com， www.espn.go.com， www.nytimes.com

2、流式布局，参看 http://maps.google.com

3、响应式Web设计（Responsive Web Desin，RWD）

HTML5的分区元素

标签用于组成一个自包含结构的内容，例如一篇博客文章。

标签用于给网页或者网页的分区提供标题、导航目标以及其他介绍性材料

标签用于包含版权声明、网站创始人的名字、网页的发布日期等等

CSS布局方法

绝大多数网页均采用CSS的float属性进行布局

布局策略

1、从内容入手

2、Mobile First（移动设备优先）

3、先设计草图

Yahoo提供了一个免费的Stencil Kit（ http://developer.yahoo.com/ypatterns/wireframes），可在Illustrator、Visio、OmniGraffle以及其他图形处理软件中使用它来创建网页草图

4、找出方框

5、顺应页面流

6、记住背景图片的使用

7、拼图中的小部件

8、给元素设计层次

9、margin和padding的使用

関連ラベル：

CSS3秘笈第三版涵盖HTML5学习笔记9~12章

ソース：php.cn

前の記事：CSS Secret Garden: リアルなテキスト効果_html/css_WEB-ITnose 次の記事：CSS Secret Garden: リング Text_html/css_WEB-ITnose

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1771

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1908

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1626

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1537

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1572

関連トピック

詳細>

• PHPの標準タグの紹介
• Linuxのファイル名変更コマンド
• 0x84b10001 の解決策
• 不正な引数の例外を解決する方法
• CSSが読み込めない問題の解決方法
• thinkpad で BIOS を入力する方法
• Linux バッチ変更ファイル名の接尾辞
• ワードプレスをダウンロードしてからインストールする方法

人気のおすすめ

• URLってどういう意味ですか？
• DOM とはどういう意味ですか?
• 画像サイズを変更する方法
• HTMLでフォントを太字にする方法
• HTML画像のサイズを設定する方法

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1416595
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4257064
• 
  JAVA 初心者向けビデオチュートリアル

  2474316
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503216
• 
  PHP ゼロベースの入門チュートリアル

  843966

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1416595 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2474316 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  503216 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215250 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  876533 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6329 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  4951 回の学習
• 
  Go言語実践GraphQL

  4156 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  632 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  21180 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！