Html 格式化登录屏幕

我是HTML和CSS的新手。我也知道这是一个非常基本的问题。我正在尝试创建一个登录前端。我正在使用的代码如下所示。代码只使用HTML和css编写

形式{
边框：6px实心#f1f1；
}
输入[类型=文本]{
宽度：100%；
填充：12px 12px；
利润率：16px0；
显示：内联块；
边框：2个实心#ccc；
框大小：边框框；
}
输入[类型=密码]{
宽度：100%；
填充：12px 12px；
利润率：16px0；
显示：内联块；
边框：2个实心#ccc；
框大小：边框框；
}
钮扣{
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
光标：指针；
宽度：10%；
}
按钮：悬停{
不透明度：0.8；
}
.取消{
宽度：自动；
填充：10px 18px；
背景色：#f44336；
}
.imgcontainer{
文本对齐：居中；
保证金：12px40px12px0；
}
.集装箱{
填充：20px；
}
span.psw{
浮动：对；
填充顶部：16px；
}
库存更新界面登录
用户名
密码
登录

添加此CSS

.container{
  max-width:600px;
  border: 6px solid #f1f1f1;
  margin:0 auto;
}

form{}
.集装箱{
最大宽度：600px；
边框：6px实心#f1f1；
保证金：0自动；
}
输入[类型=文本]{
宽度：100%；
填充：12px 12px；
利润率：16px0；
显示：内联块；
边框：2个实心#ccc；
框大小：边框框；
}
输入[类型=密码]{
宽度：100%；
填充：12px 12px；
利润率：16px0；
显示：内联块；
边框：2个实心#ccc；
框大小：边框框；
}
钮扣{
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
光标：指针；
宽度：10%；
}
按钮：悬停{
不透明度：0.8；
}
.取消{
宽度：自动；
填充：10px 18px；
背景色：#f44336；
}
.imgcontainer{
文本对齐：居中；
保证金：12px40px12px0；
}
.集装箱{
填充：20px；
}
span.psw{
浮动：对；
填充顶部：16px；
}

库存更新界面登录
用户名
密码
登录

试试这个
形式{
边框：6px实心#f1f1；
}
输入[类型=文本]{
宽度：100%；
填充：8px 8px；
利润率：16px0；
显示：内联块；
边框：2个实心#ccc；
框大小：边框框；
}
输入[类型=密码]{
宽度：100%；
填充：8px 8px；
利润率：16px0；
显示：内联块；
边框：2个实心#ccc；
框大小：边框框；
}
钮扣{
背景色：#4CAF50；
颜色：白色；
填充：15px 35px 15px；
利润率：8px0；
边界：无；
光标：指针；
宽度：10%；
文本对齐：居中；
垂直对齐：中间对齐；
}
按钮：悬停{
不透明度：0.8；
}
.取消{
宽度：自动；
填充：10px 18px；
背景色：#f44336；
}
.imgcontainer{
文本对齐：居中；
保证金：12px40px12px0；
}
.集装箱{
填充：20px；
左边缘：25%；
右边距：25%；
span.psw{
浮动：对；
填充顶部：16px；
}

@nishant kumar格式化中的一部分我只是想问一下，出于学习的目的，为什么给“按钮”加上“宽度：10%”？ 建议：你可以考虑使用“最小宽度：XPX”。

TRY THIS 


<style>
        form {
            border: 6px solid #f1f1f1;
        }

        input[type=text]{
            width: 100%;
            padding: 8px 8px;
            margin: 16px 0;
            display: inline-block;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }

        input[type=password] {
                width: 100%;
                padding: 8px 8px;
                margin: 16px 0;
                display: inline-block;
                border: 2px solid #ccc;
                box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 15px 35px 15px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 10%;
            text-align: center;
            vertical-align: middle;
        }

        button:hover {
            opacity: 0.8;
        }

        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }

        .imgcontainer {
            text-align: center;
            margin: 12px 40px 12px 0;
        }

        .container {
            padding: 20px;
            margin-left: 25%;
            margin-right: 25%;

        span.psw {
            float: right;
            padding-top: 16px;
        }

    </style>