1，安装nginx
这是官网：nginx: download，电脑64位所以下载了这个,Mainline version 是 NGINX 的主要发行版本，它包含了最新的特性和更新。
2，C盘内存不多下载后可以放在D盘
在D盘里新建一个文件夹nginx
3.打开cmd进入D盘
cmd进来后如果是c盘，切换到D盘
4，通过nginx.exe启动，如果启动失败请检查
5，配置Nginx下的nginx.conf
打开nginx.conf文件进行编辑，里面的配置很多，其中一些重要的配置进行了说明（前面有“#”的表示并没有真正写入配置，若要加入，只需去掉“#”）：
6,启动Nginx服务
配置完Nginx后，返回Nginx根目录，找到nginx.exe，双击运行它，你会看到有个小黑框一闪而过，这说明Nginx已经成功启动！你可以打开浏览器，输入：虚拟主机名称:监听的端口（刚刚的配置），回车，就会看到如下网页：
恭喜你，已经成功搭建了Nginx服务器！
7.为你的网站添加文件
进入刚刚配置的 html 文件夹位置，在该文件夹下新建一个.html，打开后输入这段代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
height: 100%;
background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
width: 358px;
height: 588px;
border-radius: 15px;
padding: 0 50px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.header {
font-size: 38px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.input-item {
display: block;
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 10px;
border-bottom: 1px solid rgb(128, 125, 125);
font-size: 15px;
outline: none;
}
.input-item:placeholder {
text-transform: uppercase;
}
.btn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 40px;
background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
color: #fff;
}
.msg {
text-align: center;
line-height: 88px;
}
a {
text-decoration: none;
color: #abc1ee;
}
</style>
</head>
<body>
<div class="container">
<div class="login-wrapper">
<div class="header">Login</div>
<div class="form-wrapper">
<input type="text" name="username" placeholder="username" class="input-item">
<input type="password" name="password" placeholder="password" class="input-item">
<div class="btn">Login</div>
</div>
<div class="msg">
Don't have account?
<a href="#">Sign up</a>
</div>
</div>
</div>
</body>
</html>
|
再将文件名改为index.html，保存，放到Nginx的html目录里。最后再次打开浏览器，输入虚拟主机名称:监听的端口（刚刚的配置），回车，你就会看见如下页面：
http://localhost:8080/index.html
8.内网穿透
服务器搭建完了，网页也有了，但其实除了跟你在同一个局域网下的人，都无法访问你的网站。就要用到内网穿透了，所谓内网穿透，也即是局域网能够直接通过公网的ip去访问，可以使用飞鸽内网穿透。
标签：nginx,text,Nginx,html,div,安装,class From： https://www.cnblogs.com/ni677/p/17765362.html