Home > Article > Web Front-end > sunny day_html/css_WEB-ITnose
sunny day_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:35:04884browse
初始学习记录 基于http://www.htmleaf.com/html5/html5muban/20141121552.html模板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style>button{ background: #686868; border: 30px solid #c6c6c6; /*solid边框30px*/ border-radius: 80%;/*圆角边框*/ cursor: pointer; /*光标样式*/ width: 85px; height: 85px; position: absolute;/*位置*/ right:900px; top: 200px; }button:hover{ background: #c6c6c6; border-color:#686868 ;}</style></head><body><div><button type="submit"></body>
<!DOCTYPE html><html class=''><head><meta charset='UTF-8'><title>登录界面</title> <style>* /*内外边距*/ { margin:0px; padding:0px; } /*body*/ body{ background:url('245.jpg'); position:relative; padding:150px; font-family:verdana; } /*登录窗口主体*/ #loginform { width:210px; height:auto; position:relative; margin:0 auto; } input { display:block; margin:0px auto 15px; border-radius:5px; background: #c6c6c6; width:85%; padding:12px 20px 12px 10px; border: none; color:#686868; box-shdow:inset 0px 1px 5px #000000; font-size:0.85em; } button { background: #c6c6c6; border-radius:80%; border:30px solid #686868; cursor:pointer; width: 85px; height:85px; position:absolute; right: -42px; top:54px; } button:hover { background: #686868; border-color:#c6c6c6; } h1 { text-align:center; color:#c6c6c6; font-size:15px; padding:10px 0px; } /*注册和忘记密码效果设置*/ #note { color:#88887a; font-size: 0.8em; text-align:left; padding-left:5px; } a { color:#88887a; text-decoration:none; } a:hover { color:#39F; margin-left:1px; } /*登录窗口主体背景*/ #mainlogin { float:center; width:250px; height:170px; padding:15px 15px; position:relative; background:#686868; border-radius:7px; opacity:0.9; } </style></head><body><div id="loginform"> <div id="mainlogin"> <h1>欢迎登录</h1> <form action=""> <input type="text" placeholder="邮箱/手机/账户" value="" required> <input type="password" placeholder="输入密码" value="" required> <button type="submit" required></button> </form> <div id="note"><a href="">注册</a> <a href="">忘记密码</a></div> </div> </div></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html总结看这个就够了_html/css_WEB-ITnoseNext article：html中charset和content-language的区别_html/css_WEB-ITnose