項目1 參會注冊表
頁面效果圖：
要求：
設計參會注冊表頁面。
HTML代碼：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>參會注冊表</title>
<style type="text/css">
body{
text-align: center;}
h1{
font-size: 25px;
text-align: center;
}
.zhuce{
font-size: 14px;
text-align: center;
width: 550px;
margin: 0 auto;
background: #f7f7f7;
}
.zhuce td{
border: 1px solid #b4b4b4;
padding:2px 3px;
}
.zhuce .ibg{
text-align: left;
}
.zhuce .bbg{
padding: 10px 0;
font-size: 10px;
}
#bt{
width: 40px;
height: 28px;
}
</style>
</head>
<body>
<h1>參會注冊表</h1>
<form>
<table class="zhuce">
<tr>
<td colspan="4" class="ibg">姓名：
<input name="txtName" type="text" >
</td>
<td colspan="4" class="ibg">單位：
<input name="txtzhiwu" type="text" size="22">
</td>
</tr>
<tr>
<td colspan="4" class="ibg">性別：
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
</td>
<td colspan="4" class="ibg">手機：
<input name="txtshouji" type="text" size="10">
</td>
</tr>
<tr>
<td colspan="4" class="ibg">酒店：
<input type="radio" name="res" value="tianshan"/>天山大酒店
<input type="radio" name="res" value="kunlun"/>昆侖飯店
</td>
<td class="ibg">預定酒店數(shù)：
<input name="txtfangjianshu" type="text" size="1">套
</td>
</tr>
<tr>
<td colspan="9" class="ibg">
房間類型：
<input type="radio" name="leixing" value="danren"/>單人間（320元)
<input type="radio" name="leixing" value="shuangren"/>標準雙人間（380元）
<input type="radio" name="leixing" value="jiating"/>家庭套間（450元）
</td>
</tr>
<tr>
<td colspan="9" class="bbg">
<input id="bt" type="submit" name="btnOk" value="提交">
<input id="bt" type="reset" ><br><br>
</td>
</tr>
</table>
</form>
</body>
</html>
項目2 設計科技工作者建言頁面
頁面效果圖：
文章來源：http://www.zghlxwxcb.cn/news/detail-465337.html
要求：
采用DIV、表格混合布局設計“留言板”頁面。
其它兩行的內(nèi)容如下所示：
注：如果您的留言不便公開，請選擇"保密"選項，提交后可憑系統(tǒng)反饋給您的留言編號、查詢密碼和您的姓名查詢回復。
請遵守國家有關法律、法規(guī)，尊重網(wǎng)上道德，承擔一切因您的行為而直接或間接引起的法律責任。
本網(wǎng)站擁有管理筆名和留言的一切權(quán)利。文章來源地址http://www.zghlxwxcb.cn/news/detail-465337.html
HTML代碼：
<!DOCTYPE html>
<html lang='en'>
<head>
到了這里，關于【W(wǎng)eb前端基礎】實驗9 表單頁面設計的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級導航菜單 Web頁面設計實例——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
