下面简单介绍一下制作简单导航网站的主要方法。 在此之前，先说一下为什么需要制作自己的导航网站。 现在互联网上有很多各种导航网站，但是互联网上的导航网站大多数都比较商业化，比如网页上有各种广告和新闻。 ，更何况还有弹窗广告。 就我个人而言，我不能接受这种广告。 我需要的是一个简单实用的导航网站，而不是各种铺天盖地的广告和新闻。
废话少说，进入正题。 首先什么是导航网站其实只是一个页面，只不过这个页面上有你需要的各种网站链接的快捷方式。
构建一个网络框架
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>网站导航</title>
</head>
<body>
</body>
</html>添加内容
框架搭建完成后，就可以向其中添加内容了。 这里我们使用H5来编写这个页面。 要使用的主要基本标签是 , 和 。
我们先来谈谈标签。 标签中的主要内容是网站的标题。 这里为了让标题栏显得不那么空洞，在右侧添加了一个2345的天气链接。 代码如下：
接下来我们来说说标签中的内容。 这里需要添加的是网页的主要内容，即各种链接。 代码如下：
<section>
<hr>
<div>
<div class="opt_1">
<input type="txt" id="serchBar" onkeypress="if(event.keyCode==13) {serch();return false;}" />
<input type="button" id="serch" value="百度一下" onclick="serch()"/>
</div>
<div class="optBar">
<div class="div_classify">
<div class="div_p">
<p class="p_classify">技术 · 参考 · 素材</p>
</div>
<div class="opt" onclick="window.open('https://juejin.im/');">
<p>掘金</p>
</div>
<div class="opt" onclick="window.open('https://segmentfault.com/');">
<p>segmentfault</p>
</div>
<div class="opt" onclick="window.open('https://www.csdn.net/');">
<p>CSDN</p>
</div>
<div class="opt" onclick="window.open('https://www.oschina.net/');">
<p>开源中国</p>
</div>
<div class="opt" onclick="window.open('http://www.jb51.net/');">
<p>脚本之家</p>
</div>
<div class="opt" onclick="window.open('http://www.ui.cn/');">
<p>UI中国</p>
</div>
<div class="opt" onclick="window.open('http://www.iconfont.cn/');">
<p>iconfont</p>
</div>
</div>
<hr>
<div class="div_classify">
<div class="div_p">
<p class="p_classify">编程 · 教程</p>
</div>
<div class="opt" onclick="window.open('http://www.w3school.com.cn/');">
<p>W3school</p>
</div>
<div class="opt" onclick="window.open('http://www.bootcss.com/');">
<p>Bootstrap3</p>
</div>
<div class="opt" onclick="window.open('http://v4.bootstrap.cn/');">
<p>Bootstrap4</p>
</div>
<div class="opt" onclick="window.open('https://www.imooc.com/');">
<p>慕课网</p>
</div>
<div class="opt" onclick="window.open('http://www.itcast.cn/');">
<p>传智播客</p>
</div>
<div class="opt" onclick="window.open('http://www.runoob.com/');">
<p>菜鸟教程</p>
</div>
</div>
<hr>
<div class="div_classify">
<div class="div_p">
<p class="p_classify">知名博客</p>
</div>
<div class="opt" onclick="window.open('https://www.liaoxuefeng.com/');">
<p>廖雪峰</p>
</div>
<div class="opt" onclick="window.open('http://www.zhangxinxu.com/');">
<p>张鑫旭</p>
</div>
</div>
<hr>
<div class="div_classify">
<div class="div_p">
<p class="p_classify">娱乐</p>
</div>
<div class="opt" onclick="window.open('http://www.youku.com/');">
<p>优酷网</p>
</div>
<div class="opt" onclick="window.open('https://www.zhihu.com/');">
<p>知乎</p>
</div>
<div class="opt" onclick="window.open('http://www.acfun.cn/');">
<p>AcFun</p>
</div>
<div class="opt" onclick="window.open('https://www.bilibili.com/');">
<p>bilibili</p>
</div>
<div class="opt" onclick="window.open('http://neihanshequ.com/');">
<p>内涵社区</p>
</div>
</div>
<hr>
<div class="div_classify">
<div class="div_p">
<p class="p_classify">购物</p>
</div>
<div class="opt" onclick="window.open('https://www.jd.com/');">
<p>京东商城</p>
</div>
<div class="opt" onclick="window.open('https://www.taobao.com/');">
<p>淘宝网</p>
</div>
<div class="opt" onclick="window.open('https://www.tmall.com/');">
<p>天猫商城</p>
</div>
<div class="opt" onclick="window.open('http://book.dangdang.com/');">
<p>当当网</p>
</div>
</div>
</div>
</div>
</section>添加内容代码后，页面如下所示：
美化界面
显然，上面不是我们想要的效果，所以我们需要给它一个简单的美化，这里使用了CSS，代码如下：
<style>
html {
width:auto;
height:auto;
}
header {
background-color:rgba(248,248,255,0.5);
folat:left;
padding:2px;
}
footer {
background-color:rgba(248,248,255,0.5);
text-align:center;
padding:1px;
clear:both;
}
section {
text-align:center;
padding:5px;
}
#serchBar {
width:30%;
height:30px;
}
#serch {
width:7%;
height:30px;
}
.opt {
width:10%;
height:40px;
background-color:rgba(230,230,250,1);
float:left;
margin : 0.25in;
transition:background-color 1s;
}
.opt:hover {
background-color:#6495ED;
cursor:pointer;
}
.optBar {
background-color:rgba(248,248,255,1);
padding:5px;
text-align:center;
margin:0 auto;
margin-bottom:20px;
width:80%;
height:700px;
}
.opt_1 {
margin:0.25in;
}
section p {
margin:10px 5px 10px 5px;
}
.p_classify {
width:100%;
font-size:18px;
margin-left:2%;
}
.div_classify {
width:100%;
height:120px;
}
.head_p {
width:10%;
height:54px;
float:left;
margin:0 40% 0 15%;
}
.head {
font-size:28px;
font-weight:bold;
font-style:italic;
color:#1E90FF;
margin-bottom:0px;
margin-top:8px;
}
.div_p {
text-align:left;
}
</style>美化后的页面是这样的：
这基本上满足了我们的需求。还有一个
标签，这里可以这样写：
<footer>
<p>Website Navigation By FLY</p>
</footer>顺便说一句，如果你想在网页中使用“百度”，可以添加以下js代码：
<script>
var serch = function(){
var word = document.getElementById("serchBar").value;
window.open("https://www.baidu.com/s?word="+word+"&tn=sitehao123_pg&ie=utf-8");
}
</script>是不是很简单呢？ 现在每个人都可以做到。 当然也欢迎更多的码农多多贡献，互相交流。
我觉得文章不错，记得打赏！
© 版权声明
The copyright of the article belongs to the author, please do not reprint without permission.
相关文章
LiuSo.cn 六搜导航网，集网址、资源、资讯于一体的开放式网站分类目录，简约优雅的设计风格，全面的前端用户功能，旨在打造高质量且收录最全的聚合导航分类目录网站，欢迎您的体验！
