首页 > 代码库 > 登陆网页模板 - 1 （HTML+CSS）
登陆网页模板 - 1 （HTML+CSS）
一个用HTML和CSS写的简单登录页面，主要是用CSS来进行修饰美化的
这个登陆界面有输入账号和密码的表单，还有登陆和注册两个按键，点击按键分别会输出“您已成功登陆，稍后会跳转到您需要的页面~”，“您已成功注册，稍后会跳转到您需要的页面~”
PS：个人搭配略差，如果读者有什么好的搭配方案或者建议请不吝赐教，在此先谢过了~
<!DOCTYP html><html> <head> <meta charset="utf-8"> <title>我的一个道姑朋友</title> <style type="text/css"> body { background-image:url(1.jpg) ; background-size: 100%; } input { color:black; border:none; border-bottom:1px solid; width:230px; height:30px; background-color:pink; position:absolute; opacity:0.5; filter:Alpha(opacity=50); } h4 { position:absolute; left:20%; } #aa { width:400px; height:405px; background-repeat:no-repeat; background-image:url(2.jpg) ; position:absolute; top:10%; left:35%; } #bb { width:100%; height:40%; background-color:pink; position:relative; top:70%; opacity:0.5; filter:Alpha(opacity=50); } #cc { position:absolute; background-image:url(3.jpg) ; top:10%; left:10%; width:100px; height:100px; background-size: 100%; } #dd { position:absolute; top:90%; left:41%; } #yu { color:DarkOrchid; position:absolute; top:20%; left:30%; font-size:40px; } #jing { color:Tomato; position:absolute; top:50%; left:60%; font-size:20px; } #denglu { position:absolute; background-image:url(4.jpg) ; background-size: 100%; top:65%; left:30%; width:60px; height:50px; } #zhuce { position:absolute; background-image:url(4.jpg) ; background-size: 100%; float:left; top:65%; left:60%; width:60px; height:50px; } p.namea { position:absolute; top:10%; left:20%; } p.nameb { position:absolute; top:30%; left:20%; } #mima { position:absolute; top:-5px; left:100%; } #zhanghao { position:absolute; top:-5px; left:100%; } a:hover { color :red; border-bottom:1px solid; } </style> </head> <body> <script type="text/javascript"> function aaaa() { alert("您已成功登陆，稍后会跳转到您需要的页面~"); } function bbbb() { alert("您已成功注册，稍后会跳转到您需要的页面~"); } </script> <div id="aa"> <h5 id="yu">檐上四月雨</h5> <p id="jing">---人间惊鸿客</p> <div id="bb"> <form> <p class="namea">账号:<input type="text" id="zhanghao" placeholder="请输入账号"/></p> <p class="nameb">密码:<input type="text" id="mima" placeholder="请输入密码"/></p> </form> <div id="denglu" onclick="aaaa()"><h4>登陆</h4></div> <div id="zhuce" onclick="bbbb()"><h4>注册</h4></div> </div> <div id="cc"></div> </div> <h2 id="dd">2017.06.22  <a href="#" class="sd">LJMZ</h2> </body></html>
效果图：
点击登陆：
点击注册：
登陆网页模板 - 1 （HTML+CSS）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。