HTML登录页面透明样式

发布时间：2024年01月12日

html

?

<body>
? <form>
? ? ? ? <h4 style="text-align:center">登录中心</h4>
? ? ? ? <hr />
? ? ? ? <br />
? ? ? ? <div class="row mb-5">
? ? ? ? ? ? <label class="col-sm-2 col-form-label">名称：</label>
? ? ? ? ? ? <div class="col-sm-10">
? ? ? ? ? ? ? ? <input class="form-control" type="text">
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="row mb-5">
? ? ? ? ? ? <label class="col-sm-2 col-form-label">密码：</label>
? ? ? ? ? ? <div class="col-sm-10">
? ? ? ? ? ? ? ? <input class="form-control" type="text">
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="row">
? ? ? ? ? ? <input ?type="submit" value="登录" class="btn btn-success"style="width: 200px; height: 35px; margin: auto; background-color: #3864b1;" />
? ? ? ? </div>

? ? ? ? <div class="row">
? ? ? ? ? ? <a style="text-align:right;" href="/Login/Register">注册用户</a>
? ? ? ? </div>

? ? </form>
</body>

style样式?

body {
? ? ? ? height: 100%;
? ? ? ? background-image: url("/Content/img/bg1.jpg");
? ? ? ? background-size: cover;
? ? ? ? background-repeat: no-repeat;
? ? ? ? position: relative;
? ? }
? ? form {
? ? ? ? border-radius: 8px;//圆角
? ? ? ? width: 465px;
? ? ? ? height: 400px;
? ? ? ? position: absolute;
? ? ? ? padding:25px;
? ? ? ? top: 30%;
? ? ? ? bottom: 30%;
? ? ? ? left: 40%;
? ? ? ? background: rgb(128, 128, 128,.2);
? ? ? ? ?/*背景颜色灰色，透明度为0.8*/
? ? ? ? box-sizing:border-box;
? ? ? ? /*box-sizing设置盒子模型的解析模式为怪异盒模型，24 ? ? 将border和padding划归到width范围内*/
? ? ? ? ?box-shadow: 0px 15px 25px rgba(0,0,0,.5);
? ? ? ? ?/*边框阴影 ?水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
? ? }

文章来源:https://blog.csdn.net/weiwei_y/article/details/135546637
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章