使用html语言完成拼多多移动端导航栏的设计-大连东软信息学院计算机科学与技术专业高级网页设计基础课题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="font/iconfont.js"></script>
    <title></title>
</head>
<style>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
a{
    text-decoration: none;
}
body,ul,p{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
.a{
    font-family: '黑体';
    position: fixed;/*固定定位*/
    left: 0;
    bottom: 0;
    z-index: 6;
    background-color: #e4e6e3;
    width: 100%;
}
body{
    margin-bottom: 50px;
    /*防止最下面的内容看不到。和下导航一起出现，固定搭配*/
}
    .a ul{
    display: flex;
    /*适应各种屏幕的宽度*/
}
.a li{
    position: relative;
    width: 30%;
    text-align: center;
}
.icon{
    width: 30px;
    height: 30px;
    font-size: 30px;
    margin: 5px 0;
    
    /*上下 左右*/
}
.icon p{
    color: #333;
    line-height: 26px;
    font-size: 8px;
    letter-spacing: 3px;
}
.a .footer .dot{
    width: 17px;
    height: 20px;
     border-radius: 50%; /* 使其呈现圆形 */
     background-color: red;
     color: #fff;
     font-size: 3vw; /* 调整字体大小 */

     display: flex;
     justify-content: center;
     align-items: center;

     position: absolute;
     right: 4.5vw; /* 调整右侧偏移量 */
     top: -0vw; /* 调整顶部偏移量 */
}
.home{
     color: #ff0707;
font-weight: 900;
}
</style>
<body>
    <nav class="a">
        <ul class="footer">
            <li class="home">
                <a href="#"></a>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-home"></use>
                </svg>
                <p>首页</p>
            </li>
            <li>
                <a href="#"></a>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shipin"></use>
                </svg>
                <p>多多视频</p>
            </li>
            <li>
                <a href="#"></a>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-121201"></use>
                </svg>
                <p>双12大促</p>
            </li>
            <li>
                <a href="#"></a>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chat"></use>
                </svg>
                <p>聊天</p>
            </li>
            <li>
                <a href="#"></a>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gerenzhongxin-zhihui"></use>
                </svg>
                <p>个人中心</p>
                <span class="dot">7</span>
            </li>
        </ul>
    </nav>
</body>
</html>