本篇文章主要介绍如何用css美化网站登录界面，需要的小伙伴参考下。
代码如下：
美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .content{ background-color:pink; position:absolute;/*绝对定位*/ top:50%; left:0; width:100%; height:400px; margin-top:-200px; overflow:hidden;/*隐藏滚动条*/ } .main{ text-align:center;/*文本居中*/ max-width:600px; height:400px; padding:100px 0px;/*上下80px,左右为0*/ /*background:yellow;*//*验证div的位置*/ margin:0 auto;/*设置上右下左,居中显示*/ } .main h1{ font-family:"楷体";/*设置字体*/ font-size:70px;/*设置字体大小*/ font-weight:2px;/*调整字体粗细*/ } form{ padding:20px 0; } form input{ border:1px solid white; display:block; margin:0px auto 10px auto;/*上 右 下 左*/ padding:10px; width:220px; border-radius:30px;/*H5设置圆角边框*/ font-size:18px; font-weight:300; text-align:center; } form input:hover{ background-color:pink; } form button{ background-color:yellow; border-radius:10px; border:0; height:30px; width:50px; padding:5px 10px; } form button:hover{ background-color:red; }Welcome
登录后复制
相关推荐：
用css美化html表单控件(表单美化)详细示例
立即学习“前端免费学习笔记（深入）”；
用css美化html表单控件(表单美化)详细示例
立即学习“前端免费学习笔记（深入）”；
用css美化html表单控件(表单美化)详细示例
立即学习“前端免费学习笔记（深入）”；
以上就是css登录界面美化的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2897561.html
