用户登录界面小实例

来源：互联网发布：淘宝3元优惠券图片编辑：程序博客网时间：2024/04/30 08:29

最近大家都说应该有自己的博客，以后会是加分项，不知道该怎么写，系统的把学前端的代码慢慢往上贴吧，以后尽量常更。

初学html5时的写的小实例，把一些能看过眼的放上来。

第一次开始用CSDN写博客，编辑器很厉害的样子。

这是一个用户注册界面，主要是为了把一些最基础的东西一起拿出来练练手。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>用户注册</title><style type="text/css">form{width: 400px;background: #9370D8;padding: 10px;margin-top: 150px;margin-left: 500px}button{background: #808080;padding: 8px;border-radius:5px;}input{padding: 8px;background: #f8f8f8}input:focus{padding: 8px;background: #FFC0CB}button:hover{padding: 10px;background: #2F4F4F}</style></head><body><form><fieldset><legend>用户注册</legend><p><label> 帐号：<input type="text" name="user" id="user" placeholder="帐号" required></label></p><p><label>密码：<input type="password" name="password" id="password" placeholder="密码"></label></p><p><label>电话号码:<input type="tel" name="tel" id="tel" placeholder="电话号码"></label></p><p><label>电子邮箱：<input type="email" name="email" id="email" placeholder="电子邮箱"></label></p><!-- <input type="submit" value="注册"> --><button type="submit">注册用户</button></fieldset></form></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>综合实例</title><style type="text/css">form{width: 400px;background: #9370D8;padding: 10px;margin-top: 150px;margin-left: 500px}button{background: #808080;padding: 8px;border-radius:5px;}input{padding: 8px;background: #f8f8f8}input:focus{padding: 8px;background: #FFC0CB}button:hover{padding: 10px;background: #2F4F4F}</style></head><body><form><fieldset><legend>用户注册</legend><p><label> 帐号：<input type="text" name="user" id="user" placeholder="帐号" required></label></p><p><label>密码：<input type="password" name="password" id="password" placeholder="密码"></label></p><p><label>电话号码:<input type="tel" name="tel" id="tel" placeholder="电话号码"></label></p><p><label>电子邮箱：<input type="email" name="email" id="email" placeholder="电子邮箱"></label></p><!-- <input type="submit" value="注册"> --><button type="submit">注册用户</button></fieldset></form></body></html>

0 0