HTML案例：编写一个简单版下载导航页（附html源码）

ahja

已于 2023-10-02 13:22:41 修改

阅读量1.8k

点赞数

分类专栏： |---Web前端文章标签： html工具

于 2019-10-24 10:30:50 首次发布

本文链接：https://blog.csdn.net/qq_29001539/article/details/102717286

版权

|---Web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

分享一个下载直通页工具（附html源码）

大家使用时可以直接新建一个html文件并复制下面内容到html文件里保存后，打开就可以直接使用了，虽说有点low，不过总比日常下载软件到处找强上一百倍，如果大家对html熟悉，可以自己修改href属性值或增加a标签，新增自己常用的软件工具直通车地址。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="软件官网直达工具页面">
    <meta name="author" content="LINKSINKE">
    <title>快速下载直通页</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background: #000;
			font-size: 12px;
			font-family: Tahoma, Geneva, Verdana, sans-serif;
        }
        ul{
            list-style: none;
        }
        a {
            text-decoration: none;
            color: #fff; 
        }
        .content div{
			width: 1000px;
            margin: 20px auto 0px;
        }
        .content ul li {
            height: 60px;
            width: 120px;
            float: left;
            margin: 4px 2px;
            text-align: center;
            line-height: 60px;
            background: #d6d6d6;
            border-radius: 2px;
            border: 1px dotted red;
        }
        .content #unzip ul li {
            background: #8a2be2;
        }
        .content #input ul li {
            background: #2be2d1;
        }
		.content #funny ul li {
            background: #e2772b73;
        }
        .content #browser ul li {
            background: #2be252;
        }
        .content #office ul li {
            background:  #e2dc2b;
        } 
		.content #other ul li {
			background: #ef371a;
		}
        .content ul li:hover {
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.50;
            cursor: pointer;
            -o-transform: rotateZ(-10deg);
            -moz-transform: rotateZ(-10deg);
            -webkit-transform: rotateZ(-10deg);
            transform: rotateZ(-10deg);
        }
        .content ul li .description {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">
            <div id="unzip">
                <ul>
                    <li><a href="https://www.rarlab.com/" target="_blank">WinRAR</a></li>
                    <li><a href="http://haozip.2345.cc/" target="_blank">2345好压</a></li>
                    <li><a href="https://www.7-zip.org/" target="_blank">7zip</a></li>
					<li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
					<li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
                </ul>
            </div><!-- ./unzip -->
            <div id="input">
                <ul>
                    <li><a href="https://pinyin.sogou.com/" target="_blank">搜狗拼音输入法</a></li>
                    <li><a href="http://wubi.sogou.com/" target="_blank">搜狗五笔输入法</a></li>
                    <li><a href="http://pinyin.2345.cc/" target="_blank">2345王牌输入法</a></li>
                    <li><a href="http://qq.pinyin.cn/" target="_blank">QQ拼音输入法</a></li>
                    <li><a href="http://qq.pinyin.cn/index_wubi.php" target="_blank">QQ五笔输入法</a></li>
					<li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
                </ul>
            </div><!-- .input -->
			<div id="funny">
                <ul>
                    <li><a href="https://y.qq.com/" target="_blank">QQ音乐</a></li>
                    <li><a href="http://download.kugou.com/" target="_blank">酷狗音乐</a></li>
                    <li><a href="https://music.163.com/#/download" target="_blank">网易云音乐</a></li>
                    <li><a href="http://music.taihe.com/download/" target="_blank">千千音乐</a></li>
					<li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
					<li><a href="" target="_blank"></a></li>
                </ul>
            </div><!-- ./funny -->
            <div id="browser">
                <ul>
                    <li><a href="http://www.chromedownloads.net/" target="_blank">chrome浏览器</a></li>
                    <li><a href="https://www.mozilla.org/zh-CN/firefox/new/?utm_campaign=non-fx-button&utm_content=header-download-button&utm_medium=referral&utm_source=addons.mozilla.org" target="_blank">Firefox</a></li>
					<li><a href="https://browser.360.cn/" target="_blank">360安全浏览器</a></li>
                    <li><a href="https://browser.qq.com/" target="_blank">QQ浏览器</a></li>
					<li><a href="https://browser.360.cn/ee/" target="_blank">360极速浏览器</a></li>
                    <li><a href="https://ie.sogou.com/" target="_blank">搜狗浏览器</a></li>
					<li><a href="" target="_blank"></a></li>
                </ul>
            </div><!-- ./browser -->
            <div id="office">
                <ul class="item">
                    <li><a href="https://work.weixin.qq.com/" target="_blank">企业微信</a></li>
                    <li><a href="https://weixin.qq.com/cgi-bin/readtemplate?uin=&stype=&promote=&fr=&lang=zh_CN&ADTAG=&check=false&nav=download&t=weixin_download_list&loc=readtemplate,weixin,body,6" target="_blank">微信</a></li>
                    <li><a href="https://office.qq.com/download.html" target="_blank">TIM</a></li>
                    <li><a href="http://www.wps.cn/" target="_blank">WPS Office</a></li>
                    <li><a href="https://tms.dingtalk.com/markets/dingtalk/download" target="_blank">钉钉</a></li>
                    <li><a href="https://www.teamviewer.com/cn/" target="_blank">TeamViewer</a></li>
                    <li><a href="http://mail.163.com/dashi/" target="_blank">网易邮箱大师</a></li>
                    <li><a href="https://yun.baidu.com/" target="_blank">百度网盘</a></li>
                    <li><a href="http://cidian.youdao.com/" target="_blank">有道词典</a></li>
                    <li><a href="https://im.qq.com/download/" target="_blank">腾讯QQ</a></li>
					<li><a href="https://www.jianguoyun.com/s/downloads" target="_blank">坚果云</a></li>
                    <li><a href="https://cts.alibaba.com/product/qianniu.htm" target="_blank">千牛</a></li>
					<li><a href="http://wangwang.taobao.com/" target="_blank">阿里旺旺</a></li>
                    <li><a href="https://guanjia.qq.com/" target="_blank">腾讯电脑管家</a></li>
                    <li><a href="https://www.360.cn/" target="_blank">360官网</a></li>
                    <li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
					<li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
					<li><a href="" target="_blank"></a></li>
                </ul>
            </div><!-- ./office -->
			<div id="other">
                <ul>
                    <li><a href="https://notepad-plus-plus.org/" target="_blank">notepad++</a></li>
                    <li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
					<li><a href="" target="_blank"></a></li>
                    <li><a href="" target="_blank"></a></li>
                </ul>
            </div><!-- .other -->
        </div>
    </div>
</body>

</html>

下面是打开的效果，访问一个链接，会直接打开一个新的标签页，这样设计的目的是为了避免把这个工具给关掉