搭建一个自己的导航网页

前言

由于最近公司平台太多了,之前一直保存到谷歌浏览器的书签里面,但是有时候想用手机或者IPAD访问,有没有安装谷歌浏览器,就比较麻烦。最关键是当你需要让某个人打开某个网站,但是同类型网站太多,域名估计是记不住的,这时候有个专门用于导航的页面还是蛮方便的。读完这个文章,就能分分钟搭建一个这样的网站。

准备

如果你想任何地方都能打开它,那就得有一个自己的服务器。我这里用的是vultr。然后为了好记得有一个自己的域名,我是去万维网弄的一个,当然这些其实阿里都可以搞定。

服务器配置

首先通过远程ssh进入你的服务器,安装Nginx,php看需装吧。

apt-get install build-essential
apt-get install libtool
sudo apt-get install libpcre3 libpcre3-dev
apt-get install zlib1g-dev
apt-get install openssl
//以上是依赖
apt-get insatll nagix

apt-get insatll php7.0

这时候通过服务器ip地址访问一下就能看到nagix的首页了,也可以先去万维网绑定一下解析规则,之后就直接输入域名。
我们先可以看看nagix的html和域名的配置文件,通常的文件位置在:
/etc/nginx/sites-available
里面如图箭头位置就是html位置和域名倒向,下划线是当输入没有指向时默认倒向改处,我将其改为了指定的域名
这里写图片描述
之前我们直接通过域名或者IP访问的就是这儿的文件了。如果你想通过子域名访问不同的页面,可以在该文件最下面解除server的那个屏蔽,编写方式和上面是一样的如图:
这里写图片描述
编辑完成后重启nginx就好

systemctl reload nginx.service

页面

如果你不需要啥效果,单纯是个导航页面的话,直接编写有一个html就好了,效果如下图
这里写图片描述
源码如下:

<head>
    <meta charset="utf-8">
    <title>物联网导航页</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
    .main{
        margin-top: 50px;
        margin-left: 10%;
        width: 80%;
        text-align: center;
    }
    a{
        margin-left: 10px;
    }
    </style>
</head>
<ul class="list-group main">
    <li class="list-group-item"><a class="btn btn-primary" target="_blank" href="#">正式物联网云平台</a><a class="btn btn-primary" target="_blank" href="#">正式物联网管理平台</a></li>
    <li class="list-group-item"><a class="btn btn-primary" target="_blank" href="#">测试物联网云平台</a></li>
    <li class="list-group-item"><a class="btn btn-primary" target="_blank" href="#">电气火灾应用平台</a><a class="btn btn-primary" target="_blank" href="#">电气火灾管理平台</a></li>
    <li class="list-group-item"><a class="btn btn-primary" target="_blank" href="#">正式lora服务器</a><a class="btn btn-primary" target="_blank" href="#">测试lora服务器</a></li>
</ul>

<div class="main">
    这里是物联网各个平台的导航页面
</div>

代码中的#位置输入自己想倒去的网址就好。

如果想好看一点,但是又怎么懂这方面知识的话,就直接去模板网站下一个页面来自己改改吧。对照着页面改,还是比较简单的,下面是我找了个模板自己改了改的图,下面是部分截图
这里写图片描述
下载下来的模板以html为目标导向,将全部文件都扔到配置指向的文件夹即可。默认指向的文件夹是var/www里面。

  • 2
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是一个简单的网页示例,使用Bootstrap框架进行快速搭建: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> <div class="container mt-5"> <h1>Welcome to our website!</h1> <p>We provide high-quality products and services for our customers.</p> <button type="button" class="btn btn-primary">Learn More</button> </div> </body> </html> ``` 这个网页包含了一个导航栏和一个简单的内容区域。你可以将代码复制到一个HTML文件中并打开它,以查看效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值