Example 1
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滑过翻译</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
ul{
width: 983px;
height: 20px;
border-bottom: 8px solid #DF481D;
padding-left: 10px;
margin: 100px auto;
}
ul li{
float: left;
margin-right: 1px;
/* 外边距设置给li,不设置给li的子元素a, 如果设置给a,a以及它的外边距都属于li,下面设置li:hover, 就会在点击空白区域时触发li:hover,不符合使用习惯*/
}
ul li a{
display: block;
height: 20px;
width: 80px;
line-height: 20px;
text-align: center;
color: #616161;
font-size: 12px;
background-color: #dddddd;
}
ul li a:nth-child(2){
display: none;
background-color: #DF481D;
color: #FCFFFF;
}
/* 一定要设置li:hover而不是a:hover,下面设置a display:none;a就不会再显示，也就无法显示划过效果 */
ul li:hover a:nth-child(1){
display: none;
}
ul li:hover a:nth-child(2){
display: block;
}
</style>
<body>
<ul>
<li><a href="#">nav1</a><a href="#">导航1</a></li>
<li><a href="#">nav2</a><a href="#">导航2</a></li>
<li><a href="#">nav3</a><a href="#">导航3</a></li>
<li><a href="#">nav4</a><a href="#">导航4</a></li>
<li><a href="#">nav5</a><a href="#">导航5</a></li>
</ul>
</body>
</html>
display attribute: the box model can change the default display type through the display attribute
Value none: This element will not be displayed. Hidden elements, no place
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,
li{
list-style: none;
}
a{
text-decoration: none;
}
ul{
width: 440px;
height: 40px;/* 此处的高度选用较大的高度，即点击时盒子的高度 */
border-bottom: 1px solid #ACACAC;
margin: 100px auto;
padding-left: 40px;
}
ul li{
float: left;
margin: 3px 10px 0px 0px;/* 注意不加在a标签上 */
}
ul li a{
display: block;
height: 36px;
line-height: 36px;/* 与高度一致使文本垂直方向居中 */
text-align: center;
font-size: 12px;
color: gray;
background-color: #F9F9F9;
border: 1px solid #DADADA;
border-bottom-color: #ACACAC;/* 与ul的下边框颜色设为一致 */
padding: 0px 13px;
border-radius: 3px 3px 0px 0px;
}
li:hover{
margin-top: 0px;
}/* 将上边距设为0，视觉效果就是盒子变大向上延伸 */
ul li:hover a{
padding-bottom: 3px;/* 增大盒子使用padding */
border-color: #ACACAC;
border-bottom-color: #fff;/*使用白色来覆盖ul的边框 */
color: #ACACAC;
background-color: #fff;
line-height: 42px;
/* 用来调整文字的位置，当line-height>height时，文字内容往下移动 */
}
</style>
</head>
<body>
<ul>
<li><a href="#">Tab one</a></li>
<li><a href="#">Tab two</a></li>
<li><a href="#">Tab three</a></li>
<li><a href="#">Tab four</a></li>
</ul>
</body>
</html>
Example 3 (The principle is the same as that of Example 2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黄色导航练习</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 100px auto;
/* overflow: hidden; */
width: 395px;
height: 36px;
border-bottom: 8px solid #fee010;
padding-left: 5px;
}
ul li{
list-style: none;
float: left;
margin:6px 0 0 0;
}
ul li a{
display: block;
height: 30px;
width: 78px;
background: url(../images/yellow_bg.png) repeat;
font-size: 12px;
color: #6f737e;
text-align: center;
line-height:30px;
text-decoration: none;
}
ul li:hover a{
padding-bottom: 6px;
color: #fff;
background:url(../images/yellow2_bg.png) repeat-x;/* 从设计稿截取使用1px宽的背景图进行沿着x轴平铺来制作背景 */
line-height: 40px;
}
ul li:hover{
margin-top: 0px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
</ul>
</body>
</html>
Example 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蓝色导航</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width:486.4px;
height: 40px;
/* border-bottom:1px solid #60809F; */
margin: 100px auto;
}
ul li{
list-style: none;
float: left;
position: relative;
top: 4px;
/* margin:2px 0 0 0; */
}
ul li a{
display: block;
height: 32px;
padding: 0 10px;
border-top:1px solid #60809F;
color: #fff;
font-size: 8px;
text-decoration: none;
background: #4F8FC5;
line-height: 32px;
text-align: center;
}
ul li:hover{
/* margin: 0; */
position: relative;
top: 0px;
}
ul li:hover a{
/* padding:0px 10px 2px 10px; */
height: 40px;
background: #569BD9;
line-height: 36px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>