HTML前端基础

最新推荐文章于 2024-01-02 20:43:33 发布
最新推荐文章于 2024-01-02 20:43:33 发布
阅读量285 收藏 1
点赞数 1
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CYBwave/article/details/127755279
版权

CRM管理系统(初版)_html页面

一,准备工作

基本工具

软件 : IDEA
添加依赖 : bootstrap , jquery , Vue

二,前端开发

1.登录页面 (Login.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--    导入Vue文件-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body style="background-image: url(picture/4.gif);background-size: cover">
    <label style="font-weight: lighter;font-size: 30px;color: white;margin-top: 20px;margin-left: 650px;opacity: 0.5;">CRM管理系统</label>
    <div class="container" id="app">
      <div class="row" style="margin-top: 100px;">

        <div class="col-md-6 col-md-offset-3" style="box-shadow: 5px 3px 8px ">
          <div class="row">
            <div class="col-md-6" style="color: white;font-weight: lighter;font-size: 50px;text-align: center;line-height: 300px;height: 350px;background-image: url(picture/6.png);background-size: cover;">
              <i style="opacity: 0.8;">Spring</i>
            </div>

            <div class="col-md-6" style="height: 350px;background-color: rgb(253, 248, 241);">
              <div class="row">
                <div class="col-md-12" style="text-align: center;font-size: 20px;font-weight: lighter;margin-top: 40px">
                  LOGIN
                </div>
              </div>
              <div class="row">
                <div class="col-md-8 col-md-offset-2" style="border: 0;width: 250px;height: 40px;margin-left: 20px;margin-top: 40px">
                  <input type="text" placeholder="user" class="form-control" v-model="userName"/>
                </div>
              </div>
              <div class="row">
                <div class="col-md-8 col-md-offset-2" style="border: 0;width: 250px;height: 40px;margin-left: 20px;margin-top: 40px">
                  <input type="password" placeholder="password" class="form-control" v-model="passwd"/>
                </div>
              </div>
              <div class="row">
                <div class="col-md-8 col-md-offset-2" >
                    <button class="btn btn-link" style="margin-top: 20px;border: 0" @click="doLogin">LOGIN</button>
                    <button class="btn btn-link" style="margin-top: 20px;border: 0" @click="doReset">RESET</button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <script>
        //创建vue
        new Vue({
            el:'#app',//讲id=app的div的管理权交给vue
            data:{ //需要绑定的数据
                userName:null,//用户名
                passwd:null//密码
            },
            methods:{
                doLogin(){
                    //通过this.可以获得data中绑定的数据
                    if(this.userName == 'admin' && this.passwd == '123'){
                        window.location.href = 'index.html';//跳转到主页
                    }else{
                        alert("用户名或密码错误");
                    }
                },
                doReset(){
                    this.userName=null
                    this.passwd=null
                },
            },

            create:function () { //页面加载完成后执行

            }
        });
    </script>
</body>
</html>
页面效果

在这里插入图片描述

基本思路
1.1 导包

在head中导入所需依赖 (bootstrap,jquery,Vue,axios)

1.2 划分

2.进入主页 (index)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
   <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--    导入Vue文件-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
    <style>
        a:link{font-size: 20px;color: #afd9ee;}
        a:visited{font-size: 20px;color: rgb(109,109,109)}
        a:hover{font-size: 20px;color: white;text-decoration: none;}
    </style>
</head>
<body>
    <div class="container" id="app">
      <div class="row">
        <!-- 显示导航 -->
        <div class="col-md-3" style="height: 800px;background-image: url(picture/2.png);">
          <!-- bootstrap -->
          <div class="row">
            <div class="col-md-12" style="background-color: rgb(0,0,0,0.5);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;">

                CRM管理系统
            </div>
          </div>
          <div class="row">
            <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
                <a href="index.html">进入页面</a>
            </div>
          </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
                    <a href="user_add.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
                    <a href="#">客户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
                    <a href="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
                    <a href="password_update.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
                    <a href="Login.html">退出登录</a>
                </div>
            </div>

        </div>
        <!-- 显示内容 -->
        <div class="col-md-9" style="border: 1px solid gray;height: 800px">
          <div class="row">
              <!-- 显示提示位置 -->
              <div class="col-md-12" style="height: 70px;color: rgb(109,109,109);font-size: 18px;line-height: 70px;">
                > &nbsp;&nbsp;首页
              </div>

          </div>
          <div class="row">
              <!-- 内容 -->
              <div class="col-md-12" style="background-color: rgb(240,242,245);height: 730px;padding: 20px">
                <img src="assets/img/index.png" class="img-responsive center-block"/>
              </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
页面效果

在这里插入图片描述

3.用户管理 (user_list.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
  <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <!--    导入Vue文件-->
  <script src="assets/vue.min-v2.5.16.js"></script>
  <script src="assets/axios.min.js"></script>
  <style>
    a:link{font-size: 20px;color: white;}
    a:visited{font-size: 20px;color: rgb(109,109,109)}
    a:hover{font-size: 20px;color: #afd9ee;text-decoration: none;}
  </style>
</head>
<body>
<div class="container" id="app">
  <div class="row">
    <!-- 显示导航 -->
    <div class="col-md-3" style="height: 800px;background-image: url(picture/2.png);">
      <!-- bootstrap -->
      <div class="row">
        <div class="col-md-12" style="background-color: rgb(0,0,0,0.5);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;">

          CRM管理系统
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="index.html">进入页面</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="user_list.html">用户管理</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="user_add.html">添加用户</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="#">客户管理</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="#">添加客户</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="password_update.html">修改密码</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="Login.html">退出登录</a>
        </div>
      </div>

    </div>
    <!-- 显示内容 -->
    <div class="col-md-9" style="border: 1px solid gray;height: 800px">
      <div class="row">
        <!-- 显示提示位置 -->
        <div class="col-md-12" style="height: 70px;color: rgb(109,109,109);font-size: 18px;line-height: 70px;">
          > &nbsp;&nbsp;用户管理
        </div>
      </div>

      <div class="row" style="background-color: rgb(240,242,245);height: 730px;padding: 20px">
        <!-- 内容 -->
        <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
          <table class="table table-striped" style="margin-top: 20px">
            <!-- 表格描述 -->
            <caption>用户管理-用户列表</caption>
            <!-- 表头 -->
            <thead>
            <tr>
              <th>ID</th>
              <th>用户名</th>
              <th>昵称</th>
              <th>性别</th>
              <th>生日</th>
              <th>手机号</th>
              <th>操作</th>
            </tr>
            </thead>
            <!-- 内容 -->
            <tbody>
            <tr>
              <td>1001</td>
              <td>zs</td>
              <td>张三</td>
              <td>男</td>
              <td>2000-02-07</td>
              <td>13333333333</td>
              <td>
                <button class="btn btn-link">修改</button>
                <button class="btn btn-link">删除</button>
              </td>
            </tr>
            <tr>
              <td>1001</td>
              <td>zs</td>
              <td>张三</td>
              <td>男</td>
              <td>2000-02-07</td>
              <td>13333333333</td>
              <td>
                <button class="btn btn-link">修改</button>
                <button class="btn btn-link">删除</button>
              </td>
            </tr>
            <tr>
              <td>1001</td>
              <td>zs</td>
              <td>张三</td>
              <td>男</td>
              <td>2000-02-07</td>
              <td>13333333333</td>
              <td>
                <button class="btn btn-link">修改</button>
                <button class="btn btn-link">删除</button>
              </td>
            </tr>
            <tr>
              <td>1001</td>
              <td>zs</td>
              <td>张三</td>
              <td>男</td>
              <td>2000-02-07</td>
              <td>13333333333</td>
              <td>
                <button class="btn btn-link">修改</button>
                <button class="btn btn-link">删除</button>
              </td>
            </tr>
            <tr>
              <td>1001</td>
              <td>zs</td>
              <td>张三</td>
              <td>男</td>
              <td>2000-02-07</td>
              <td>13333333333</td>
              <td>
                <button class="btn btn-link">修改</button>
                <button class="btn btn-link">删除</button>
              </td>
            </tr>
            <tr>
              <td>1001</td>
              <td>zs</td>
              <td>张三</td>
              <td>男</td>
              <td>2000-02-07</td>
              <td>13333333333</td>
              <td>
                <button class="btn btn-link">修改</button>
                <button class="btn btn-link">删除</button>
              </td>
            </tr>
            <tr>
              <td>1001</td>
              <td>zs</td>
              <td>张三</td>
              <td>男</td>
              <td>2000-02-07</td>
              <td>13333333333</td>
              <td>
                <button class="btn btn-link">修改</button>
                <button class="btn btn-link">删除</button>
              </td>
            </tr>
            </tbody>

          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
页面效果

在这里插入图片描述

4.添加用户 (user_add.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加用户</title>
  <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
  <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <!--    导入Vue文件-->
  <script src="assets/vue.min-v2.5.16.js"></script>
  <script src="assets/axios.min.js"></script>
  <style>
    a:link{font-size: 20px;color: white;}
    a:visited{font-size: 20px;color: rgb(109,109,109)}
    a:hover{font-size: 20px;color: #afd9ee;text-decoration: none;}
  </style>
</head>
<body>
<div class="container" id="app">
  <div class="row">
    <!-- 显示导航 -->
    <div class="col-md-3" style="height: 800px;background-image: url(picture/2.png);">
      <!-- bootstrap -->
      <div class="row">
        <div class="col-md-12" style="background-color: rgb(0,0,0,0.5);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;">

          CRM管理系统
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="index.html">进入页面</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="user_list.html">用户管理</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="user_add.html">添加用户</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="#">客户管理</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="#">添加客户</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="password_update.html">修改密码</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="Login.html">退出登录</a>
        </div>
      </div>

    </div>
    <!-- 显示内容 -->
    <div class="col-md-9" style="border: 1px solid gray;height: 800px">
      <div class="row">
        <!-- 显示提示位置 -->
        <div class="col-md-12" style="height: 70px;color: rgb(109,109,109);font-size: 18px;line-height: 70px;">
          > &nbsp;&nbsp;添加用户
        </div>

      </div>
      <div class="row" style="background-color: rgb(240,242,245);height: 730px;padding: 20px">
        <!-- 内容 -->
        <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
              <label>用户名</label>
              <input type="text" class="form-control"/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
              <label>昵称</label>
              <input type="text" class="form-control"/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
              <label>手机号</label>
              <input type="text" class="form-control"/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
              <label>生日</label>
              <input type="text" class="form-control"/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
              <label style="margin-right: 15px">性别</label>
              <label class="radio-inline">
                <input type="radio" name="sex"/>男
              </label>
              <label class="radio-inline">
                <input type="radio" name="sex"/>女
              </label>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center">
              <button class="btn btn-primary" style="margin-right: 8px">添加</button>
              <button class="btn btn-default">重置</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
页面效果

在这里插入图片描述

5.修改密码 (password_update.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>修改密码</title>
  <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
  <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <!--    导入Vue文件-->
  <script src="assets/vue.min-v2.5.16.js"></script>
  <script src="assets/axios.min.js"></script>
  <style>
    a:link{font-size: 20px;color: white;}
    a:visited{font-size: 20px;color: rgb(109,109,109)}
    a:hover{font-size: 20px;color: #afd9ee;text-decoration: none;}
  </style>
</head>
<body>
<div class="container" id="app">
  <div class="row">
    <!-- 显示导航 -->
    <div class="col-md-3" style="height: 800px;background-image: url(picture/2.png);">
      <!-- bootstrap -->
      <div class="row">
        <div class="col-md-12" style="background-color: rgb(0,0,0,0.5);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;">

          CRM管理系统
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="index.html">进入页面</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="user_list.html">用户管理</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="user_add.html">添加用户</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="#">客户管理</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="#">添加客户</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="password_update.html">修改密码</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="text-align: center;padding: 20px 0 20px 0">
          <a href="Login.html">退出登录</a>
        </div>
      </div>

    </div>
    <!-- 显示内容 -->
    <div class="col-md-9" style="border: 1px solid gray;height: 800px">
      <div class="row">
        <!-- 显示提示位置 -->
        <div class="col-md-12" style="height: 70px;color: rgb(109,109,109);font-size: 18px;line-height: 70px;">
          > &nbsp;&nbsp;修改密码
        </div>

      </div>
      <div class="row" style="background-color: rgb(240,242,245);height: 730px;padding: 20px">
        <!-- 内容 -->
        <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
              <label>当前密码</label>
              <input type="password" class="form-control"/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
              <label>确认密码</label>
              <input type="password" class="form-control"/>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center">
              <input type="submit" value="修改" class="btn btn-primary" style="margin-right: 8px"/>
              <button class="btn btn-default">重置</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
页面效果

在这里插入图片描述

枫斩冰桦
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端基础入门html技术
11-18
前端入门提供给刚入刚的小伙伴们免费学习
前端HTML5 css基础
03-09
前端HTML5 css基础
前端基础的学习html+css.zip
01-05
前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习htm
html前端基础代码
09-21
html前端基础代码
web前端 HTML基础
09-06
HTML基础小结 适用刚开始接触前端的小伙伴 大佬勿喷
【开发规范】前端开发中引用文件的方式
zx1041561837的博客
12-01 347
本文介绍前端开发时，引入文件、资源、组件的两种方式，主要为别名引用和相对路径引用。
前端引入外部 js文件
前端学习笔记
03-31 4620
这是最简单的方法，不过想来不是你想要的方法，因为这种方法在项目加载时就会引入，你可能需要在不同环境下判断是否需要引入，比如微信中引入，钉钉中不引入等。所以还有其它方法来引入。只能引入静态文件，外部文件是无法引入的。不过你可以将文件下载下来引入，这也是一种解决办法。你可以在引入前添加判断条件，来决定是否要引入。文件，专门用来写这类内容。
【前端理论】前端文件引入、JS模块化导入导出
zhangankang的博客
07-20 1480
一、文件引入 引入js文件： （在.html文件中） <script src=""></script> （在.js文件中==模块化的导入（需要底层支持）） var { a , b } = require('../aa.js');//CommenJS语法 import { a,b } from "./aaa.js";//ES6语法 const Home = ()=>import('../components/Home.vue');//ES6语法组件懒加载 引入
在html中引入jQuery包的方法
梁同学与Android
12-12 4372
建议直接使用在线前端库，有免费的CDN加速，加载jQuery会更快
IDEA导入Web项目的三种方式
qq_45344586的博客
06-26 1万+
超详细IDEA导入Web项目的三种方式
springboot集成html-vue
rain_1470626的博客
03-27 354
springboot集成html-vue
【HTML + CSS】字体图标
Whoopsina的博客
04-02 846
推荐网站： icommon字库: http://icommoon.io 阿里icon font字库： http://www.iconfont.cn/
如何创建一个vue项目
pukun888的博客
07-23 178
环境配置： node.js (javascript运行环境，如果是学过java的，你可以理解为jvm) npm (导包工具，顾名思义就是导入前端js和css，你可以理解为maven导包功能的实现) vue-cli （创建vue项目的构建工具，你可以理解为maven创建maven项目功能的实现） webpack (打包工具，你可以理解为maven打包项目功能的实现，由它打包到node.js运行) 其中 npm 由node.js内置了，而webpack由vue-cli内置了，所以你只需要安装node.js和
html中引入字体包
weixin_42400404的博客
05-10 1万+
1：下载字体包 之前在http://www.downyi.com/downinfo/181562.html 网站中下载过字体包。有的情况下会有附带插件。 2：字体包放在项目中 字体包存在项目文件中 3：新建font.css文件，在里面写入以下代码 @font-face { font-family: "HYLeMiaoTi"; //自定义字体名称 src:url("HYLeMiaoTiJ.ttf"); //字体包路径 font-wei.
如何通过IDEA导入并启动前端项目
热门推荐
我能在河边钓一整天的鱼
02-03 2万+
目录 搭建后台管理前端 1.解压前端压缩包 2.使用IDEA导如这个前端项目 3.安装依赖 4.启动项目 项目结构说明 搭建后台管理前端 1.解压前端压缩包 解压到和后端同一个目录下 2.使用IDEA导如这个前端项目 效果如下 3.安装依赖 按alt+F12打开终端，输入npm install 下图显示即代表...
项目引入Jar包的几种方式
shg的博客
01-02 1685
项目中如何引入外部jar包，即外部jar包不能通过maven坐标的方式引入时，如何把一个外部jar包引入到项目中。有哪几种方式
html这样加载安装包,新手快速上手webpack4打包工具的使用详解
weixin_39735005的博客
06-10 390
一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高一、几个盲点的解释1、全局安装与局部安装对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更...
HTML文件中导入list包,classlist-List,class
weixin_33316051的博客
06-26 643
本教程分享：《classlist》如何用javascript为元素添加class现代浏览器写法：document.getElementById('test').classList.add('myClass');兼容写法：document.getElementById('test').className += ' myClass';classlist这个api提供了什么css类属性方法add( St...
2.vue的基本使用（在.html文件中使用）
XGM__的博客
12-29 1575
1、在.html文件中导入vue.js文件 2、在页面中用标签包裹想要使用vue控制的DOM区域，div标签需要有类名选择器或者id选择器，以便vue实例中的el选中 3、new Vue()创建vue实例对象，需要用变量去接收（得到的实例对象即是ViewModel） 3.1、el属性：指定当前实例要控制的区域（属性值：字符串） 3.2、data属性：指定Model数据源（属性值：对象（数据源：键值对））
web前端基础练习题
最新发布
02-28
以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值