编程技术

Document

Nginx的介绍及HTML课后练习

 Nginx

Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性:作为 Web 服务器：相比 Apache，Nginx 使用更少的资源，支持更多的并发连接，体现更高的效率，这点使 Nginx 尤其受到虚拟主机提供商的欢迎。能够支持高达 50,000 个并发连接数的响应，感谢 Nginx 为我们选择了 epoll and kqueue 作为开发模型。作为负载均衡服务器：Nginx 既可以在内部直接支持 Rails 和 PHP，也可以支持作为 HTTP 代理服务器 对外进行服务。Nginx 用 C 编写, 不论是系统资源开销还是 CPU 使用效率都比 Perlbal 要好的多。作为邮件代理服务器: Nginx 同时也是一个非常优秀的邮件代理服务器（最早开发这个产品的目的之一也是作为邮件代理服务器）。

Nginx 安装非常的简单，配置文件 非常简洁（还能够支持 perl 语法），Bugs非常少的服务器: Nginx 启动特别容易，并且几乎可以做到 7 * 24 不间断运行，即使运行数个月也不需要重新启动。你还能够在 不间断服务的情况下进行软件版本的升级。

Nginx 和 Apache 对比

  • 静态文件处理能力：nginx 高于 apache
  • 资源消耗：nginx 优于 apache，因为 nginx 是异步处理模型，只需要几个进程就能够处理大量在线请求，而 apache 2.4 仍然是进程模型或者线程模型，即仍然采用大量线程来处理大量在线请求。
  • apache 支持的模块很多，而且也比较稳定。而 nginx 由于出现的比较晚，所以在这方面可能比不上 apache。
  • nginx 本身就是一个反向代理服务器，而且支持 7 层负载均衡。
  • nginx 处理动态页面很鸡肋，一般只用与处理静态页面和反向代理。

练习

在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>
        html,body{
            margin: 0;
            
        }
        .box{
            display: flex;
            background-color: rgb(213, 216, 217);
            height: 2rem;
            padding: 0 2rem;
            justify-content: space-between;
            align-items: center;
        }
        .menu-box{
            display: flex;
            background-color: white;
            height: 5rem;
            padding: 0 2rem;
            justify-content: space-between;
            align-items: center;
        }
        .tab-box{
            display: flex;
            background-color: rgb(213, 216, 217);
            height: 34rem;
            padding: 0 2rem;
            justify-content: space-between;
            align-items: center;
            
            
        }
        .dian-box{
            display: block;
            height: 30rem;
            width: 30rem;
            margin-top: 2rem;
            margin-left: 2rem;
            background-color: white;
            border-radius: 1rem;
        }
        .ruan-box{
            background-color: rgb(213, 216, 217);
            font-size: 2rem;
            display: flex;
            padding: 0 2rem;
            height: 4rem;
            align-items: center;
        }
        .ruan-test{
            font-size: 1rem;
            color: #848080;
            margin-left: 1rem;
        }
        .dian-test{
        font-size: 1rem;
        color: #706e6e;
        margin-top: 2rem;
        margin-left: 2rem;
        }
        .menu-test{
            color: black;
            font-size: 1.1rem;
            font-weight: bold;
        }
        .test{
            font-size: 1rem;
            color: #706e6e;
        }
        .head-side ul{
            display: flex;
            padding: 0;
            margin: 0;
            list-style: none;
            color: #848080;
        }
        .head-side li{
        margin-left: 1rem;

        }
        .head-side a{
            color: rgb(69, 71, 72);
                
            font-size: 1rem;
            text-decoration:none;
        }
        .head-side a:hover{
            text-decoration: underline;
        }
        .logo1{
            width: 60rem;
            height: 30rem;
            margin-top: 2rem;
        }
        .logo2{
            width: 33rem;
            height: 14rem;
            margin-top: 2rem;
            margin-left: 2rem;
        }
        hr{
            display: flex;
           border: 1px solid rgb(196, 195, 195);
          width: 32rem;
            
         
        }
        .lan-1{
            
            display: flex;
            width: 3rem;
            height: 3rem;
            background-color: rgb(66, 210, 250);
            color: rgb(244, 244, 249);
            font-size: 1.5rem;
            justify-content: center;
            align-items: center;
            margin-left: 1rem;
        }
        .lan-2{
            display: flex;
            width: 3rem;
            height: 3rem;
            background-color: rgb(80, 83, 83);
            color: rgb(244, 244, 249);
            font-size: 1.5rem;
            justify-content: center;
            align-items: center;
            margin-left: 1rem;
        }
        .lan-3{
            display: flex;
            width: 3rem;
            height: 3rem;
            background-color: rgb(167, 169, 169);
            color: rgb(244, 244, 249);
            font-size: 1.5rem;
            justify-content: center;
            align-items: center;
            margin-left: 1rem;
        }
        .xitong-box{
            display: flex;
            padding: 0 2rem;
            background-color: rgb(213, 216, 217);
            justify-content: space-between;
        }
        
    </style>
    
