Heim >Web-Frontend >HTML-Tutorial >html+css 这种登陆效果怎么做成的，把邮箱放到text框里面，但又不影响输入_html/css_WEB-ITnose
html+css 这种登陆效果怎么做成的，把邮箱放到text框里面，但又不影响输入_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:17:191389Durchsuche
回复讨论(解决方案)
你检查一下就知道了，实际上文本框还是和“账号”这些文字分开的，只是看起来在一起，等下帮你写个demo吧。
<!DOCTYPE html><html><head> <title>demo</title> <script type="text/javascript" src="http://seventh77.com/view/publicjs/jquery-2.1.4.min.js"></script> <meta charset="utf-8"> <style> .input{ background-color: white; cursor: auto; padding: 1px 0px; border: 1px solid #aaa; display: inline-block; text-align: start; margin: 0em 0em 0em 0em; font: 13.3333px Arial; } .input input{ border: none; outline-style:none; } </style></head><body> <div class="input">账号：<input></div></body></html> 同意楼上观点
label for input
CSS部分
input{outline: none; border: 0;}.form-box{font-size: 12px; color: #000;}.form-section{position: relative; margin-bottom: 5px;}.form-section label{ position: absolute; width: 30px; left: 0; height: 30px; line-height: 30px; padding:0 5px; font-family: 'Microsoft Yahei'; font-weight: bold;}.form-section input{padding-left: 32px; height: 30px; width: 200px; border: 1px solid #ccc;}.submit-btn{ padding-right: 32px; color: #fff; background-color: #F33737; text-align: center; font-family: 'Microsoft Yahei'; font-weight: bold; cursor: pointer;} HTML部分
<div class="form-box"> <div class="form-section"> <label for="username">邮箱</label> <input type="text" name="username" placeholder='请输入邮箱'> </div> <div class="form-section"> <label for="password">密码</label> <input type="password" name="password" placeholder='请输入密码'> </div> <div class="form-section"> <input class='submit-btn' type="submit" value="登录"> </div></div>
懂了 实际上是不是去掉input的边框，然后用个div包起来加上个边框。
div内放个文字div和文本框 按百分比设置宽度
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML-网络编程(2)_html/css_WEB-ITnoseNächster Artikel：HTML-网页编程(1)_html/css_WEB-ITnose