1. 程式人生 > >HTML--模仿學校資訊門戶頁面

HTML--模仿學校資訊門戶頁面

作業一

第一章:

實踐作業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>

效果:

不知道為什麼會出來一個分頁效果,覺得不可思議~實在想不通,本來就是個小白~

下次想出來了再說~