6月25日笔记

1.圆的制作复习

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
          .yuan{
				width:100px;
				height:100px;
				background-color: royalblue;
				border-radius:50%;
				margin:0 auto;
				
			}
           </head>
	<body>
		<div class="yuan"></div>
	</body>
</html>

效果图：

屏幕截图 2026-06-25 085433

2.表单制作
代码演示：

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<style type="text/css">
			
		</style> 
	</head>
	<body>
		<form>
			<table border="1" cellspacing="" cellpadding="">
				<tr><td>header</td></tr>
				<tr>
					<td>用户名:<input type="text" placeholder="请输入用户名"></td>
				</tr>
				<td>
					密码:
					<input type="password" placeholder="请输入密码">
				</td>
				
				<tr><td>
					性别:
					<input type="text" placeholder="请输入性别">
				</td></tr>
				<td>兴趣:
					<input type="text" placeholder="请输入兴趣">
				</td>
				<tr><td><button>提交</button></td></tr>
				
			</table>
		</form>
		<form>
			<table border="1" cellspacing="" cellpadding="">
				<tr><td>header</td></tr>
				<tr>
					<th>用户名</th>
					<td><input type="text" placeholder="请输入用户名"></td>
				</tr>
				
				<tr>
					<th>密码</th>
					<td><input type="password" placeholder="请输入密码"></td>
				</tr>
				<tr>
					<th>性别</th>
					<!--<td><input type="text" placeholder="请输入性别"></td>-->
					<td>
						<select>
							<option>男</option>
							<option>女</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>兴趣</th>
					<td><input type="text" placeholder="请输入兴趣"></td>
				</tr>
				
				<tr>
					<td>
						<button>提交</button>
						<button type="reset">重置</button>
					</td>
					
				</tr><!--<th></th>作用加粗-->
				
			</table>
		</form>
	</body>
</html>

效果图：

屏幕截图 2026-07-09 084956

posted @ 2026-07-09 08:50  createcoding  阅读(11)  评论(0)    收藏  举报