CSS3実践開発：百度ニュースホット検索ワード特殊効果実践開発_html/css_WEB-ITnose
親愛なるネチズンの皆様、今日の記事では、百度ニュースのホームページ上の「ホットニュース検索ワード」特殊効果の開発を段階的に説明します。この特殊効果に適用される知識ポイントは非常に基本的なものなので、まだよくわからない場合は、以前に書いた詳細なチュートリアルに従ってください。今日この件について話すときに、皆さんにも言いたいのですが、特殊効果を開発するときは、問題を複雑にしないでください。最初はどこから始めればよいのかわからない人もいるかもしれませんが、このチュートリアルを読み終えると、すべてが非常に簡単であると感じるでしょう。
この特殊効果について知らない人もいるかもしれないので、これ以上は言いませんが、レンダリングに行ってください:
上記の特殊効果から、マウスが動いたときにそれを見つけるのは難しくありません。ホットな検索ワードの上には半透明の部分が表示されます。黒い背景が上にスライドし、この黒い領域にもホットな検索ワードが表示されます。
これらの詳細を大まかに理解した後、この特殊効果の開発を段階的に説明します。
上記の主要な詳細に基づいて、HTML コードを次のように記述します。
1 |
|
HTML ソース コードから、各ホット検索ワードが 2 回表示されることがわかります。これは、1 つは通常の表示に使用され、もう 1 つは表示に使用されるためです。マウスを上に移動すると上にスライドする黒い領域として使用されます。ここでは、それらのスタイルを .hotwords_li_a およびdetailとして一時的に定義し、キーワードは順序なしリスト (ul) を使用して表示されます。
ページ コードを記述したら、まず実行して現在の効果を確認しましょう:
ページ要素の準備ができたら、最初に順序なしリスト (ul. )、プレゼンテーションを容易にするために外側のコンテナのレイアウトも設定します。スタイル コードは次のとおりです:
1 |
|
ページを実行して、この時点でのページ効果を確認します:
外側のコンテナの基本的なレイアウトとすべての要素のデフォルトのスタイル設定が完了したら、次のことができます。ホット ニュース検索ワードの領域を実装します。 スタイル:
rrree
上記のスタイル コードは主に、ホット 検索ワード 領域のスタイルを設定するためのものです。コードについてあまり詳しくない場合は、次のようにすることができます。私のスタイルのコメントを参照してください。
このときの効果は以下の通りです:
最初に示したスタイルでは、ニュースの注目検索語のタイトル情報が水色になり、注目検索語のエリアが2行表示されることがわかります。
1 |
|
この時点でのページのスタイルは次のとおりです:
これらのホット検索ワードの上にマウスを置くと、は変わりません。さて、ページの詳細タイプの要素にスタイルを適用します。
1 |
|
上記のコードでは、主に 2 つの主要な属性、position: ABS と Transition を使用します。これら 2 つについてよく知らない場合は、知っている場合に限ります。詳細については、以前に書いたチュートリアル「CSS3 実践開発: 実践的なフォトウォール開発を段階的に教えます」と「CSS3 基本プロパティ - 移行の詳細な説明」を参照してください。これら 2 つのチュートリアルを学習すると、これらの知識ポイントを理解できるようになると思います。
それでは、ページを実行してみましょう:
この時点で、「Baidu News Hot Search Words Special Effect」が開発されました。とても簡単ではないでしょうか。
過去のエキサイティングな実践開発事例のリスト（は広く転載されており、以下に一部のみを記載します）：
1.「CSS3実践開発：マウススライド特別な開発をステップバイステップで教えます」エフェクト「
2.」 CSS3実践開発：検索フォームの照明効果の実践開発をステップバイステップで教えます》
3. 《CSS3実践開発：フレキシブルボックスモデルのレスポンシブWEBインターフェースデザイン》
4. 《CSS3のリニアグラデーション技術の詳細解説と超かっこいいボタンの実践開発》
5. 《CSS3の2D変換のトランスレート技術の詳細解説とWebナビゲーションの実践開発》
6. 《CS3実践的な開発: フォトウォールの実践的な開発をステップバイステップで教えます》
7. 《 CSS3 の実践的な開発: マウスオーバー画像アニメーションの特殊効果を開発する方法をステップバイステップで教えます》
8. 《CSS3 の実践開発：Tmallホームページの画像表示アニメーションの模倣 特殊効果の実践開発》
9. 《CSS3の実践開発：ステップバイステップで折り畳み効果の実践的な開発をみんなに教えます》
インターネット技術交流グループへの参加へようこそ: 62329335
個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7360
15
1628
14
1353
52
1265
25
1214
29
おすすめのAI支援プログラミングツール4選
Apr 22, 2024 pm 05:34 PM
この AI 支援プログラミング ツールは、急速な AI 開発のこの段階において、多数の有用な AI 支援プログラミング ツールを発掘しました。 AI 支援プログラミング ツールは、開発効率を向上させ、コードの品質を向上させ、バグ率を減らすことができます。これらは、現代のソフトウェア開発プロセスにおける重要なアシスタントです。今日は Dayao が 4 つの AI 支援プログラミング ツールを紹介します (すべて C# 言語をサポートしています)。皆さんのお役に立てれば幸いです。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot は、より少ない労力でより迅速にコードを作成できるようにする AI コーディング アシスタントであり、問題解決とコラボレーションにより集中できるようになります。ギット
Go 言語を使用してモバイル アプリケーションを開発する方法を学ぶ
Mar 28, 2024 pm 10:00 PM
Go 言語開発モバイル アプリケーション チュートリアル モバイル アプリケーション市場が活況を続ける中、ますます多くの開発者が Go 言語を使用してモバイル アプリケーションを開発する方法を検討し始めています。シンプルで効率的なプログラミング言語として、Go 言語はモバイル アプリケーション開発でも大きな可能性を示しています。この記事では、Go 言語を使用してモバイル アプリケーションを開発する方法を詳しく紹介し、読者がすぐに始めて独自のモバイル アプリケーションの開発を開始できるように、具体的なコード例を添付します。 1. 準備 始める前に、開発環境とツールを準備する必要があります。頭
どのAIプログラマーが一番優れているでしょうか? Devin、Tongyi Lingma、SWE エージェントの可能性を探る
Apr 07, 2024 am 09:10 AM
世界初の AI プログラマー Devin の誕生から 1 か月も経たない 2022 年 3 月 3 日、プリンストン大学の NLP チームはオープンソース AI プログラマー SWE-agent を開発しました。 GPT-4 モデルを利用して、GitHub リポジトリの問題を自動的に解決します。 SWE ベンチ テスト セットにおける SWE エージェントのパフォーマンスは Devin と同様で、平均 93 秒かかり、問題の 12.29% を解決しました。専用端末と対話することで、SWE エージェントはファイルの内容を開いて検索したり、自動構文チェックを使用したり、特定の行を編集したり、テストを作成して実行したりできます。 (注: 上記の内容は元の内容を若干調整したものですが、原文の重要な情報は保持されており、指定された文字数制限を超えていません。) SWE-A
PHP 実践: フィボナッチ数列をすばやく実装するコード例
Mar 20, 2024 pm 02:24 PM
PHP の実践: フィボナッチ数列をすばやく実装するためのコード例 フィボナッチ数列は、数学では非常に興味深い一般的な数列です。次のように定義されています: 最初と 2 番目の数値は 0 と 1、3 番目からは数値で始まり、それぞれの数値前の 2 つの数値の合計です。フィボナッチ数列の最初のいくつかの数値は、0、1、1.2、3、5、8、13、21 などです。 PHP では、再帰と反復を通じてフィボナッチ数列を生成できます。以下ではこの２つを紹介していきます
VSCode について: このツールは何に使用されますか?
Mar 25, 2024 pm 03:06 PM
「VSCode について: このツールは何に使用されますか?」 》初心者でも経験豊富な開発者でも、プログラマーとしてはコード編集ツールを使わずにはいられません。数ある編集ツールの中でも、Visual Studio Code (略して VSCode) は、オープンソースで軽量かつ強力なコード エディターとして開発者の間で非常に人気があります。では、VSCode は正確に何に使用されるのでしょうか?この記事では、VSCode の機能と使用法を詳しく説明し、読者に役立つ具体的なコード例を提供します。
PHP は Web 開発におけるフロントエンドですか、それともバックエンドですか?
Mar 24, 2024 pm 02:18 PM
PHP は Web 開発のバックエンドに属します。 PHP はサーバー側のスクリプト言語であり、主にサーバー側のロジックを処理し、動的な Web コンテンツを生成するために使用されます。フロントエンド テクノロジーと比較して、PHP はデータベースとの対話、ユーザー リクエストの処理、ページ コンテンツの生成などのバックエンド操作に多く使用されます。次に、特定のコード例を使用して、バックエンド開発における PHP のアプリケーションを説明します。まず、データベースに接続してデータをクエリするための簡単な PHP コード例を見てみましょう。
Golang実戦：データエクスポート機能の実装ヒントを共有
Feb 29, 2024 am 09:00 AM
データ エクスポート機能は、実際の開発、特にバックエンド管理システムやデータ レポートのエクスポートなどのシナリオで非常に一般的な要件です。この記事では、Golang 言語を例として、データ エクスポート機能の実装スキルを共有し、具体的なコード例を示します。 1. 環境の準備 開始する前に、Golang 環境がインストールされており、Golang の基本的な構文と操作に精通していることを確認してください。さらに、データ エクスポート機能を実装するには、github.com/360EntSec などのサードパーティ ライブラリの使用が必要になる場合があります。
Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン
Mar 28, 2024 pm 01:06 PM
Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザー インターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。
