li里面嵌套a标签html和css小例子

来源：互联网发布：软件开发常用模型编辑：程序博客网时间：2024/06/04 17:50

总效果：

html:

响应式CSS：

/* 网站头部 */

header {
width: 100%;
}

header .top {
line-height: 3rem;
padding: 0 1.5rem;
color: #fff;
background: #555;
border-bottom: 1px #ecc000 solid;
}

header .top .tel {
float: left;
}

header .top ul {
text-align: right;
}

header .top ul li {
display: inline-block;
}

header .top ul li + li {
border-left: 1px solid #999;
margin-left: -3px;
}

header .top ul li a {
display: inline-block;
padding: 0 1.5rem;
color: #fff;
}

@media only screen and (max-width: 50em) {
header .top ul li a {
padding: 0 1rem;
}
}

@media only screen and (min-width: 30.0625em) and (max-width: 50em) {

}

@media only screen and (max-width: 30em) {
header .top .tel,
header .top ul li:nth-child(3),
header .top ul li:nth-child(4) {
display: none;
}
}

header .main {
padding: 0;
}

header .main .brand {
float: left;
padding: 1rem 1.5rem 0;
}

header .main ul {
text-align: right;
}

header .main ul li {
display: inline-block;
border-left: 1px solid #f0ede9;
}

header .main ul li a {
display: inline-block;
padding: 0 2.5rem;
line-height: 5.5rem;
font-size: 1.6rem;
font-weight: bold;
color: #7c7a65;
text-decoration: none;
}

header .main ul li a:hover,
header .main ul li a:active,
header .main ul li a.active {
color: #ffb300;
background-color: #f8f6f1;
}

@media only screen and (max-width: 50em) {

header .main .brand {
float: none;
display: block;
padding: 0;
margin: 1.5rem auto 0.5rem;
text-align: center;
}

header .main ul {
text-align: center;
}

header .main ul li {
border: none;
}

header .main ul li a {
padding: 0 1.5rem;
}
}

@media only screen and (max-width: 30em) {

header .main ul li {
line-height: 3rem;
}

header .main ul li:first-child {
display: none;
}

header .main ul li a {
font-weight: normal;
padding: 0 0.5rem;
}
}

0 0