技术不行,拿百度前端学院题目练习,其中遇到一个导航栏,每当选中一个选项,下面出现一个下划线标注。我本来想直接省掉这个功能,后来觉得这样学习估计什么都学不到。后来思考和查阅,记录如下。大概是这么个效果:
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秒,速度先慢到快再到慢