ホームページ > 記事 > ウェブフロントエンド > CSS3実践開発：百度ニュースホット検索ワード特殊効果実践開発_html/css_WEB-ITnose
CSS3実践開発：百度ニュースホット検索ワード特殊効果実践開発_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:59:372636ブラウズ
親愛なるネチズンの皆様、今日の記事では、百度ニュースのホームページ上の「ホットニュース検索ワード」特殊効果の開発を段階的に説明します。この特殊効果に適用される知識ポイントは非常に基本的なものなので、まだよくわからない場合は、以前に書いた詳細なチュートリアルに従ってください。今日この件について話すときに、皆さんにも言いたいのですが、特殊効果を開発するときは、問題を複雑にしないでください。最初はどこから始めればよいのかわからない人もいるかもしれませんが、このチュートリアルを読み終えると、すべてが非常に簡単であると感じるでしょう。
この特殊効果について知らない人もいるかもしれないので、これ以上は言いませんが、レンダリングに行ってください:
上記の特殊効果から、マウスが動いたときにそれを見つけるのは難しくありません。ホットな検索ワードの上には半透明の部分が表示されます。黒い背景が上にスライドし、この黒い領域にもホットな検索ワードが表示されます。
これらの詳細を大まかに理解した後、この特殊効果の開発を段階的に説明します。
上記の主要な詳細に基づいて、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
個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。