html练习

html表单练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			邮箱地址:<input type="text" placeholder="请输入邮箱地址"/>@
			<select name="email">	
				<option value="">163</option>
				<option value="">126</option>
				<option value="">yeah</option>
			</select>
			<br /><br />
			
			密码:<input type="password" />
			<br /><br />
			
			性别:<input type="radio" name="gender"/>男
				<input type="radio" name="gender" checked/>女
			<br /><br />
			
			验证码:<input type="text" />
			<img src="img/yanzhengma" title="这是验证码" />
			<br /><br />
			
			<!--<input type="button" value=""/>-->
			<button>免费获取验证码</button>
			
			<br /><br />
			备注:<textarea name="" id="" cols="30" rows="10"></textarea>
			
			<br /><br />
			<input type="checkbox" />同意<a href="#">"隐私条款"</a>和"隐私权相关政策"
			<br /><br />
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
		</form>
	</body>
</html>

综合练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业</title>
		<style type="text/css">
			body{
				/*
				 * 只能设置文字在当前元素中水平的对齐方式,
				 * 也可以对行内元素和图片。
				 */
				text-align: center;
			}
			/*
			 * 在定义样式的时候一般不建议去使用ID名,
			 * ID名一般留给JS效果或者后台取数据
			 */
			.two{
				color:#000;
			}
			.txt{
				width:300px;
				height:40px;
			}
			.box1{
				margin-bottom: 10px;
			}
			.box1{
				margin-top: 10px;
				/*
				 * 下面的写法可以是固定的技巧
				 * 可以让一个已知宽度的盒子水平居中显示
				 * margin:100px auto;
				 */
			}
		</style>
	</head>
	<body>
		<img src="img/yanzhengma.jpg" alt="" />
		<br />
		<div class="box1">
			<a href="">新闻</a>
			<a href="" class="two">网页</a>
			<a href="">贴吧</a>
			<a href="">知道</a>
			<a href="">音乐</a>
			<a href="">图片</a>
			<a href="">视频</a>
			<a href="">地图</a>
		</div>
		<form action="" method="post">
			<input type="text" class="txt"/>
			<input type="submit" value="百度一下" class="btn"/>
		</form>
		<div class="box2">
			<a href="">新闻</a>
			<a href="" class="two">网页</a>
			<a href="">贴吧</a>
			<a href="">知道</a>
			<a href="">音乐</a>
			<a href="">图片</a>
			<a href="">视频</a>
			<a href="">地图</a>
		</div>
		<br />
	</body>
</html>

在这里插入图片描述

  • 17
    点赞
  • 74
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值