只有a标签
a {
border-radius: 10px;
padding: 5px;
width: 12rem;
height: 42px;
line-height: 35px;
margin: .8rem;
font-size: 12px;
display: inline-block;
text-decoration: none;
text-align: center;
background: rgba(0,0,0,.35);
color: #fff;
font-weight: 700;
}
a:hover {
color: deepskyblue;
background-color: black;
}
a标签+li标签
a {
font-weight: 700;
display: block;
background: rgba(0, 0, 0, 0.35);
color: rgb(255, 255, 255);
font-size: 12px;
text-align: center;
line-height: 35px;
padding: 4px 0px;
border-radius: 2px;
transition: all 0.2s ease 0s;
z-index: 1;
text-decoration: none;
}
a:hover {
color: deepskyblue;
background-color: black;
}
li {
position: relative;
height: 42px;
width: 110px;
margin: 3px;
list-style: none;
float: left;
}
nav+a+ul+li标签,加框线
a {border-left: solid 5px #f00;
display: block;
min-width: 7.5rem;
height: 2.75rem;
line-height: 2.75rem;
padding: 0 1.25rem 0 1.45rem;
letter-spacing: 0.2rem;
font-size: 0.8rem;
font-weight: 700;
color: #fff;
text-decoration: none;
}
a:hover {
color: deepskyblue;
background-color: black;
}
nav {
display: flex;
-webkit-flex-direction: column;
align-items: center;
text-align: center;
}
ul {
margin: 0px;
padding: 0px;
font-size: 14px;
font-weight: 700;
background: rgba(0,0,0,.45);
display: flex;
list-style: none;
border: solid 5px #f00;
}