Nginx
1.概述
Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性:作为 Web 服务器：相比 Apache，Nginx 使用更少的资源，支持更多的并发连接，体现更高的效率，这点使 Nginx 尤其受到虚拟主机提供商的欢迎。能够支持高达 50,000 个并发连接数的响应，感谢 Nginx 为我们选择了 epoll and kqueue 作为开发模型。作为负载均衡服务器：Nginx 既可以在内部直接支持 Rails 和 PHP，也可以支持作为 HTTP 代理服务器 对外进行服务。Nginx 用 C 编写, 不论是系统资源开销还是 CPU 使用效率都比 Perlbal 要好的多。作为邮件代理服务器: Nginx 同时也是一个非常优秀的邮件代理服务器（最早开发这个产品的目的之一也是作为邮件代理服务器）。
2.在XShell上使用源码安装nginx
把下载好的nginx-1.26.2tar.gz放到XShell里有两种办法。
办法一：apt install lrzsz,然后直接拖拽进要放入的文件夹，用tar -xzvf nginx-1.26.2tar.gz解压即可。
办法二：远程登陆，找到/etc/ssh/sshd_config,nano sshd_config,允许rootlogin，然后service ssh restart，再用service ssh status看一下，已激活，重启一个shell，直接用root账号登陆，打开Xftp，即可传输文件。
下载一些编译软件，apt install build-essential
下载pcre和zlib压缩包：
解压zlib压缩包，直接./configure，会生成许多文件，有makefile,直接make（编译），然后make install（安装），prec也是一样的步骤。
配置安装路径：./configure --prefix=/test/bin(/test/bin是已建好的文件夹）,然后make&make install。在/test/bin下./sbin/nginx
html练习
exercise1
做下图的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商淘云</title>
<style>
*{
box-sizing: border-box;
}
html{
height: 100%;
}
body{
margin: 0;
height: 100%;
}
a{
text-decoration: none;
color: rgb(117, 113, 113);
}
.one{
color: gray;
background-color: rgba(108, 104, 104, 0.1);
height: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
}
.left{
display: flex;
margin-left: 2rem;
align-items: center;
}
.right{
display: flex;
margin-right: 2rem;
align-items: center;
}
.two{
height: 6rem;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
.right>a{
font-size: 1.2rem;
text-decoration: none;
color: black;
}
.three{
color: gray;
background-color: rgba(108, 104, 104, 0.1);
height: 55rem;
border-bottom: 1px solid #ddd;
}
.three-top{
display: flex;
justify-content: space-between;
}
.three-middle{
margin-top: 2rem;
margin-left: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: row;
align-items: center;
}
.three-bottom{
margin-left: 2rem;
margin-bottom: 2rem;
margin-right: 2rem;
display: flex;
justify-content: space-between;
}
img{
border-radius: 10px;
}
.card{
height: 23.5rem;
width: 40rem;
background-color: white;
margin-top: 2rem;
margin-right: 2rem;
margin-left: 2rem;
object-fit: contain;
border-radius: 10px;
}
.l1{
margin-top: 1rem;
margin-left: 2rem;
background-color: rgb(179, 181, 246);
color: white;
padding: 0.2rem 0.4rem;
display: inline-block;
}
.l2{
margin-top: 1.5rem;
margin-left: 2rem;
background-color: rgb(51, 48, 48);
color: white;
padding: 0.2rem 0.4rem;
display: inline-block;
}
.l3{
margin-top: 1.5rem;
margin-left: 2rem;
background-color: rgb(158, 156, 156);
color: white;
padding: 0.2rem 0.4rem;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="left">
欢迎来到 商淘云
</div>
<div>
<a href="#">商淘软件官网</a> |
<a href="#">交流论坛</a> |
<a href="#">服务频道</a> |
<a href="#">应用市场</a> |
<a href="#">产品体验</a>
</div>
</div>
<div class="two">
<div>
<div class="left">
<img src="assets/imgs/13.png" alt="shang">
<div style="color: red;font-size: 2rem;font-weight: bold;">商淘云</div><br>
</div>
<div class="left" style="color: rgb(102, 89, 89);">专业电商系统及服务提供商</div>
</div>
<div class="right">
<a href="#">首页</a>
<a href="#">电商资讯</a>
<a href="#">运营手册</a>
<a href="#">精品教程</a>
<a href="#">用户手册</a>
<a href="#">产品推荐</a>
<a href="#">系统下载</a>
</div>
</div>
<div class="three">
<div class="three-top">
<div style="margin-top: 2rem;margin-left: 2rem;">
<img src="assets/imgs/14.png" alt="a" height="380px" width="600px">
</div>
<div style="margin-top: 2rem;">
<div style="margin-left: 2rem;"><img src="assets/imgs/15.png" alt="b" height="180px"></div>
<div style="margin-left: 2rem;margin-top: 1rem;"><img src="assets/imgs/16.png" alt="c" height="180px"></div>
</div>
<div class="card">
<div style="margin: 1rem;color: black;font-size: 1.4rem;">
电商头条
</div>
<hr>
<div class="l1">
1
</div>
<a href="#" style="color: blue;">疫情之下，社区团购为什么...</a><br>
<div style="margin-left: 3rem;margin-right: 2rem;">社区团购主要是生活用品，流量能迅速起来，并且能实现五接触配送，商...</div>
<div class="l2">
2
</div>
<a href="#" style="color: black;">电商网站建设如何设计商...</a><br>
<div class="l2">
3
</div>
<a href="#" style="color: black;">电商网站建设一般会经过...</a><br>
<div class="l3">
4
</div>
<a href="#" style="color: black;">商淘多用户系统商城v3.3...</a><br>
<div class="l3">
5
</div>
<a href="#" style="color: black;">开源B2B2C商城系统规格...</a>
</div>
</div>
<div class="three-middle">
<div style="color: black;font-size: 2rem;">软件推荐</div>
<div style="margin-left: 2rem;">线上+线下 电商+店商</div>
</div>
<div class="three-bottom">
<div><img src="assets/imgs/17.png" alt="1"></div>
<div><img src="assets/imgs/18.png" alt="2"></div>
<div><img src="assets/imgs/19.png" alt="3"></div>
<div><img src="assets/imgs/20.png" alt="4"></div>
</div>
</div>
</body>
</html> 
exercise2
做下图的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拼多多</title>
<style>
*{
margin: 0;
}
.total{
background-color: rgb(207, 206, 206);
height: 41rem;
display: flex;
justify-content: space-between;
}
.left{
background-color: white;
margin:2rem 1rem 2rem 2rem;
width: 30rem;
border-radius: 10px;
}
.top{
width: 100%;
height: 26rem;
}
.middle{
display: flex;
}
.bottom{
display: flex;
justify-content: space-between;
}
.color1{
background-color: red;
color: white;
font-weight: bold;
font-size: 1.4rem;
display: inline-block;
margin-left: 2rem;
border-radius: 5px;
}
.color2{
margin-left: 1rem;
font-size: 1.5rem;
}
.color3{
margin-left: 2rem;
margin-top: 1rem;
color: rgb(40, 172, 40);
font-size: 1.5rem;
display: flex;
}
.color4{
margin-left: 2rem;
margin-top: 2rem;
color: red;
font-size: 1.8rem;
}
.color5{
margin-top: 2rem;
margin-left: 0.8rem;
color: gray;
font-size: 1.5rem;
}
.right{
background-color: white;
border-radius: 10px;
margin:2rem 2rem 2rem 1rem;
margin-bottom: 2rem;
width: 30rem;
}
img{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 25rem;
width: 30rem;
}
</style>
</head>
<body>
<div class="total">
<div class="left">
<div class="top">
<img src="assets/imgs/1.png" alt="1">
</div>
<div class="middle">
<div class="color1">
国庆大促
</div>
<div class="color2">2盒*1升露露杏仁</div>
</div>
<div class="color3">
<img src="assets/imgs/2.png" alt="2" style="height: 30px;
width: 30px;">
0元下单 退货包运费
</div>
<div class="middle">
<div class="color4">￥17.9</div>
<div class="color5">已抢4313瓶</div>
</div>
</div>
<div class="right">
<div class="top">
<div>
<img src="assets/imgs/3.png" alt="3">
</div>
</div>
<div class="color2">
希捷12T银河企业级氦气硬
</div>
<div class="bottom">
<div class="color3">
<img src="assets/imgs/2.png" alt="2" style="height: 30px;
width: 30px;">
0元下单
</div>
<div style="color: red;font-size: 1.5rem;margin-top: 1rem;">
即将售罄
</div>
<div style="color: gray;font-size: 1.5rem;margin: 1rem 2rem 0rem 2rem;">
分期付款
</div>
</div>
<div class="middle">
<div class="color4">首件￥591.22</div>
<div class="color5">已抢73件</div>
</div>
</div>
</div>
</body>
</html>
思维导图如下
扫一扫
1010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
