千家信息网

Html登录页面的代码怎么写

发表于:2024-10-31 作者:千家信息网编辑
千家信息网最后更新 2024年10月31日,本篇内容介绍了"Html登录页面的代码怎么写"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果:ht
千家信息网最后更新 2024年10月31日Html登录页面的代码怎么写

本篇内容介绍了"Html登录页面的代码怎么写"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

效果:

html源码:

XML/HTML Code复制内容到剪贴板

  1.                 Login                

    Login

css代码:

CSS Code复制内容到剪贴板

  1. html{       width: 100%;       height: 100%;       overflow: hidden;       font-style: sans-serif;   }   body{       width: 100%;       height: 100%;       font-family: 'Open Sans',sans-serif;       margin: 0;       background-color: #4A374A;   }   #login{       position: absolute;       top: 50%;       left:50%;       margin: -150px 0 0 -150px;       width: 300px;       height: 300px;   }   #login h2{       color: #fff;       text-shadow:0 0 10px;       letter-spacing: 1px;       text-align: center;   }   h2{       font-size: 2em;       margin: 0.67em 0;   }   input{       width: 278px;       height: 18px;       margin-bottom: 10px;       outline: none;       padding: 10px;       font-size: 13px;       color: #fff;       text-shadow:1px 1px 1px;       border-top: 1px solid #312E3D;       border-left: 1px solid #312E3D;       border-right: 1px solid #312E3D;       border-bottom: 1px solid #56536A;       border-radius: 4px;       background-color: #2D2D3F;   }   .but{       width: 300px;       min-height: 20px;       display: block;       background-color: #4a77d4;       border: 1px solid #3762bc;       color: #fff;       padding: 9px 14px;       font-size: 15px;       line-height: normal;       border-radius: 5px;       margin: 0;   }

总结:

复制代码

代码如下:

 

placeholder="用户名"的作用:占位符

"Html登录页面的代码怎么写"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!

0