6月25日笔记

1.圆的效果
效果图：

屏幕截图 2026-06-25 085433

代码展示：

点击查看代码 
<!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;
				
			}
         </style>
		
	</head>
	<body>
      <div class="yuan"></div>
    </body>
</html>

知识点：border-radius:50%造圆语句

效果图：

屏幕截图 2026-06-25 090039

代码展示：

点击查看代码 
.q{
				width:100px;
				height:100px;
				background-color: red;
				border-radius:0%;
				float:left
			
				
			}
			.w{
				width:100px;
				height:100px;
				background-color:orangered;
				border-radius:0%;
				float:left
			}
			.e{
				width:100px;
				height:100px;
				background-color: yellow;
				border-radius:0%;
				float:left
			}
			.r{
				width:100px;
				height:100px;
				background-color:green;
				border-radius:0%;
				float:left
			}
			.t{
				width:100px;
				height:100px;
				background-color:darkmagenta;
				border-radius:0%;
				float:left
			}

选择器中，用float没有间隔，用display:inline-block有间隔

3.表单制作

两个表单效果图：

屏幕截图 2026-06-25 205806

代码展示：

点击查看代码 
<!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>
posted @ 2026-06-25 09:03  createcoding  阅读(6)  评论(0)    收藏  举报