静态页面+阿里iconfont实现回到顶部功能
使用iconfont+js实现回到顶部功能
使用方法:
- 下载:
打开阿里iconfont官网,找到自己想要的图标点击添加入库,最后在自己的库里点击下载。 - 解压导入:
解压下载好的压缩包,打开里面的demo_index.html根据里面的提示一步步导入就可以了
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线</title>
<link rel="stylesheet" href="./css/index.css">
<script src="/html_css_test/学成在线案例/js/index.js"></script>
</head>
<body>
<div class="header w">
<!-- logo部分 -->
<div class="logo"><img src="./img/xczx.png" alt=""></div>
<!-- nav导航栏部分 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 搜索模块 -->
<div class="serch">
<input type="text" placeholder="输入关键字">
<button></button>
</div>
<!-- 用户模块 -->
<div class="user">
<img src="./img/user.png" alt="">
<p>dsadsa</p>
</div>
</div>
<!-- 主题部分 -->
<div class="main">
<div class="w">
<div class="left">
<ul>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">后端开发<span>></span></a></li>
<li><a href="#">移动开发<span>></span></a></li>
<li><a href="#">人工智能<span>></span></a></li>
<li><a href="#">商业预测<span>></span></a></li>
<li><a href="#">云计算&大数据<span>></span></a></li>
<li><a href="#">运维&测试<span>></span></a></li>
<li><a href="#">UI设计<span>></span></a></li>
<li><a href="#">产品<span>></span></a></li>
&