html搜索栏热搜效果,CSS3实战开发:百度新闻热搜词特效实战开发_html/css_WEB-ITnose...
各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效。在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程。今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化。可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单。
可能有些人还不知道这个特效,啥也不说了,直接上效果图:
从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有热搜词的。
大概知道这些细节后,现在我就分步骤带领大家开发这个特效。
根据上面所说的关键细节,编写html代码如下:
大家从html源码中会发现,每个热搜词都出现两次,这是因为一个用作正常显示的,另一是用作当鼠标划过时,滑动上来的黑色区域。这里我暂且分别将它们样式定义为.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; }
运行页面,查看此时的页面效果:
外容器的基本布局以及所有元素的默认样式设置完成之后,现在我们就可以来实现新闻热搜词的区域样式了:
.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;}
上面这段样式代码主要是设置热搜词区域li的样式,如果对代码不是太了解,可以参考我的样式注释。
此时效果如下:
大家可以发现,我在最开始时演示的样式,新闻热搜词这个title信息为淡蓝色的,同时热搜词区域是显示两行的,现在我们来添加以下设置显示热搜词区域的样式:
.hotwords{ /*设置新闻热搜词区域的大小*/ width:568px;}.keywords_title{ /*设置热搜词区域字体样式以及它距离底部外边距的距离*/ font-size:1.5em; margin-bottom:10px;}.keywords_title,.keywords_title a{ /*设置热搜词title以及热搜词link的默认颜色*/ color:#3399CC;}
此时的页面样式如下:
当我们鼠标划过这些热搜词时,没有任何变化。好,接着我们给页面中的类型为detail的元素应用样式:
.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;}
在上面这段代码中,我们主要使用了两个关键属性,position:absolute和transition,如果大家对这两个不是太了解的,可以参考我以前写的教程《CSS3实战开发:手把手教你照片墙实战开发》和《CSS3基本属性之Transition详解》。经过这两个教程的学习,相信你对这些知识点都会了如指掌了。
现在我们运行一下页面:
至此,《百度新闻热搜词特效》就开发完了,大家说是不是很简单呢。
往期精彩实战开发案例一览(已被广为转载,下面只列出部分):
1. 《CSS3实战开发:手把手教你鼠标滑动特效开发》
2. 《CSS3实战开发:手把手教大家搜索表单发光特效实战开发》
3. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》
4. 《CSS3线性渐变技术详解及超炫按钮实战开发》
5. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》
6. 《CSS3实战开发:手把手教你照片墙实战开发》
7. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》
8. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》
9. 《CSS3实战开发:手把手教大家折角效果实战开发》
欢迎大家加入互联网技术交流群:62329335
个人申明:所分享博文,绝对原创,并力争每一个知识点都通过实战演示来进行验证。
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
html搜索栏热搜效果,CSS3实战开发:百度新闻热搜词特效实战开发_html/css_WEB-ITnose...相关推荐
- 2011年百度新闻热搜榜十大互联网人物
"有人的地方就会有江湖",2011年互联网江湖上大佬小弟层出不穷,你方唱罢我登场,支付宝股权转移纠纷.淘宝商城遭围攻.雅虎阿里巴巴股权之争--马云这一年不时就登上网络头条;当当网上 ...
- 7 数据挖掘案例实战1—百度新闻标题、网址、日期及来源
数据挖掘案例实战1-百度新闻标题.网址.日期及来源 获取网页源代码 编写正则表达式提取新闻 1.提取新闻的来源和日期 2.提取新闻的网址和标题 数据清洗并打印输出 1.新闻标题的清洗 2.新闻来源和日 ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
- python爬虫实战之百度新闻爬取
百度新闻信息爬取 目录 百度新闻信息爬取 序言 获取在百度新闻中搜索"阿里巴巴"的网页源代码 编写正则表达式提取新闻信息 数据清洗并打印输出 实战完整代码 序言 通过对百度新闻标 ...
- python与seo实战课程百度云_python与seo优化实战课程
python与seo优化实战课程 发布日期:2020-11-28 02:11:28 当我讲到要做N个网站的时候,一般同学的第一反应都是:一个网站还没搞明白,怎么能做N个网站. 但理解了群站定位的思想后 ...
- 【前端小实战】百度新闻雪碧图及动画(CSS sprites)
文章目录 前言 ~ 雪碧图 一.页面效果展示 二.代码实现解析 三.完整代码 前言 ~ 雪碧图 雪碧图,英文原名叫 CSS sprites,其实就是融合了各种资源的图片,图片里面可能会有一个角色的 ...
- 微信小程序云开发之新闻博客社区项目debug后的项目代码
大家好,我是csdn的博主:lqj_本人 这是我的个人博客主页:lqj_本人的博客_CSDN博客-微信小程序,html特效,vue2基础领域博主 本次文章主要时为我最近在哔哩哔哩上的新发布的视频做一个 ...
- qt for android开发百度地图(一步步带图详解)
qt for android开发百度地图 前言:qt for android开发百度地图,其实找了很多资料,基本上没有,就自己折磨弄了出来,这个过程还是很曲折的,折磨了一两个星期,没有资料,就两个字' ...
- 移动Web开发--学习笔记三 响应式项目实战(微金所)
响应式项目实战(微金所) 响应式项目开发流程 选择一种屏幕格式进行开发 相应功能模块完成后,测试是否响应式效果 确保响应式效果满足要求 进行下一个功能模块开发 使用自定义字体图标 创建自己的字体图标h ...
最新文章
- Please select Android SDK
- TableStore:单行操作
- DOM操作中,遍历动态集合的注意事项。ex: elem.children
- python是什么语言
- java判断多个线程是否跑批完成_终于有人把Java内存模型说清楚了
- Eclipse中的快捷键……希望朋友们能熟练使用
- 树莓派安装vsftp过程中遇到的坑
- react 实现展示公司层级,选择人员的功能
- 如何向投资人委婉的表达:我们什么都不缺,只缺钱?
- 采样定理与奈奎斯特极限
- IDEA 自动导入的配置(Auto import)
- MEX and Increments
- STL 常用容器的底层数据结构实现
- leetcode 714 买卖股票的最佳时机含手续费-动态规划(中等)
- ajax防止表单重复提交
- 最常见的运放LM358简要功能介绍(抄原理图)
- scriptures是什么意思,scriptures英语怎么读
- 2010CAD激活码
- [渝粤教育] 西南科技大学 电工学 在线考试复习资料
- 提取LOL模型并在3DMax中贴好图导入到U3D中使用