</head>
<body>
<div>
    <div class="box">
        <div class="test">欢迎来到商淘云</div>
        <div class="head-side">
            <ul  >
                <li><a href="">商淘软件官网</a> |</li>
                <li><a href="">交流论坛</a> |</li>
                <li><a href="">服务频道</a> |</li>
                <li><a href="">应用市场</a> |</li>
                <li><a href="">产品体验</a> </li>
            </ul>
        </div>
    </div> 
    <div class="menu-box">
        <div>
            <img src="./assets/img/商淘云.jpg" width="150rem" height="50rem">
        </div>
        
        <div class="head-side">
            <ul  class="menu-test">
                <li><a href="">首页</a></li>
                <li><a href="">电商资讯</a></li>
                <li><a href="">运营手册</a></li>
                <li><a href="">精品教程</a></li>
                <li><a href="">用户手册</a></li>
                <li><a href="">产品推荐</a></li>
                <li><a href="">系统下载</a></li>
            </ul>
        </div>
    </div> 
    <div class="tab-box">
        
        <div >
            <img src="./assets/img/商1.jpg" alt="" class="logo1">
        </div>
        <div>
            <div >
                <img src="./assets/img/商2.jpg" alt="" class="logo2">
            </div>
            <div >
                <img src="./assets/img/商3.jpg" alt="" class="logo2">
            </div>
        </div>
        <div class="dian-box">
            <div>
                <h2 style="color: #848080; margin-left: 1rem;" >电商头条</h2>
            </div>
            <hr>
            <div style="margin-top: 1rem; display: flex;"  >
                <div class="lan-1" >
                    1
                </div>
                <div >
                    <div style=" margin-left: 2rem;justify-content: center" >
                        <div style="color: rgb(114, 184, 250); font-size: 1.5rem; ">
                            疫情之下，社区团购为什么...
                            <div style="font-size: 1rem; color: #848080;">
                            社区团购主要是生活用品，流量能迅速起来，<br>并且能实现无接触配送，商
                           </div>
                        </div>
                       
                    </div>
                </div> 
                
            </div>
            <div style="display: flex; margin-top: 1.5rem;">
                <div class="lan-2">
                    2
                </div>
                <div style="color: rgb(102, 103, 104); font-size: 1.5rem; margin-left: 2rem; margin-top: 0.5rem;">
                  电商网站建设如何设计商...    
                </div> 
            </div>
            <div style="display: flex; margin-top: 2rem;">
                <div class="lan-2">
                    3
                </div>
                <div style="color: rgb(102, 103, 104); font-size: 1.5rem; margin-left: 2rem; margin-top: 0.5rem;">
                  电商网站建设一般会经过...    
                </div>
            </div>
            <div style="display: flex; margin-top: 2rem;">
                <div class="lan-3">
                    4
                </div>
                <div style="color: rgb(102, 103, 104); font-size: 1.5rem; margin-left: 2rem; margin-top: 0.5rem;">
                  商淘多用户商城系统v3.3...    
                </div>
            </div>
            <div style="display: flex; margin-top: 2rem;">
                <div class="lan-3">
                    5
                </div>
                <div style="color: rgb(102, 103, 104); font-size: 1.5rem; margin-left: 2rem; margin-top: 0.5rem;">
                  开源B2B2C商城系统规格...
                </div>
            </div>
           </div>     
        
    </div>
    <div class="ruan-box">
        <div >
            软件推荐
        </div>
        <div class="ruan-test">
            线上+线下&nbsp;电商+店商
        </div>
    </div>
    <div class="xitong-box">
        
            <div>
                <img src="./assets/img/商淘.jpg" alt="">
            </div>
            <div>
                <img src="./assets/img/零售.jpg" alt="">
            </div>
            <div>
                <img src="./assets/img/连锁.jpg" alt="">
            </div>
            <div>
                <img src="./assets/img/B2C.jpg" alt="">
            </div>
        
        
    </div>
