html制作的靜态頁面,基礎入門小作業。
界面中包括項:
ISBN, 圖書名,作者、類别(自然、人文、曆史、地理)、是否貸款(是,否), 出版社(常用幾個出版式,清單),出版日期,版次(隻能介于1-5)、單價、圖書簡介、封面照片、送出按鈕,複位取消按鈕等。
要求:建議使用手機測試效果。使用表格布局,頁面居中,字型和顔色搭配得當,整體界面協調和美觀,實用性強。
核心代碼:
<title>圖書入庫管理</title>
</head>
<body background="image/t4.jpg">
<form name="BookInput" action="myServlet1" method="post">
<h1 align="center"><strong>圖書館新書入庫管理系統</strong></h1>
<hr align=center width="50%" size="4" color="white">
<table align="center">
<tr>
<td>圖書名:</td>
<td><input type="text" placeholder="請輸入完整圖書名字" name="name" size="20" maxlength="20"></td>
</tr>
<tr>
<td>ISBN:</td><td><input type="text" name="ISBN" size="20" maxlength="20" placeholder="ISBN"></td>
</tr>
<tr>
<td>作者:</td><td><input type="text" placeholder="請輸入作者名字"name="name" size="10" maxlength="10"></td>
</tr>
<tr>
<td>類别:</td>
<td>
<input type="checkbox" name="type" value="自然" checked="checked">自然
<input type="checkbox" name="type" value="人文">人文
<input type="checkbox" name="type" value="曆史">曆史
<input type="checkbox" name="type" value="地理">地理<br>
</td>
</tr>
<tr>
<td>貸款與否:</td>
<td><input type="radio" name="judje" value="是">是
<input type="radio" name="judge" value="否">否<br>
</td>
</tr>
<tr>
<td>出版社:</td>
<td><select name="mj">
<option value="1">人民教育出版社</option>
<option value="2">人民文學出版社</option>
<option value="3" selected="selected">商務印書館</option>
<option value="4">中華書局</option>
<option value="5">元月出版社</option>
<option value="6">科學出版社</option>
</select>
</td>
</tr>
<tr>
<td>出版日期:</td>
<td><input type="date"></td>
</tr>
<tr>
<td>版次:</td>
<td><input type="number" name="number" max="5" min="1" value="2"></td>
</tr>
<tr>
<td>單價:</td>
<td><input type="number" name="number" step="0.01"></td>
</tr>
<tr>
<td>圖書簡介:</td>
<td align="left"><textarea name="intr" cols="50" rows="4"></textarea></td>>
</tr>
<tr>
<td>圖書封面照片:</td><td><input type="file" name="pho"></td>
</tr>
</table>
<table>
<tr rowspan="3" align="right">
<td width="700"><input type="submit" value="送出">
<input type="reset" value="重置"></td>
</tr>
</table>
</form>
手機測試效果:
電腦端測試效果: