CSS3実践開発：百度ニュースホット検索ワード特殊効果実践開発_html/css_WEB-ITnose
親愛なるネチズンの皆様、今日の記事では、百度ニュースのホームページ上の「ホットニュース検索ワード」特殊効果の開発を段階的に説明します。この特殊効果に適用される知識ポイントは非常に基本的なものなので、まだよくわからない場合は、以前に書いた詳細なチュートリアルに従ってください。今日この件について話すときに、皆さんにも言いたいのですが、特殊効果を開発するときは、問題を複雑にしないでください。最初はどこから始めればよいのかわからない人もいるかもしれませんが、このチュートリアルを読み終えると、すべてが非常に簡単であると感じるでしょう。
この特殊効果について知らない人もいるかもしれないので、これ以上は言いませんが、レンダリングに行ってください:
上記の特殊効果から、マウスが動いたときにそれを見つけるのは難しくありません。ホットな検索ワードの上には半透明の部分が表示されます。黒い背景が上にスライドし、この黒い領域にもホットな検索ワードが表示されます。
これらの詳細を大まかに理解した後、この特殊効果の開発を段階的に説明します。
上記の主要な詳細に基づいて、HTML コードを次のように記述します。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3实战开发:百度热搜词动画特效实战开发</title> </head> <body> <div class="container"> <div id="news_hotwords"> <div class="keywords_title"> <a href="http://www.itdriver.cn">新闻热搜词</a><span>HOT WORDS</span> </div> <div class="hotwords"> <ul> <li class="li_0 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网实战教程">一起为改革发力</a> <a class="detail" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网实战教程">一起为改革发力</a> </li> <li class="li_1 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">习 近 平会见外国友人</a> <a class="detail" href="http://www.itdriver.cn">习 近 平会见外国友人</a> </li> <li class="li_2 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">李 克 强重视知识产权</a> <a class="detail" href="http://www.itdriver.cn">李 克 强重视知识产权</a> </li> <li class="li_3 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">36斤纯黄金鸳鸯枕</a> <a class="detail" href="http://www.itdriver.cn">36斤纯黄金鸳鸯枕</a> </li> <li class="li_4 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">EXO机场辱工作人员</a> <a class="detail" href="http://www.itdriver.cn">EXO机场辱工作人员</a> </li> <li class="li_5 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">学费迎来"涨价潮"</a> <a class="detail" href="http://www.itdriver.cn">学费迎来"涨价潮"</a> </li> <li class="li_6 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">女举小将蒋惠花夺魁</a> <a class="detail" href="http://www.itdriver.cn">女举小将蒋惠花夺魁</a> </li> <li class="li_7 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">童名谦获刑五年</a> <a class="detail" href="http://www.itdriver.cn">童名谦获刑五年</a> </li> <li class="li_8 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">青奥会</a> <a class="detail" href="http://www.itdriver.cn">青奥会</a> </li> <li class="li_9 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">白卷英雄成4亿富豪</a> <a class="detail" href="http://www.itdriver.cn">白卷英雄成4亿富豪</a> </li> <li class="li_10 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">被俘虏女子拒做性奴</a> <a class="detail" href="http://www.itdriver.cn">被俘虏女子拒做性奴</a> </li> <li class="li_11 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">女子把狗毛当零食</a> <a class="detail" href="http://www.itdriver.cn">女子把狗毛当零食</a> </li> </ul> </div> </div> </div> </body></html>
HTML ソース コードから、各ホット検索ワードが 2 回表示されることがわかります。これは、1 つは通常の表示に使用され、もう 1 つは表示に使用されるためです。マウスを上に移動すると上にスライドする黒い領域として使用されます。ここでは、それらのスタイルを .hotwords_li_a およびdetailとして一時的に定義し、キーワードは順序なしリスト (ul) を使用して表示されます。
ページ コードを記述したら、まず実行して現在の効果を確認しましょう:
ページ要素の準備ができたら、最初に順序なしリスト (ul. )、プレゼンテーションを容易にするために外側のコンテナのレイアウトも設定します。スタイル コードは次のとおりです:
*{ /*设置所有元素默认内外边距，同时设置默认字体大小*/ margin:0; padding:0; font-size:14px;}.container{ /*设置外层容器布局，这里主要是为了方便演示*/ margin:200px 200px auto;}/*清除ul默认显示样式*/ul { list-style-type:none; }a { /*去除超链接下划线*/ text-decoration:none; }ページを実行して、この時点でのページ効果を確認します:
外側のコンテナの基本的なレイアウトとすべての要素のデフォルトのスタイル設定が完了したら、次のことができます。ホット ニュース検索ワードの領域を実装します。 スタイル:
rrree
上記のスタイル コードは主に、ホット 検索ワード 領域のスタイルを設定するためのものです。コードについてあまり詳しくない場合は、次のようにすることができます。私のスタイルのコメントを参照してください。
このときの効果は以下の通りです:
最初に示したスタイルでは、ニュースの注目検索語のタイトル情報が水色になり、注目検索語のエリアが2行表示されることがわかります。
.hotwords li{ float:left; /*使热搜词都向左浮动*/ position:relative; /*由于li里面有元素要执行动画效果，所以将li的position设置为相对定位*/ width:68px; /*设置热搜词的基本宽高度*/ height:68px; margin:0 2px 2px 0; overflow:hidden; /*设置当热搜词显示的内容超过区域大小时，隐藏超出的部分*/ text-align:center; /*内部文字居中显示*/}.hotwords li.li_0,.hotwords li.li_3,.hotwords li.li_8,.hotwords li.li_11 { /*大家访问百度新闻首页，定会发现，它的1,4,9和12这几个快的宽度是其他的两倍，所以这里单独设置*/ width:138px;}.hotwords li a{ /*将所有a元素都设置为块元素block，这样就可以调整它的高度*/ display:block; text-decoration:none; padding:2px; height:64px; color:white;}.hotwords li.li_0 a,.hotwords li.li_3 a,.hotwords li.li_8 a,.hotwords li.li_11 a { /*对于1,4,9和12这几个元素它的文字是垂直方向上居中显示的*/ width:135px; line-height:64px;}.hotwords li.li_color_0{ background:#0DA4D6;}.hotwords li.li_color_1{ background:#35C4EF;}この時点でのページのスタイルは次のとおりです:
これらのホット検索ワードの上にマウスを置くと、は変わりません。さて、ページの詳細タイプの要素にスタイルを適用します。
.hotwords{ /*设置新闻热搜词区域的大小*/ width:568px;}.keywords_title{ /*设置热搜词区域字体样式以及它距离底部外边距的距离*/ font-size:1.5em; margin-bottom:10px;}.keywords_title,.keywords_title a{ /*设置热搜词title以及热搜词link的默认颜色*/ color:#3399CC;}上記のコードでは、主に 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衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7697
15
1640
14
1393
52
1287
25
1229
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 コーディング アシスタントであり、問題解決とコラボレーションにより集中できるようになります。ギット
どの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
Go 言語を使用してモバイル アプリケーションを開発する方法を学ぶ
Mar 28, 2024 pm 10:00 PM
Go 言語開発モバイル アプリケーション チュートリアル モバイル アプリケーション市場が活況を続ける中、ますます多くの開発者が Go 言語を使用してモバイル アプリケーションを開発する方法を検討し始めています。シンプルで効率的なプログラミング言語として、Go 言語はモバイル アプリケーション開発でも大きな可能性を示しています。この記事では、Go 言語を使用してモバイル アプリケーションを開発する方法を詳しく紹介し、読者がすぐに始めて独自のモバイル アプリケーションの開発を開始できるように、具体的なコード例を添付します。 1. 準備 始める前に、開発環境とツールを準備する必要があります。頭
PHP 実践: フィボナッチ数列をすばやく実装するコード例
Mar 20, 2024 pm 02:24 PM
PHP の実践: フィボナッチ数列をすばやく実装するためのコード例 フィボナッチ数列は、数学では非常に興味深い一般的な数列です。次のように定義されています: 最初と 2 番目の数値は 0 と 1、3 番目からは数値で始まり、それぞれの数値前の 2 つの数値の合計です。フィボナッチ数列の最初のいくつかの数値は、0、1、1.2、3、5、8、13、21 などです。 PHP では、再帰と反復を通じてフィボナッチ数列を生成できます。以下ではこの２つを紹介していきます
Android 開発に最適な Linux ディストリビューションはどれですか?
Mar 14, 2024 pm 12:30 PM
Android 開発は多忙で刺激的な仕事であり、開発に適した Linux ディストリビューションを選択することが特に重要です。数多くある Linux ディストリビューションの中で、Android 開発に最適なのはどれでしょうか?この記事では、この問題をいくつかの側面から検討し、具体的なコード例を示します。まず、現在人気のある Linux ディストリビューション (Ubuntu、Fedora、Debian、CentOS など) をいくつか見てみましょう。これらにはそれぞれ独自の利点と特徴があります。
Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン
Mar 28, 2024 pm 01:06 PM
Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザー インターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。
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 コード例を見てみましょう。
