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

前言

一、效果图

二、图标的使用

三、代码的编写

四、运行效果

五、文档编写

前言

1.本文所讲内容来自辽宁·大连东软信息学院计算机与技术专业高级网页设计（专升本）课程期中四级项目课题之一，题目要求是自主选择相应的APP移动端，对其进行导航栏的设计与开发；

2.本文所讲的是html超文本标记语言；

3.html语言的编写以收入到我的专栏“html-本科”当中，其中有相关的系列文章；

4.本文的操作步骤具有多样性，其步骤的不是唯一、正确的答案，内容仅供参考!

5.若文中出现错误，欢迎提出指正，作者将充分吸取经验，总结问题，完善文章；

6.若涉及到有关问题可通过私信或文章底部名片方式联系本文博主，博主热情好客！

7.本文使用的软件是VScode版本，其他版本与本文步骤基本相似，若使用的版本已经汉化，请注意操作步骤；

8.本文不涉及任何官方教学及商用，请注意甄别，其内容仅供学习交流；

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图

二、图标的使用

首先需要在浏览器搜索阿里巴巴矢量图标官方网站，然后选择所需要的图标，添加至项目下载，最后将下载的font文件放在代码编写的文件资源器当中进行调用

三、代码的编写

<!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>