Heim > Artikel > Web-Frontend > sunny day_html/css_WEB-ITnose
sunny day_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:35:04905Durchsuche
初始学习记录 基于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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html总结看这个就够了_html/css_WEB-ITnoseNächster Artikel：html中charset和content-language的区别_html/css_WEB-ITnose