Vue登陆框界面布局(详解) Vue登陆框界面布局<div class="zheng"> <h3 class="h333">罗小黑登录框</h3> <input type="text" style="height: 25px; width: 180px; text-align: center" class="fang1" placeholder="用户名" /> <br> <br> <input type="text" style="height: 25px; width: 180px;text-align: center" class="fang2" placeholder="密码"/> <br> <br> <button class="log" style="width: 90px ">登录</button> <button class="forget">忘记密码</button> </div><script> export default { name: 'HelloWorld', data(){ return{ } } } </script><style scoped> .zheng { padding: 106px 120px; background-color: white; position: absolute; top: 282px; left: 742px; } .forget{ position: relative; left: 40px; background-color: cornflowerblue; font-size: 13pt; } .log{ background-color: cornflowerblue; font-size: 13pt; } .fang1{ border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; } .fang2{ border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; } border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; 设置文本框四个角的弧度font-size: 13pt;设置按钮的尺寸大小 background-color: cornflowerblue; 设置按钮的背景颜色 left: 742px; 距离网页最左边距离 padding: 106px 120px;设置整个登录框的长和宽的大小为106像素和120像素 position: relative;相对定位 position: absolute;绝对定位 background-color: white;设置登录界面背景颜色为白色text-align:center 使文本框里的文字居中显示 placeholder="用户名" 使文本框中默认显示的初始值是“用户名” placeholder="密码" 使文本框中默认显示的初始值是“密码” height: 25px; 设置文本框的高25像素 width: 180px; 设置文本框的长度（宽度）180像素