纯HTML代码制作好看的网址导航页面


<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" media="screen"/>
<title>测试-网址导航</title>
<base target="_blank">
<style>
body{padding:0;margin:0;background:#f5f5f5;font-size:13px;color:#666;font-family:"微软雅黑",sans-serif;}
ul,dl,dt,dd,p{list-style-type:none;padding:0;margin:0;}
a{text-decoration:none;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}
.clearfix{zoom:1;}
.head_box{background:#333;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);}
.head{width:1000px;height:89px;margin:0 auto;}
.head .logo{height:35px;margin:27px 20px 0 0;}
.logo .logoimg{display:block;width:152px;height:50px;background:url(http://www.songjiale.com/img/logo.png) no-repeat 0 0;font-size:0;line-height:80px;overflow:hidden;}
.head .title{height:20px;color:#fff;font-size:16px;margin:37px 0 0 0;border-left:1px solid #fff;line-height: 20px;padding:0 0 0 20px;}
.favorite{height:20px;line-height:20px;margin: 38px 0 0;}
.favorite a,.favorite a:hover{color:#fff;font-size:14px;display:inline-block;float: left;margin: 0 0 0 30px;height:20px;padding:0 0 0 17px;}
.favorite a.head_home{background: url(images/head_home.png) no-repeat 0 4px;}
.favorite a.head_fav{background: url(images/head_fav.png) no-repeat 0 4px;}
.favorite a.head_download{background: url(images/head_download.png) no-repeat 0 4px;}
.favorite a:hover{color:#FF6010;}

.content{width:1000px;margin:20px auto 65px;color: #333;}
.content .project_title{width:940px;background-color:#999;text-align:center;color:#FFF;padding:0 30px;height: 41px;margin-bottom:-1px;position: relative;}
.content .project_title li{float:left;width:188px;height:40px;text-align:center;line-height: 40px;}
.content .list_box{width:1000px;margin:0 auto;background:#FFF;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);overflow: hidden;}
.content .list{width:940px; margin: 0 auto;}
.content .list li{float:left;width:188px;height:40px;text-align:center;line-height: 40px;border-top: 1px dashed #D3D3D3;color:#999;}
.content .list li.border_none{border-top:none;}
.content .list_friends{margin-top: -1px;border-top: 1px dashed #D3D3D3;}
.content .list_friends li{height:auto;line-height: 22px;padding:10px 0 14px;text-align: left;border-top:none;}
.content .list_friends .text{color: #999;text-align: left;display: block;font-size: 12px;line-height: 18px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;word-break: break-all;padding: 0 10px;}

.content .list .project_name{text-align: left;padding:0 0 0 68px;width:120px;font-weight:bold;color:#333;}
.content .list a,.content .list a:hover{display:inline-block;color: #3E71F7;padding:0 10px;height: 24px;line-height: 24px;}
.content .list a:hover{background:#3E71F7;border-radius:11px;color:#fff;}
.content .title_h2{margin:16px 0 0;padding:0 0 0 40px;background:url(images/system-internet.png) no-repeat 12px 13px;height:40px;line-height:40px; font-size:16px;}
.content .title_h3{padding:0 0 0 40px;height:40px;line-height:40px; font-size:14px;font-weight: bold;background: #999;color: #fff;}
.footer_box4{text-align:center;font-size: 12px;color:#666;line-height:20px;padding:15px 0;width:100%;background: #fff;}
</style>
<script type="text/javascript">
//设为首页
function SetHome(obj,url){
    try{
        obj.style.behavior='url(#default#homepage)';
        obj.setHomePage(url);
    }catch(e){
        if(window.netscape){
            try{
                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            }catch(e){
                alert("抱歉，此操作被浏览器拒绝！\n\n请在浏览器地址栏输入“about:config”并回车然后将[signed.applets.codebase_principal_support]设置为'true'");
            }
        }else{
            alert("抱歉，您所使用的浏览器无法完成此操作。\n\n您需要手动将【"+url+"】设置为首页。");
        }
    }
}
//收藏本站
function AddFavorite(title, url) {
    try {
        window.external.addFavorite(url, title);
    }
    catch (e) {
        try {
            window.sidebar.addPanel(title, url, "");
        }
        catch (e) {
            alert("抱歉，您所使用的浏览器无法完成此操作。\n\n加入收藏失败，请使用Ctrl+D进行添加");
        }
    }
}

function addFavorite1() {
	var url = window.location;
	var title = document.title;
	var ua = navigator.userAgent.toLowerCase();
	if (ua.indexOf("360se") > -1) {
		alert("由于360浏览器功能限制，请按 Ctrl+D 手动收藏！")
	} else {
		if (ua.indexOf("msie 8") > -1) {
			window.external.AddToFavoritesBar(url, title)
		} else {
			if (document.all) {
				try {
					window.external.addFavorite(url, title)
				} catch (e) {
					alert("您的浏览器不支持,请按 Ctrl+D 手动收藏!")
				}
			} else {
				if (window.sidebar) {
					window.sidebar.addPanel(title, url, "")
				} else {
					alert("您的浏览器不支持,请按 Ctrl+D 手动收藏!")
				}
			}
		}
	}
};
//保存到桌面
function toDesktop(sName,sUrl){
try {
    var WshShell = new ActiveXObject("WScript.Shell");
    var oUrlLink =          WshShell.CreateShortcut(WshShell.SpecialFolders("Desktop")     + "\\" + sName + ".url");
    oUrlLink.TargetPath = sUrl;
    oUrlLink.Save();
    }
catch(e)  {
          alert("当前IE安全级别不允许操作！");
}
}
</script>
</head>

<body>
<div class="head_box">
	<div class="head">
	    <div class="logo fl"><a href="/" class="logoimg" target="_self">网站LOGO</a></div>
	    <div class="title fl">网址导航</div>
	    <div class="favorite fr">
			<a href="javascript:void(0)" target="_self" onClick="SetHome(this,window.location)" class="head_home">设为主页</a>
			<a href="javascript:void(0)" target="_self" onclick="addFavorite1()" class="head_fav">加入收藏</a>
			<a href="javascript:void(0)" target="_self" onclick="toDesktop(document.title,window.location)" class="head_download">保存到桌面</a>
		</div>
	</div>
</div>


<div class="content">
        <div class="title_h2">这一行文字可根据自己需求保留</div> 
	<div class="title_h2">这一行文字可根据自己需求保留</div>
	<div class="title_h3">品类专业采购平台</div>
	<div class="list_box">
		<div class="list_box">
			<ul class="list list_friends clearfix">
				<li><a href="https://www.51mydao.com/" title="专业的传感器平台,众多品牌授权代理及直销,产品有接近开关、编码器、光电开关、测量传感器等工业传感器,正品特价,售后服务完善,适用于我司询价和订货。">买道传感网</a><span class="text">接近开关、编码器、光电开关、测量传感器等工业传感器</span></li>
				<li><a href="https://www.gpyh.com/" title="紧固类B2B分销平台（全国多仓备货，第三方物流配送，纯线上交易，总部苏州，覆盖不锈钢、碳钢、铜、尼龙材质）">工品一号</a><span class="text">覆盖不锈钢、碳钢、铜、尼龙材质紧固类B2B分销平台</span></li>
				<li><a href="https://www.51hgp.com/" title="紧固件B2B平台（整合各区域代理商，覆盖不锈钢、碳钢、尼龙材质）">好工品</a><span class="text">不锈钢、碳钢、尼龙材质紧固件B2B平台</span></li>
				<li><a href="https://www.51jgep.com/" title="">紧固E购</a><span class="text" title="紧固件：4.8、8.8、10.9、12.9、A2-50、A2-70级内外内角螺栓、锌丝杆，可接收定制报价">紧固件：4.8、8.8、10.9、12.9、A2-50、A2-70级内外内角螺栓、锌丝杆，可接收定制报价</span></li>
				<li><a href="https://www.fskongkong.com/SYB43763632420200912" title="">空空工业品</a><span class="text">工具、劳保、耗材、传动油脂、照明等</span></li>
			</ul>
			<ul class="list list_friends clearfix">
				<li><a href="https://www.dmkg.com/home" title="紧固件B2B平台（东明工厂销售平台，有华北仓、嘉兴仓、华南仓，第三方物流配送，可以操作加钱拆箱拆盒，总部嘉兴，不锈钢材质）">东明快购</a><span class="text">不锈钢紧固件平台</span></li>
				<li><a href="https://www.sfiec.cn/" title="紧固类B2B平台（一仓覆盖江浙沪，第三方物流，总部上海，碳钢材质，其中美制标准有一部分备货）">标五在线</a><span class="text">碳钢材质螺栓螺母等紧固类商品</span></li>
				<li><a href="https://www.xlxjgj.com/" title="紧固类B2B分销平台（一仓覆盖苏州、无锡、常州等，第三方物流，总部无锡，碳钢材质）">兴联鑫</a><span class="text">碳钢材质螺栓螺母等紧固类商品</span></li>
				<li><a href="https://www.027fd.com/" title="紧固件B2B平台（一仓覆盖武汉，第三方物流，总部武汉，碳钢材质）">福都紧固件</a><span class="text">碳钢材质螺栓螺母等紧固类商品</span></li>
				<li><a href="https://www.mro365.com/" title="">畅为</a><span class="text">劳保</span></li>
			</ul>
			<ul class="list list_friends clearfix">
				<li><a href="https://www.xinminghui.com/" title="">新明辉</a><span class="text">劳保/清洁</span></li>
				<li><a href="https://www.zhaolaobao.com/" title="">找劳保网</a><span class="text">劳保</span></li>
				<li><a href="https://b.jslink.com/" title="">集什</a><span class="text">办公/福利</span></li>
				<li><a href="https://www.jd.com/b" title="">京东企业购</a><span class="text">办公/福利</span></li>
				<li><a href="https://www.sczcn.com/" title="">企立达</a><span class="text">办公/福利</span></li>
			</ul>
			<ul class="list list_friends clearfix">
				<li><a href="https://www.zjshop.com.cn/" title="专业轴承行业平台，品牌较多，可在线查询价格及库存状态，目前为我司正常供应商">中机昌盛商城</a><span class="text">轴承</span></li>
				<li><a href="https://www.bearingbus.com/" title="专业轴承行业平台，设计商家及品牌较多，支持询报价订货">轴承巴士商城</a><span class="text">轴承</span></li>
				<li><a href="http://www.jinshang9.cn/home" title="">紧商网</a><span class="text">紧固件</span></li>
			</ul>
		</div>
	</div>
	<div class="title_h3">机加工定制</div>
	<div class="list_box">
		<div class="list_box">
			<ul class="list list_friends clearfix">
				<li><a href="https://xometry.asia/" title="国际专业机械加工行业网站，询报价便捷">XOmetry</a><span class="text">机械加工件</span></li>
				<li><a href="https://www.haizol.com/" title="机械加工平台国内领先平台，询报价便捷，工业品行业应用较广">海智在线</a><span class="text">机械加工件</span></li>
				<li><a href="https://www.yhdfa.com/" title="">怡合达</a><span class="text">紧固、轴承、工业品</span></li>
				<li><a href="http://www.jiagong.net.cn/" title="非贸易网站，但机加工渠道居多">中国机械加工网</a><span class="text">机械加工、数控车床等商品</span></li>
				<li><a href="http://www.sifake.com/" title="">思发科</a><span class="text">加工件定制、机械加工</span></li>
			</ul>
			<ul class="list list_friends clearfix">
				<li><a href="https://www.haizol.com/" title="">海智在线</a><span class="text">工业信息化产品、机床车床设备、MRO设备</span></li>
			</ul>
		</div>
	</div>
	<div class="title_h3">品类缺失寻源</div>
	<div class="list_box">
		<div class="list_box">
			<ul class="list list_friends clearfix">
				<li><a href="https://www.toodudu.com/" title="">涂多多</a><span class="text">化学品</span></li>
				<li><a href="https://china.guidechem.com/" title="化工品类，可搜品类及渠道，卖家买家模式">盖德化工网</a><span class="text">化学品</span></li>
				<li><a href="https://www.kaiyinhg.com/" title="化工行业全商城，品类较丰富，支持询价订货">凯茵化工商城</a><span class="text">化学品</span></li>
				<li><a href="https://www.molbase.cn/" title="综合类平台，可发布询报价信息及相关行业信息">摩贝化学</a><span class="text">化学品</span></li>
				<li><a href="https://www.chinaharlan.com/tradingFloor/spotTrading/list/257" title="化工品类，可搜品类及渠道，卖家买家模式">化浪商城</a><span class="text">化学品</span></li>
			</ul>
			<ul class="list list_friends clearfix">
				<li><a href="https://www.longdaoyun.com/" title="">隆道云</a><span class="text">全品类</span></li>
				<li><a href="https://www.aupup.com/" title="科旗下的询报价平台，17年以前只服务万科集团，17年以后开始业务对外，实际的询价和订货都为线下操作。现场平台没有实操作用，均为宣传使用。">采筑网</a><span class="text">全品类</span></li>
				<li><a href="https://www.gongbangbang.com/" title="正常供应商/企业微信群下单">工邦邦</a><span class="text">MRO</span></li>
				<li><a href="http://www.mooioo.com/" title="综合类平台，可发布询报价信息及相关行业信息">中国密封网</a><span class="text">密封品类</span></li>
				<li><a href="http://www.ptfe1688.com//" title="密封品类渠道查询及行情资讯">中国四氟网</a><span class="text">密封品类</span></li>
			</ul>
			<ul class="list list_friends clearfix">
				<li><a href="https://www.mymooo.com/" title="直线模组联轴器工业零部件模块服务">蚂蚁工厂商城</a><span class="text">工业零部件加工类</span></li>
				<li><a href="https://www.ibk365.com/home" title="专业轴承行业平台，专业SKF经销商渠道，可在线查询价格及库存状态，目前为我司正常供应商">爱备客</a><span class="text">轴承</span></li>
			</ul>
		</div>
	</div>
	<div class="title_h3">投标报价</div>
	<div class="list_box">
		<div class="list_box">
			<ul class="list list_friends clearfix">
				<li><a href="https://ttm.titanmatrix.com/#/center" title="">天工直通车</a><span class="text">高、中、低压工程工业电器类商品</span></li>
				<li><a href="https://www.vtoall.com/" title="我司在对钩网发布了电力金具商品寻源，共计6家主动联系报价，其中4家报价不全，2家全部已报价，其中一家已做样品。">对钩网</a><span class="text" title="加工件定制、机械加工、焊接、钣金、冲压、五金件等相关商品询报价">加工件定制、机械加工、焊接、钣金、冲压、五金件等相关商品询报价</span></li>
				<li><a href="https://www.1688.com/" title="适用于全品类，单品多量，多品多量，多品少量">1688</a><span class="text">全品类，不接收定制</span></li>
				<li><a href="https://www.taodingding.com/" title="紧固类B2B分销平台（一仓覆盖苏州，上海，嘉兴，无锡。自己车队配送，总部苏州，覆盖不锈钢、碳钢材质）">淘钉钉</a><span class="text">不锈钢、碳钢材质紧固件类B2B分销平台</span></li>
			</ul>
		</div>
	</div>
</div>
<div class="footer_box4">
	<p>地址：XXXXXXXXXXXXXXXXXXXXXXX</p>
	<p style="text-align: center;" dir="ltr">2002-2024 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
</body>

	</html>



	





	演示如下：

测试-网址导航

网站LOGO

网址导航

设为主页加入收藏保存到桌面

这一行文字可根据自己需求保留

品类专业采购平台