1. 程式人生 > 實用技巧 >網頁設計上機考試備用

網頁設計上機考試備用

表格

<h1 style="text-align: center;">課程表</h1>
<table border="3px" bordercolor="0x4C96FF" align="center">
	<tr>
		<th>星期yi</th>
		<th>星期一</th>
		<th>星期二</th>
		<th>星期三</th>
		<th>星期四</th>
		<th>星期五</th>
		<th>星期六</th>
		<th>星期日</th>
	</tr>
	<tr>
		<td rowspan="4">
			<p style="text-align: center;">上午</p>
			<p>8.00——12.00</p>
		</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td rowspan="8">星期一</td>
	</tr>
	<tr>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
	</tr>
	<tr>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
	</tr>
	<tr>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
	</tr>
	<tr>
		<td rowspan="2">
			<p style="text-align: center;">下午</p>
			<p>2.00——18.00</p>
		</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
	</tr>
	<tr>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
	</tr>
	<tr>
		<td rowspan="2">
			<p style="text-align: center;">晚上</p>
			<p>19.00——21.00</p>
		</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
	</tr>
	<tr>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
		<td>星期一</td>
	</tr>
</table>

表單

<form action="no" method="get">
    請在此處編寫HTML程式碼實現上面這個表單效果
    <h1>我的表單</h1>
    <p>賬號:<input type="text"></p>
    <p>密碼:<input type="password"></p>
    <p>愛好: 
        <input type="checkbox" value="籃球">籃球
        <input type="checkbox" value="足球">足球
        <input type="checkbox" value="羽毛球">羽毛球
    </p>
    <p>
        性別:
        <input type="radio" name="sex" value="man"> 男
        <input type="radio" name="sex" value="woman"> 女
    </p>
    <p>
        自我介紹:
        <textarea rows="7" cols="30"></textarea>
    </p>
    <p>
        地址:
        <select>
            <option value ="石家莊">石家莊</option>
            <option value ="保定">保定</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
        </select>
    </p>
    <p> 
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按鈕">
    </p>
</form>

JS

<script type="text/javascript">
	function calculate(){
		let chang =Number(document.getElementById('chang').value);
		let kuan = Number(document.getElementById('kuan').value);
		let gao = Number(document.getElementById('gao').value);
		let mianji = 2 * (chang * gao + chang * kuan + kuan * gao);
		let tiji = chang * kuan * gao;
		document.getElementById('biaomianji').innerText = mianji;
		document.getElementById('tiji').innerText = tiji;
	}	
</script>