css导航栏选中是有移动下划线的效果
来源:互联网 发布:php get获取不到数据 编辑:程序博客网 时间:2024/05/22 12:27
技术不行,拿百度前端学院题目练习,其中遇到一个导航栏,每当选中一个选项,下面出现一个下划线标注。我本来想直接省掉这个功能,后来觉得这样学习估计什么都学不到。后来思考和查阅,记录如下。大概是这么个效果:
HTML代码:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Time of new life</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div class="header"> <div class="logo"> <img src="(编组)3.png" alt="ico"> <span> 新世界</span> </div> <ul> <li><a href="#">首页</a></li> <li><a href="#">最新活动</a></li> <li><a href="#">项目介绍</a></li> <li><a href="#">爱心社区</a></li> <li><a href="#">关于我们</a></li> <li><a href="#" style="color:red;"><img src="2.png" alt="set in"> 登录</a></li> <li class="move"> </li> </ul> </div> </body></html>
CSS代码:
* { padding: 0px; margin: 0px;}body{ min-width: 1280px;}.header { height: 56px; width: 100%; border: 1px solid gray;}div.logo { float: left; margin: 10px 50px;}div.logo span { font-size: 23px; display: block; float: right;}ul { list-style-type: none; padding: 0px; float: right; position: relative;/*子元素absol*/}ul img{ position: relative; top: 3px;}ul li { width: 110px; height: 56px; text-align: center; float: left;}ul li a { color: #848789; text-decoration: none; line-height: 56px;}ul a:hover{ color: red;}.move{ height: 4px; width: 110px; border-top: 4px solid red;/*只需要将上边显示出来*/ position: absolute; left: 0; top: 52px; transition: left .2s ease-in-out 0s;/*包含四个过度属性:执行变换属性、执行时间、速率、延迟*/ -webkit-transition: left .2s ease-in-out 0s;/*chrome和safari*/ -moz-transition: left .2s ease-in-out 0s;/*firefox*/ -o-transition: left .2s ease-in-out 0s;/*opera*/}li:nth-child(1):hover~ .move{ /*li元素的父元素的第一个子元素,当鼠标停留其上时,move元素的left属性改变*/ left: 0px;}li:nth-child(2):hover~ .move{ left: 110px;}li:nth-child(3):hover~ .move{ left: 220px;}li:nth-child(4):hover~ .move{ left: 330px;}li:nth-child(5):hover~ .move{ left: 440px;}li:nth-child(6):hover~ .move{ left: 550px;}
我最开始不懂的地方就是如何移动,用的其实就是transition属性;还有鼠标放在超链接上,下面出现下划线,用的是:hover伪类;即最后几行css代码。
注:(1)~符号:应该是一种关系选择器:
(2)transition属性用于过度作用,这是一个简写属性,具体包含:
transition-property (执行变换的属性 )
transition-duration (变换延续时间)
transition-timing-function (延续时间内,变换速率的变化)
transition-delay (变换延迟时间)
例:transition: left .2s ease-in-out 0s;/*包含四个过度属性:执行变换属性、执行时间、速率、延迟*/
left属性发生变化,用时0.2秒,速度先慢到快再到慢
阅读全文
0 0
- css导航栏选中是有移动下划线的效果
- android实现对导航Tab设置下划线选中效果
- android实现对导航Tab设置下划线选中效果
- CSS+JS制作导航栏点击选中效果
- 一段css效果的导航栏
- 一段css效果的导航栏
- 一段css效果的导航栏
- 一段CSS效果的导航栏
- ios7导航栏有ios6的效果
- Android 标题下划线 选中效果
- android带彩色下划线的tab移动导航
- 动画效果css导航栏
- 58、水平导航栏+导航栏跟随+导航栏下划线滑动效果
- 常用的导航栏下划线滚动特效
- 隐藏导航栏下划线
- 设置导航栏下划线
- 带效果的移动导航条
- 选中文字高亮的css效果
- 2017"百度之星"程序设计大赛
- Linux/Centos 安装PHP ioncube扩展
- 定义一个整型数组,长度为5。
- QT 图形库 qcustomplot 坐标轴和网格线
- 设计模式-观察者模式与事件委托
- css导航栏选中是有移动下划线的效果
- 20170807ceph入门(一)——ceph中rados对象创建以及文件上传与下载
- 利用python将execl的数据导入hive
- 在 Mac OS X 上安装 TensorFlow
- OpenCV自学笔记24. Raspberry pi +OpenCV 读取摄像头
- socket 的关闭
- 高级for循环(foreach)
- java多线程----关于join方法的注意点,以及守护线程的小结
- Mac环境下Myeclispe2015工具的安装与破解