手机页面导航案例+iconfont的使用

2021-10-31 16:02:44 阅读：174 来源： 互联网

标签：center items iconfont content item 页面导航图标

CSS小练习，先看效果图

通过这个练习还熟悉了iconfont图标的使用。步骤如下
1.到iconfont搜索想要的图片，加入购物车；
2.选中所有需要下载的图标（最好将所有需要的图标放在一个项目中），点击下载
3.下载得到的是一个压缩包，解压缩拿到文件夹。文件夹中内容如下图
解压缩后文件夹内内容
4.在你需要使用图标的文件内引入iconfont样式文档，上图红线文档。
5.添加span标签，class设置为iconfont 以及你要使用的图标的名字。图标名字可以在文件夹的demo_index页面中查看。
6.设置span标签内容为对应图标的字体编码，编码见demo_index页面。
7.完成。如果想要调整大小可以在iconfont样式中统一调整，也可以根据需要个性化调整。

例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mobile Phone Navigator</title>
    <link rel="stylesheet" href="../iconfont/font_3ckwb7a4b3w/iconfont.css">
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
            background-color: rgb(178,135,190);
        }
        .phone{
            width: 350px;
            height: 600px;
            border: 3px solid #fff;
            border-radius: 15px;
            background-color: white;
            overflow: hidden;
        }
        .imgContainer{
            width: 100%;
            height: 540px;
            background-size: cover;
            overflow: hidden;
        }
        .content{
            display: none;
        }
        .content.show{
            display: block;
        }
        nav{
            width: 100%;
            height: 60px;

        }
        nav ul{
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .item{
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
            cursor: pointer;
        }
        .item:hover,
        .item.active{
            color:rgb(178,135,190);
        }
        .item p{
            padding: 0;
            font-size: 10px;
            margin: 0;
        }

    </style>
</head>
<body>
    <div class="phone">
        <div class="imgContainer">
            <img src="../images/sunnybeach.jpg" alt="homw" class="content show">
            <img src="../images/castle.jpg" alt="work" class="content">
            <img src="../images/sunsets0.jpg" alt="book" class="content">
            <img src="../images/boys.jpg" alt="about us" class="content">
        </div>
        <nav>
            <ul>
                <li class="item active">
                    <span class="iconfont home-filling">&#xe68d;</span>
                    <p>Home</p>
                </li>
                <li class="item">
                    <span class="iconfont workbench_fill">&#xe73e;</span>
                    <p>Work</p>
                </li>
                <li class="item">
                    <span class="iconfont book">&#xe60a;</span>
                    <p>Book</p>
                </li>
                <li class="item">
                    <span class="iconfont 关于我们ICON">&#xe640;</span>
                    <p>About us</p>
                </li>
            </ul>
        </nav>
    </div>
    <script>
        const imgList=document.querySelectorAll(".content");
        const items=document.querySelectorAll(".item");

        //点击item的时候先遍历移除所有item身上的active属性和所有img的show属性，
        // 然后在单击的item身上添加active样式，对应img添加show样式。这个对应由index进行对应
        items.forEach((item,index)=>{
            item.addEventListener("click",()=>{
                hideAllImg();
                hideAllItem();
                item.classList.add("active");
                imgList[index].classList.add("show");
            });
        });

        function hideAllImg() {
            imgList.forEach(item=>{item.classList.remove("show")});
        }
        function hideAllItem() {
            items.forEach(item=>{item.classList.remove("active")});
        }


    </script>
</body>
</html>

学过选择器之后加上这两次的练习，对选择器的使用逐渐熟悉了。路漫漫其修远兮，吾将上下而求索~

标签：center,items,iconfont,content,item,页面,导航,图标
来源： https://blog.csdn.net/weixin_47207556/article/details/121064980

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

手机页面导航案例+iconfont的使用