SimpleIndex
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./js/location.js"></script>
    <title>MyIndex</title>
</head>

<!--
    复用说明:
    1.修改html文件：
        1.1 下载icon（图标）：可访问 https://www.iconfont.cn/ 下载自己想要的图标到文件夹 icos
        1.2 修改html文件：若需要增加标签，可添加 div ，设置 id ，将标签<img>图片改为自己下载的图标
        1.3 修改html 的<title>：这是网页标题，可以修改为自己想要的

    2.修改js文件：
        2.1 只需要修改 location.js 文件，这是地址跳转文件，只需要将前面设置的 id 加上 跳转的 URL 就行

    3.修改浏览器设置：
        3.1 将浏览器的主页修改为index.html的本地位置，如：F:\chrome\myindex\index.html

    总结：复制粘贴完事
-->

<body>
    <div class="container">
		<!--第一行-->
		<div class="box" id="google">
		    <div class="img" id="weixin">
		        <img src="./icos/google.png"/>
		    </div>
		    <p>Google</p>
		</div>
		<div class="box" id="translate">
		    <div class="img">
		        <img src="./icos/translate.png"/>
		    </div>
		    <p>谷歌翻译</p>
		</div>
        <div class="box" id="baidu">
            <div class="img">
                <img src="./icos/baidu.png"/>
            </div>
            <p>百度</p>
        </div>
		<div class="box" id="bdpan">
		    <div class="img">
		        <img src="./icos/bdpan.png"/>
		    </div>
		    <p>百度网盘</p>
		</div>
		<div class="box" id="qqemail">
		    <div class="img">
		        <img src="./icos/QQemail.png"/>
		    </div>
		    <p>QQ邮箱</p>
		</div>

		<!--第二行-->
		<div class="box" id="cnblog">
		    <div class="img">
		        <img src="./icos/cnblog_1.png"/>
		    </div>
		    <p>博客园</p>
		</div>

        <div class="box" id="csdn">
            <div class="img">
                <img src="./icos/csdn.png"/>
            </div>
            <p>CSDN</p>
        </div>
        <div class="box" id="github">
            <div class="img">
                <img src="./icos/GitHub.png"/>
            </div>
            <p>GitHub</p>
        </div>
		<div class="box" id="gitee">
		    <div class="img">
		        <img src="./icos/gitee.png"/>
		    </div>
		    <p>码云</p>
		</div>
		<div class="box" id="juejin">
		    <div class="img">
		        <img src="./icos/juejin.png"/>
		    </div>
		    <p>掘金</p>
		</div>

		<!--第三行-->
		<div class="box" id="blog">
		    <div class="img">
		        <img src="./icos/blog.png"/>
		    </div>
		    <p>个人博客</p>
		</div>
        <div class="box" id="bilibili">
            <div class="img">
                <img src="./icos/BILIBILI_LOGO.png"/>
            </div>
            <p>哔哩哔哩</p>
        </div>
        <div class="box" id="leetcode">
            <div class="img">
                <img src="./icos/LeetCode.png"/>
            </div>
            <p>LeetCode</p>
        </div>
        <div class="box" id="wyy">
            <div class="img">
                <img src="./icos/wyy.png"/>
            </div>
            <p>网易云音乐</p>
        </div>
		<div class="box" id="youdao">
		    <div class="img">
		        <img src="./icos/youdao.png"/>
		    </div>
		    <p>有道云笔记</p>
		</div>


    </div>
</body>


</html>