HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./index.css" />
<title>移动端问吧首页</title>
</head>
<body>
<footer class="footer">
<div class="item item-selected">
<span class="icon footer-icon1"></span>
<span class="txt">首页</span>
</div>
<div class="item">
<span class="icon footer-icon2"></span>
<span class="txt">练习</span>
</div>
<div class="item">
<span class="icon footer-icon3"></span>
<span class="txt">消息</span>
</div>
<div class="item">
<span class="icon footer-icon4"></span>
<span class="txt">我的</span>
</div>
</footer>
</body>
</html>
CSS部分:
html,
body {
height: 100%;
margin: 0; }
ul,
li {
margin: 0;
padding: 0; }
li {
list-style: none; }
h1,
h2 {
margin: 0; }
p {
margin: 0;
padding: 0; }
@media screen and (max-width: 768px) {
html {
font-size: 20px; } }
@media screen and (max-width: 320px) {
html {
font-size: 17.0666666667px; } }
.btn {
padding: 0;
border: none;
background: transparent;
cursor: pointer; }
.btn:focus {
outline: none; }
body {
max-width: 768px;
margin: 0 auto; }
.footer {
max-width: 768px;
height: 2.45rem;
margin: 0 auto;
box-sizing: border-box;
background: #FFFFFF;
border-top: 1px solid #E1E1E1;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 2.3rem;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10; }
.footer .item {
text-align: center;
font-size: 0.5rem;
line-height: 0.7rem;
color: #666666;
padding-bottom: 0.175rem; }
.footer .item-selected {
color: #3492FD; }
.footer .item:nth-child(1) .icon {
background: url(./images/footer-icon1.png) no-repeat center/contain; }
.footer .item:nth-child(2) .icon {
background: url(./images/footer-icon2.png) no-repeat center/contain; }
.footer .item:nth-child(3) .icon {
background: url(./images/footer-icon3.png) no-repeat center/contain; }
.footer .item:nth-child(4) .icon {
background: url(./images/footer-icon4.png) no-repeat center/contain; }
.footer .item:nth-child(1) .icon, .footer .item:nth-child(4) .icon {
margin-bottom: 0.125rem; }
.footer .item:nth-child(2) .icon {
margin-bottom: 0.05rem; }
.footer .item:nth-child(3) .icon {
margin-bottom: 0.1rem; }
.footer .item .icon {
width: 1.2rem;
height: 1.2rem;
display: block; }
/*scss代码如下:*/
/*html,
body {
height: 100%;
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
h1,
h2 {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
// 浏览器都有自己的默认样式,以上部分为清除浏览器默认样式
@media screen and (max-width: 768px) {
html {
font-size: 20px;
}
}
@media screen and (max-width: 320px) {
html {
font-size: 20px / 375 * 320;
}
}
@function px2rem($px) {
@return #{$px / 40}rem;
}
.btn {
padding: 0;
border: none;
background: transparent;
cursor: pointer;
&:focus {
outline: none;
}
}
$maxWidth: 768px;
body {
max-width: $maxWidth;
margin: 0 auto;
}
.footer {
max-width: $maxWidth;
height: px2rem(98);
margin: 0 auto;
box-sizing: border-box;
background: #FFFFFF;
border-top: 1px solid #E1E1E1;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 px2rem(92);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
.item {
text-align: center;
font-size: px2rem(20);
line-height: px2rem(28);
color: #666666;
padding-bottom: px2rem(7);
&-selected {
color: #3492FD;
}
@for $i from 1 to 5 {
&:nth-child(#{$i}) .icon {
background: url(./images/footer-icon#{$i}.png) no-repeat center / contain;
}
}
&:nth-child(1), &:nth-child(4){
.icon {
margin-bottom: px2rem(5);
}
}
&:nth-child(2) .icon {
margin-bottom: px2rem(2);
}
&:nth-child(3) .icon {
margin-bottom: px2rem(4);
}
.icon {
width: px2rem(48);
height: px2rem(48);
display: block;
}
}
}
*/