fa fa-angle-right-CSDN博客

本文链接：https://blog.csdn.net/qq_43411265/article/details/130205851

该文展示了一个使用HTML、CSS和Vue.js（Element-UI库）创建的登录页面示例。页面包含背景图片、自定义样式、用户名和密码输入框以及登录按钮。Vue实例用于管理数据和交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fa fa-angle-right

这个是>的意思

做页面的

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
    body{
        /*background-image: url("imgs/bg.jpg");*/
        /*背景图片的路径*/
        background-image: url("imgs/bg.jpg");
        /*背景图片的封面*/
        background-size: cover;
    }
    h1{
        /*字体*/
        font-size: 72px;
        /*颜色*/
        color: #0096dc;
        /*外边距*/
        /*margin-bottom: 0;*/
    }



</style>
<body>
<div id="app">
<!--    商城标题-->
 <h1>欢迎来到酷鲨商城</h1>
<!--    设置图片-->
    <img src="imgs/shark.png" alt="">
<!--    商城-->
    <h2>CoolSharkMall</h2>
    <el-card style="width: 600px;height: 300px;
    background-color: rgba(255,255,255,0.3);margin: 0 auto;">
        <el-form style="width: 400px;margin: 50px auto;" label-width="60px">
<!--            这一段的功能是文本框-->
            <el-form-item label="用户名">
<!--                Input 为受控组件，它总会显示 Vue 绑定值。-->

<!--                通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。-->

<!--                不支持 v-model 修饰符。-->
<!--                -->
                <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
<!--            密码-->
            <el-form-item label="密码">
                <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="position: relative;right: 27px" type="primary">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<!--框架版本问题，改为2.6.14-->
<!--&lt;!&ndash; import Vue before Element &ndash;&gt;先引入vue 这句必须在上面，因为下面的一定在上面-->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
          // 把user数组中的姓名和密码放入其中
       user:{username:"",password:""}
      }
    },
   methods:{


   }
  })
</script>
</html>

margin-bottom 0的作用:就是使得文字h1与下面的图片连接紧密