简单的导航网站制作

杜金房

发布于 2020-12-21 16:02:20

5.1K00

代码可运行

运行总次数：0

代码可运行

这里简单地介绍一下制作一个简易导航网站的主要方法。在这之前要说一下为什么要自己制作导航网站，现在网络上有许多各种各样的导航网站，但是网络上的导航网站大多商业化比较明显，比如说网页上各种各样的广告、新闻，更有甚者还有弹窗式的广告，就我个人而言，我是接受不了这种的，我需要的只是一个简单实用的导航网站而已，而不是各种铺天盖地的广告与新闻。

闲话少叙，进入正题。首先什么是导航网站，其实就是一个页面而已，只不过这个页面上有各种你所需要的网站链接的快捷方式。

搭建网页框架

<!DOCTYPE html><html>
   <head>
   <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width,initial-scale=1" />
 	<title>网站导航</title>
</head>
<body></body>
</html>

添加内容

框架搭建好之后就可以往里添加内容了，这里我们用的是H5来编写这个页面，要用到的几个主要的基础标签有<header>、<section>以及<footer>。

先说<header>标签。<header>标签里主要的内容是网站的标题，这里为了使标题栏显得不那么空，在右侧加上了2345的天气链接，代码如下：

<header>
<div>
<div class="head_p">
<p class="head">网 站 导 航</p>
</div>
   <div class="head_iframe">
<iframe class="weather" allowtransparency="true" frameborder="0" width="500" height="50" scrolling="no"            src="https://tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=2&d=3&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=565&h=64&align=right">
 	</iframe>
   </div>
</div>
</header>

接下来说一说<section>标签里的内容，这里面要添加的是网页的主要内容，即各种链接，代码如下：

<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">技术 &#183; 参考 &#183; 素材</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">编程 &#183; 教程</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>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-09-06，如有侵权请联系 cloudcommunity@tencent.com 删除

html