1. 程式人生 > >作品2

作品2

val let 元素選擇器 hang 四川 html lsp 屬性 radius

css文件tzy.css

*{
margin: 0px;
padding: 0px;
}
body{
width: 1000px;
}
.div1{
width: 70%;
height: 50px;

margin: 0px auto;
/*疊層設置屬性*/
}
.div1 div h1{
/*類選擇器加元素選擇器*/
text-align: center;
}
.div2{
width: 70%;
height: auto;

margin: 0px auto;
}
.div3{
width: 70%;
height: 52px;

margin: 0px auto;
}

html文件tzy1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td colspan="2"><h3>請填寫以下信息:</h3></td>
</tr>
<tr>
<td style="width: 10%;">姓名:</td>
<td><input type="text" placeholder="請輸入姓名"></td>
</tr>
<tr>
<td style="width: 10%;">密碼:</td>
<td><input type="password" pattern="[0-9]{6}" placeholder="請輸入數字0-9的6位密碼"></td>
</tr>
<tr>
<td style="width: 10%;">籍貫:</td>
<td><select name="籍貫" id="se1">
<option value="beijing">北京</option>
<option value="sichuan">四川</option>
</select></td>
</tr>
<tr>
<td style="width: 10%;">性別:</td>
<td>
<input type="radio" name="r1" id="nan">
<label for="nan">男</label>
<input type="radio" name="r1" id="nv">
<label for="nv">女</label>
<input type="radio" name="r1" id="bu" checked>
<label for="bu">不透露</label>
</td>
</tr>
<tr>
<td style="width: 10%;">頭像:</td>
<td><input type="file"></td>
</tr>
<tr>
<td colspan="2">願意到以下城市工作:</td>
</tr>
<tr>
<td colspan="2">
<div style="width: 48%;margin: 0px auto">
<select name="籍貫" id="se2" multiple="true" style="text-align: center;height: 55px">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
<option value="shenzhen">深圳</option>
<option value="越南">越南</option>
<option value="阿富汗">阿富汗</option>
<option value="美國">美國</option>
<option value="日本">日本</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
您想給本公司的留言:
</td>
</tr>
<tr>
<td colspan="2">
<div style="width: 48%;height: auto;margin: 0px auto">
<textarea name="333" id="222" cols="25" rows="10" style="max-width:250px" placeholder="請寫入您想寫入的留言:"></textarea>
                </div>
</td>
</tr>
<tr>
<td colspan="2">
<div style="width: 48%;height: auto;margin: 0px auto">
<input type="submit">
<input type="reset" value="清除">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>



html文件tzy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tzyHTML</title>
<link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<div class="div1">
<div>
<h1>&#45;&#45;&#45;&#45;&gt;&gt;&gt;求職申請表&lt;&lt;&lt;&#45;&#45;&#45;&#45;
</h1>
</div>
</div>
<div class="div2">
<iframe src="tzy1.html" width="100%" height="500px"></iframe>
</div>
<div class="div3">
<fieldset style="text-align: center;border-style: double;border-width: 6px;border-radius: 50px;border-color: blueviolet;font-family: ‘楷體‘;">
<legend><h3>不想讓我們公開的信息</h3></legend>
<input type="checkbox" checked="true"><b>姓名</b>
<input type="checkbox" checked="true"><b>密碼</b>
<input type="checkbox" checked="true"><b>籍貫</b>
<input type="checkbox" checked="true"><b>性別</b>
<input type="checkbox" checked="true"><b>頭像</b>
<input type="checkbox" checked="true"><b>願意工作地址</b>
<input type="checkbox" checked="true"><b>留言</b>
</fieldset>
</div>
</body>
</html>

作品2