CSS3 practical development: Baidu news hot search word special effects practical development_html/css

Home

Web Front-end

HTML Tutorial

CSS3 practical development: Baidu news hot search word special effects practical development_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:59 AM

css3Actual combatdevelopnewsspecial effects

Dear netizens, in today’s article, I will lead you step by step in developing the "Hot News Search Words" special effect on Baidu News homepage. The knowledge points applied in this special effect are very basic. If you are still unclear about these, you can follow the detailed tutorials I wrote before. When I talk about this case today, I also want to tell everyone that when developing a special effect, please don’t complicate the problem. Maybe some people really don’t know where to start at the beginning, but after you finish reading this tutorial, you will definitely feel that everything is so simple.

Maybe some people don’t know this special effect yet, so I won’t say anything more and just go to the renderings:

From the above special effects, it is not difficult to find that when When the mouse moves over the hot search words, a translucent black background will slide up, and there are also hot search words in this black area.

After roughly knowing these details, I will now lead you step by step in developing this special effect.

Based on the key details mentioned above, write the html code as follows:

<!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>

You will find from the html source code that two hot search terms appear This is because one is used for normal display and the other is used for the black area that slides up when the mouse is moved over. Here I will temporarily define their styles as .hotwords_li_a and detail, and our keywords will be displayed using an unordered list (ul).

After the page code is written, let’s run it first to see the current effect:

After the page elements are ready, then we add styles to the page. First What we need to do is to first clear the default style of the unordered list (ul), and set the outer container layout to facilitate demonstration. The style code is as follows:

*{ /*设置所有元素默认内外边距，同时设置默认字体大小*/    margin:0;    padding:0;    font-size:14px;}.container{ /*设置外层容器布局，这里主要是为了方便演示*/    margin:200px 200px auto;}/*清除ul默认显示样式*/ul { list-style-type:none; }a { /*去除超链接下划线*/    text-decoration:none; }

Run the page to see the page effect at this time:

The basic layout of the outer container and the layout of all elements After the default style setting is completed, now we can implement the regional style of hot news search words:

.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;}

The above style code is mainly to set For the style of the hot search word area li, if you don’t know much about the code, you can refer to my style comments.

The effect at this time is as follows:

You can find that in the style I demonstrated at the beginning, the title information of the hot news search term is light blue, and at the same time The hot search word area displays two lines. Now let’s add the following settings to display the style of the hot search word area:

.hotwords{ /*设置新闻热搜词区域的大小*/    width:568px;}.keywords_title{ /*设置热搜词区域字体样式以及它距离底部外边距的距离*/    font-size:1.5em;    margin-bottom:10px;}.keywords_title,.keywords_title a{ /*设置热搜词title以及热搜词link的默认颜色*/    color:#3399CC;}

The page style at this time is as follows:

When we mouse over these hot search terms, nothing changes. Okay, then we apply styles to the elements of type detail on the page:

.hotwords .detail{     position:absolute;/*设置detail为绝对定位，由于li设置了relative，所以detail是相对于li元素的绝对定位*/    background:rgba(0,0,0,0.8); /*设置detail区域的背景色*/    left:0; /*设置detail相对li的偏移距离*/    top:68px;    -webkit-transition:top 0.2s; /*当detail类型的元素top属性发生变化时，执行过度动画，过度时间为0.2s*/    -moz-transition:top 0.2s;    -o-transition:top 0.2s;    transition:top 0.2s;}.hotwords li:hover .detail{ /*当鼠标划过li时，设置detail类型元素的样式*/    top:0px;}

In the above code, we mainly use two key attributes, position:absolute and transition. If you don’t know much about these two, you can refer to the tutorials I wrote before "CSS3 Practical Development: Teach You Step by Step Practical Development of Photo Walls" and "CSS3 Basic Properties of Transition Detailed explanation》. After studying these two tutorials, I believe you will be familiar with these knowledge points.

Now let’s run the page:

At this point, the "Baidu News Hot Search Words Special Effect" has been developed. Isn’t it very simple?

A list of exciting practical development cases in the past ( has been widely reproduced, only some are listed below ):

　1. "CSS3 practical development: step by step Teach you the development of mouse sliding special effects》

　2. "CSS3 practical development: teach you step by step the practical development of search form lighting special effects"

　3. "CSS3 Practical Development: Responsive WEB Interface Design of Flexible Box Model"

　4. "CSS3 Linear Gradient Technology Detailed Explanation and Stunning Button Practical Development"

5. "CSS3 2D conversion - detailed explanation of translate technology and practical development of web navigation"

6. "CSS3 practical development: teach you step-by-step practical development of photo wall"

　7. 《CSS3 practical development: teach you step by step how to develop mouse-over picture animation special effects》

　8. 《CSS3 practical development: imitating Tmall Home page picture shows practical development of animation special effects》

　9. 《CSS3 practical development: teach you step by step the practical development of folding effect》

Welcome everyone to join Internet technology exchange group: 62329335

Personal statement: The blog posts shared are absolutely original, and we strive to verify every knowledge point through practical demonstrations.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

What is the 'class' attribute in HTML?Apr 28, 2025 pm 05:37 PM

The article explains the HTML 'class' attribute's role in grouping elements for styling and JavaScript manipulation, contrasting it with the unique 'id' attribute.

See all articles