学号后四位:(必填)0231
邀请人ID:(非必填)
项目名称及描述
名称:登录界面
制作登录界面。该项目会运用到html和css的相关知识。
HTML部分
登录界面的HTML部分
<body> <form> <div class="user"> <input type="text" name="name" placeholder="用户名" /> <input type="password" name="password" placeholder="密码" /> </div> <div class="footer"> <div></div> <input type="submit" name="submit" value="登录" class="btn" /> <input type="submit" name="submit" value="注册" class="btn" formaction="注册表.html"/> </div> </form> </body>
html部分用form创建供用户输入的HTML表单,实现用户信息采集,用input创建输入框实现文本输入,密码输入框采用password文本框实现密码会显示为字符*,将type的值设置为submit,submit是按钮,它是button的一个特例,它把提交这个动作自动集成了。
CSS部分
body{ background: url(img/3.jpg) no-repeat center fixed; background-size: cover; padding-top:20px ; } form { width: 343px; height: 200px; margin: 0 auto; border: 1px solid rgba(0, 0, 0, 1); border-radius: 5px; overflow: hidden; text-align: center; } input { width: 300px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; margin-bottom: 10px; } .user{ padding-top: 40px; } .footer input { width: 50px; height: 34px; } input[type=submit]{ cursor: pointer; } input:focus{ background-color: rgba(0, 0, 0, 0.2); overflow: hidden; } .btn{ border-radius: 6px; } .btn:hover{ border-radius: rgba(0, 0, 0, 0.2); }
css代码较长,但直观,比较容易理解。对HTML的各个部分进行布局设计与美化,以body部分和form部分为例:body部分用background设置背景图片,padding-top设置上边距;form部分width和height设置宽高;margin: 0 auto设置from的上下间距为0,左右主动;border设置边框属性;text-align设置文本居中。