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">
<span class="icon home-icon"></span>
<span class="txt">微博</span>
</div>
<div class="item">
<img class="avatar-icon" src="./images/avatar.png" alt="" />
</div>
<div class="item">
<span class="icon search-icon"></span>
<span class="txt">发现</span>
</div>
<div class="item">
<span class="icon mail-icon"></span>
<span class="txt">消息</span>
</div>
<div class="item">
<span class="icon mine-icon"></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; } }
body {
max-width: 768px;
margin: 0 auto; }
footer.footer {
max-width: 768px;
margin: 0 auto;
height: 2.4rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 1.5rem;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: #fff; }
footer.footer .item {
width: 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.55rem;
line-height: 0.75rem;
color: #000000;
padding-bottom: 0.2rem; }
footer.footer .item:nth-child(2) {
align-self: center;
padding-bottom: 0; }
footer.footer .item .avatar-icon {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%; }
footer.footer .item .home-icon {
background: url(./images/home.png) no-repeat center/contain; }
footer.footer .item .search-icon {
background: url(./images/search.png) no-repeat center/contain; }
footer.footer .item .mail-icon {
background: url(./images/mail.png) no-repeat center/contain; }
footer.footer .item .mine-icon {
background: url(./images/mine.png) no-repeat center/contain; }
footer.footer .item .home-icon {
width: 1rem;
height: 1.1rem;
margin-bottom: 0.1rem; }
footer.footer .item .search-icon {
width: 1rem;
height: 1.15rem; }
footer.footer .item .mail-icon {
width: 1.1rem;
height: 0.85rem;
margin-bottom: 0.2rem; }
footer.footer .item .mine-icon {
width: 1rem;
height: 1rem;
margin-bottom: 0.1rem;
position: relative; }
footer.footer .item .mine-icon::after {
content: '';
width: 0.3rem;
height: 0.3rem;
display: block;
background: #FF3939;
border-radius: 50%;
position: absolute;
top: -1px;
right: -0.2rem; }
/*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;
}
}
// 尺寸处理自定义函数
// 移动端微博设计稿尺寸宽度为375,这里除以 20
@function px2rem($px) {
@return #{$px / 20}rem;
}
// body部分最大宽度
$maxWidth: 768px;
body {
max-width: $maxWidth;
margin: 0 auto;
}
footer.footer {
max-width: $maxWidth;
margin: 0 auto;
height: px2rem(48);
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 px2rem(30);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: #fff;
.item {
width: px2rem(30);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
font-size: px2rem(11);
line-height: px2rem(15);
color: #000000;
padding-bottom: px2rem(4);
&:nth-child(2) {
align-self: center;
padding-bottom: 0;
}
.avatar-icon {
width: px2rem(30);
height: px2rem(30);
border-radius: 50%;
}
@each $icon in home, search, mail, mine {
.#{$icon}-icon {
background: url(./images/#{$icon}.png) no-repeat center / contain;
}
}
.home-icon {
width: px2rem(20);
height: px2rem(22);
margin-bottom: px2rem(2);
}
.search-icon {
width: px2rem(20);
height: px2rem(23);
}
.mail-icon {
width: px2rem(22);
height: px2rem(17);
margin-bottom: px2rem(4);
}
.mine-icon {
width: px2rem(20);
height: px2rem(20);
margin-bottom: px2rem(2);
position: relative;
&::after {
content: '';
width: px2rem(6);
height: px2rem(6);
display: block;
background: #FF3939;
border-radius: 50%;
position: absolute;
top: -1px;
right: px2rem(-4);
}
}
}
}*/