各位网友，今天这篇文章，我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效。在这个特效中应用的知识点都很基础，如果你对这些还不清楚，可以关注我以前写的详细教程。今天讲这个案例，也是希望告诉大家，在开发一个特效的时候，请不要将问题复杂化。可能有些人一开始真的不知道从哪下手，当你看完本次教程，你定会觉得，原来一切都这么简单。
可能有些人还不知道这个特效，啥也不说了，直接上效果图：
从上面的特效中，大家不难发现，当鼠标划过热搜词时，会有一个半透明的黑色背景滑上来，而且这个黑色区域中也是有热搜词的。
大概知道这些细节后，现在我就分步骤带领大家开发这个特效。
根据上面所说的关键细节，编写html代码如下:
大家从html源码中会发现，每个热搜词都出现两次，这是因为一个用作正常显示的，另一是用作当鼠标划过时，滑动上来的黑色区域。这里我暂且分别将它们样式定义为.hotwords_li_a和detail，同时我们的关键词用无序列表(ul)来显示。
页面代码编写完后，我们先运行一下，查看一下现在的效果：
页面元素都准备好之后，接着我们给页面添加样式，首先要做的是先清除掉无序列表(ul)的默认样式，同时设置外容器布局以方便演示。样式代码如下：
*{ /*设置所有元素默认内外边距，同时设置默认字体大小*/ margin:0; padding:0; font-size:14px;}.container{ /*设置外层容器布局，这里主要是为了方便演示*/ margin:200px 200px auto;}/*
