登陸網頁模板 - 1 （HTML+CSS）
阿新 • • 發佈：2017-06-23
pre com href tom .cn clas 網頁模板 html 輸入
一個用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）