HTML--模仿學校資訊門戶頁面
阿新 • • 發佈:2018-12-12
作業一
第一章:
實踐作業1:自己獨立設計並實現一個簡單的登入頁面(樣式自定,可參考民大資訊門戶登入頁面),頁面中需包含以下元件:
文字框text
密碼框password
複選框checkbox (可供使用者選擇記住密碼)
提交按鈕submit
重置按鈕reset
圖片 image
框架 frameset (瀏覽器視窗劃分樣式及比例自定)
另外自己設計一個超連結,滑鼠單擊時能跳轉到計科學院主頁。
原始碼:
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title><歡迎登陸中南民族大學資訊門戶</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body{text-align:center } body{line-height:2} body {background:url("background.jpg"); background-repeat:repeat} </style> </head> <form> <div> <p align="center" > <font size = "7" >歡迎登陸中南民族大學資訊門戶</font></p> </div> <br /> <br /> <br /> 姓名: <input style="width:150px;height:20px;background-color:orange" type="text" name="myName" /> <br /> <br /> 密碼: <input style="width:150px;height:20px;background-color:orange;" type="password" name="pass" > <br /> <br /> <input type="checkbox" name="radiobutton" value="radiobutton" checked> 記住密碼? <br /> <br /> <button type="button" style="width:120px;height:40px;background-color:yellow;">登陸</button> <input type="reset" value="重置" style="width:120px;height:40px;background-color:yellow;"> <br /> <p> <!--<img src="70d346c20a27b293.jpg" alt="hahahaahahahaha"/>--> <br /> <a href ="http://www.scuec.edu.cn/jky/">中南民族大學電腦科學學院</a> </p> </form> </body > </html>
效果:
不知道為什麼會出來一個分頁效果,覺得不可思議~實在想不通,本來就是個小白~
下次想出來了再說~