一个简单的登陆界面
2015-09-27 18:58
537 查看
用html+css做了一个登陆界面
效果图:
html代码:
css代码:
效果图:
html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> </head> <body> <form action="checked,jsp" method="get"> <p><span>U</span>SERNAME</p> <input type="text" name="username" placeholder="输入用户名" required> <p><span>P</span>ASSWORD</p> <input type="password" name="psw" placeholder="输入密码" required> <p id="rec"><input class="receive" type="submit" name="submit" value="登入"><input class="receive" type="reset"><input class="receive" type="button" name="reighter" value="注册"> </p> </form> </body> </html>
css代码:
html { background-color: #e6e9e9; background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); -webkit-font-smoothing: antialiased; } *{margin: 0px;padding: 0px;} body { margin: 0 auto; padding: 2em 2em 4em; max-width: 800px; height: 900px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; color: #545454; background-color: #ffffff; background-image: url(1.jpg); background-repeat: no-repeat; } p { color:rgb(93, 190, 206); margin: 5px 0px 0px 0px; } form { background-color:rgba(62, 62, 62, 0.75); width: 180px; height: 160px; padding: 5px 10px; float: right; border-radius: 8px; box-shadow: 20px 20px 20px #888888; } span { font-size: 28px; } input { width: 13em; height: 1.2em; padding: 2px; } .receive { width:3.7em; height: 1.5em; margin-right: 10px; background-color: rgb(88, 88, 88); color: white; border: 0px; } #rec { background-color: rgb(88, 88, 88); margin-top: 10px; padding: 1px; border-radius: 5px; }
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码
- HTML <!DOCTYPE> 标签
- asp中实现清除html的函数
- Android的TextView与Html相结合的具体方法
- jQuery设置和获取HTML、文本和值示例
- 『jQuery』.html(),.text()和.val()的概述及使用
- winform异型不规则界面设计的实现方法
- php正则替换处理HTML页面的方法