实例
用今天所学的知识,包裹背景,边框,表单,制作一个简单的登录页
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面</title> <!-- <link rel="icon" type="image/x-icon" href=""> --> <style type="text/css"> *{margin: 0;padding: 0;} body{ background: #151517; } div{ width: 400px; height: 350px; margin: 200px auto; background: rgba(188,185,198,0.4); border-radius: 10px; text-align: center; } img{ width: 80px; border-radius: 50%; margin-top: 50px; } input{ width: 300px; height:30px; margin-top: 15px; border-radius: 6px; border: none;/*去掉元素自带边框*/ padding-left: 15px; } button{ border: none; width: 200px; height: 35px; border-radius: 6px; background: #151517; color: #fff; margin-top: 30px; } </style> </head> <body> <div> <img src="http://img4.duitang.com/uploads/item/201412/24/20141224224554_SuYth.thumb.700_0.jpeg"> <form action="" method=""> <input type="text" name="" placeholder="请输入用户名...."><br> <input type="password" name="" placeholder="请输入密码...."><br> <button>登录</button> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例