</div> 
</body>
</html>

编写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{
            background-color: rgb(160, 161, 161);
            display: flex;
            
            height: 50rem;

        }
        .yemian{
            background-color: rgb(250, 249, 249);
            height: 50rem;
            border-radius: 0.5rem;
            
        }
        .china-box{
           display: flex;
           
           align-items: center;
           margin-top: 1rem;
           
        }
        .china{
            display: flex;
            color: white;
            background-color: red;
            margin-left: 0.2rem;
            padding: 0.2rem 0.2rem;
            width: 8rem;
            height: 3rem;
            
            font-size: 2rem;
            
        }
        .text{
            display: flex;
            font-size: 2rem;
            margin-left: 1rem;
        }
        .yunfei-box{
            margin-top: 2rem;
        }
        .yunfei{
            
            color: rgb(34, 179, 31);
            font-size: 2rem;
            margin-top: 1rem;
        }
        .yuan{
            color: red;
            font-size: 1.5rem;
            font-weight: bold;
        }
        .yuan1-box{
            margin-top: 2rem;
        }
        
        .yuan-box{
            margin-top: 1rem;
        }
        .yuan-text{
            color: rgb(133, 136, 138);
            font-size: 1.5rem;
        }
        .ji{
            color: rgb(217, 28, 28);
            font-size: 2rem;
            margin-top: 1rem;
            margin-left: 1rem;
        }
        .fen{
            color: rgb(158, 159, 158);
            font-size: 2rem;
            margin-top: 1rem;
            margin-left: 1rem;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="yemian">
            <div class="logo">
                <img src="./assets/img/1.jpg" alt="">
            </div>
            <div class="china-box">
                <span class="china">国庆大促</span>
                <span class="text">2盒*1升露露杏仁</span>
            </div>
            <div class="yunfei-box">
                <img src="./assets/img/标志.jpg" alt="" width="35rem" height="35rem">
                <span class="yunfei">0元下单&nbsp;退货包运费</span>
            </div>
            <div class="yuan-box">
                <span class="yuan">￥</span>
                <span class="yuan" style="font-size: 2.3rem;">17.9</span>
                <span class="yuan-text">已抢4313瓶</span>
                
            </div>
        </div>
        <div class="yemian">
            <div class="logo">
                <img src="./assets/img/2.jpg" alt="">
            </div>
            <div class="china-box">
               
                <span class="text">希捷12T银河企业级氦气硬</span>
            </div>
            <div class="yunfei-box">
                <img src="./assets/img/标志.jpg" alt="" width="35rem" height="35rem">
                <span class="yunfei">0元下单</span>
                <span class="ji">即将售馨</span>
                <span class="fen">分期付款</span>
            </div>
            <div class="yuan1-box">
                <span class="yuan">首件￥</span>
                <span class="yuan" style="font-size: 2rem;">591.22</span>
                <span class="yuan-text">已抢4313瓶</span>
            </div>
        </div>
    </div>
    
</body>
</html>