通过设置<a>的背景改变样式，通过a:hover改变交互效果，改变文字颜色color
纵向
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>横向导航</title>
<style>
*{
margin:0;
padding: 0;
font-size: 14px;
}
ul{
list-style: none;
width: 100px;
}
/*
li{
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:10px; } /*padding-left:10px*/
/*********************关键是将<a>标签变成块级元素**************/
a{
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:15px;
}
a:hover{background-color: orangered;
color: #000;}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
横向
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>横向导航</title>
<style>
*{
margin:0;
padding: 0;
font-size: 14px;
}
ul{
list-style: none;
/* width: 100px;*/
}
/*
li{
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:10px; } /*padding-left:10px*/
/*********************关键是将<a>标签变成块级元素**************/
li{
float: left;
}
/*给li加上浮动*/
a{
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-right:1px;
/*text-indent:15px;*/
text-align: center;
color:navajowhite;
}
a:hover{background-color: orangered;
color: #000;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
美化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>横向导航</title>
<style>
*{
margin:0;
padding: 0;
font-size: 14px;
}
.nav{
padding-left: 100px;
height: 30px;
margin-top:20px;
border-bottom: 10px solid orange;
}
ul{
list-style: none;
/* width: 100px;*/
}
/*
li{
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:10px; } /*padding-left:10px*/
/*********************关键是将<a>标签变成块级元素**************/
li{
float: left;
}
/*给li加上浮动*/
a{
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width:100px;
background-color: lightgrey;
margin-right:1px;
color: black;
/*text-indent:15px;*/
text-align: center;
}
a:hover{background-color: orange; color: #ffffff;
}
</style>
</head>
<body>
<div class="nav">
<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>
</ul>
</div>
</body>
</html>
时间： 2024-10-13 02:21:43