前端练习案例001

index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏导航栏</title>
    <!-- 1.引入自定义css样式 -->
    <link rel="stylesheet" href="../css/1.css">
    <!-- 2.引入开源图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <!-- 3.菜单按钮 -->
    <input type="checkbox" id="menu_btn">
    <!-- 4.给checkbox绑定一个label -->
    <label for="menu_btn" class="menu-btn">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </label>
    <!-- 5.第一页 -->
    <div class="first_page">
        <h1>全屏覆盖导航栏</h1>
        <h3>使用h5+css实现</h3>
    </div>
    <!-- 6.第二页 -->
    <div class="second_page">
        <!-- 7.导航菜单内容 -->
        <ul class="menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">系统信息</a></li>
            <li><a href="#">软件信息</a></li>
        </ul>
    </div>
</body>
</html>

css样式

/* 0.设置全局 */
* {
    /* 1.设置内边距和外边距为0所有内容都顶到页面 */
    margin: 0;
    padding: 0;
    /* 2.告诉浏览器设置的内外边距都是包含在总款高内的 */
    box-sizing: border-box;
}
/* 3.第一页 */
.first_page {
    display: flex;
    /* 垂直排列 */
    flex-direction: column;
    /* 垂直和水平居中 */
    justify-content: center;
    align-items: center;
    /* 窗口高度 */
    height: 100vh;
    /* 行高 */
    line-height: 80px;
    /* 字大小 */
    font-size: 30px;
    /* 字间距 */
    letter-spacing: 15px;
}
/* 此时可以下拉看到第二页内容 */
/* 4.第二页 */
.second_page {
    /* 固定窗口不能滚动 */
    position: fixed;
    /* 设置页面距离上边距 */
    top: 0;
    /* 设置页面距离左边距 */
    left: 0;
    /* 设置窗口100% */
    width: 100%;
    height: 100%;
    /* 设置第二页背景为渐变色 */
    background: linear-gradient(200deg,#2fbb5b,#32509e);
    /* 切一个圆形出来，25px为直径 calc(100% - 45px) 45px为圆心 */
    clip-path: circle(25px at calc(100% - 45px) 45px);
    /* 动画效果 */
    transition: all 0.3s ease-in-out;
}

.menu-btn{
    position: absolute;
    right: 20px;
    top: 20px;
    /* 将lable提升到第二层 */
    z-index: 2;
    /* 设置第二页背景为渐变色 */
     background: linear-gradient(200deg,#2fbb5b,#32509e);
     width: 50px;
     height: 50px;
     /* 把方形切成圆形 */
     border-radius: 50%;
    /* 面包屑居中 */
     text-align: center;
     line-height: 50px;
     font-size: 20px;
     /* 鼠标小手 */
     cursor: pointer;  
         /* 动画效果 */
    transition: all 0.3s ease;
}

/* 隐藏复选框 */
#menu_btn{
    display: none;
}

/* 设置点击动画事件 */
#menu_btn:checked ~ .second_page {
    /* 75%开始渲染整个页面 */
    clip-path: circle(75%);
}

/* 设置点击动画事件 */
#menu_btn:checked ~ .menu-btn {
    /* 面包屑颜色 */
    color: rgb(238, 103, 20);
    /* 背景为白色 */
    background: #fff;
}

/* 设置点击动画事件 */
#menu_btn:checked ~ .menu-btn i::before {
    /* 把i标签面包屑改为菜 */
    content: "菜";
}

.second_page ul {
    /* 居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    /* 去除列表样式 */
    list-style: none;
}

.second_page ul li{
   margin: 30px 0px;
}

.second_page ul a {
    color: azure;
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    padding: 5px 50px;
    position: relative;
    line-height: 50px;
}

/* 设置白色遮罩 */
.second_page ul li a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50px;
    background: #fff;
    border-radius: 50px;

    z-index: -1;
    left: 0;
    /* 设置白色遮罩不显示 */
    transform: scaleY(0);
    /* 设置一个动画时间 */
    transition: transform 0.3s ease;
}
/* 显示白色遮罩：激活动画事件 */
.second_page ul li a:hover::after {
    transform: scaleY(1);
}
/* 设置鼠标悬停后字体颜色 */
.second_page ul li a:hover{
    color: #32509e;
}

服务部署

我们使用nginx服务器作为静态资源服务器
创建一个文件夹用于存放静态资源

mkdir myhtml

mkdir css

我们把html文件上传到myhtml下面，css上传到css文件夹下面
在这里插入图片描述
修改配置文件，主要修改location块里面的root文件夹，修改为静态资源文件夹。

 server {
        listen       80;
        server_name  localhost;
        
        location / {
            root   myhtml;
            index  index.html index.htm;
        }
    }

启动nginx服务器。

cd /usr/local/nginx/sbin/

./nginx

访问nginx服务器ip和端口

http://192.168.67.199/

在这里插入图片描述

感谢 b 站up主仵航提供的讲解教程

前端练习案例001

index.html页面

css样式

服务部署

悦读