2019-01-10作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#parent{
				width: 390px;
				height: 400px;
				border: 1px solid black;
				
			}
			#div1{
				width: 390px;
				height: 100px;
				background-color: gray;				
			}
			#div2{
				width: 130px;
				height: 200px;
				background-color: palevioletred;	
				float: left;
			}
			#div3{
				width: 130px;
				height: 200px;
				background-color:green;	
				float: left;
			}
			#div4{
				width: 130px;
				height: 200px;
				background-color:papayawhip;	
				float: left;
			}
			#div5{
				width: 390px;
				height: 100px;
				background-color: plum;	
				float: left;			
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="div1" align="center">页眉区域</div>
			<div id="div2">2.导航栏</div>
			<div id="div3">1.主体内容</div>
			<div id="div4">3.其他栏目</div>
			<div id="div5">页脚区域</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: url(img/bg_login.jpg);
			}
			#div1{
				
				background-color: grey;
				opacity: 0.5;
				width: 500px;
				height: 400px;
				position: absolute;
				top: 150px;
				left: 150px;
				float: 1;
				margin: opx auto;
			}
			#div2{
				background-color: white;
				opacity: 1;
				width: 250px;
				height: 150px;
				position: absolute;
				top:250px;
				left: 250px;
				float: 2;
				margin: opx auto;
				
			}
			table{
				
				color: black;
				line-height: 50px;
				width: 250px;
				text-indent: 1em;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
			<div id="div2">
				<form >
					
						<table  >
						<tr>
							<td>账号:<input type="text"></td>
						</tr>
						<tr>
							<td>密码:<input type="password"></td>
						</tr>
						<tr>
							<td><input type="submit" value="ok"></td>
						</tr>
					</table>
				
				</form>
			</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				background-color: gray;
				width: 430px;
				height: 20px;
				color: white;
			}
			span{
				color: red;
			}
			#id1{
				align:right;
			}
			hr{
				float: right;
				width: 50px;
				height: 2px;
				position: absolute;
				
				
			}
			fieldset{
				width: 400px;
				border-bottom: 0px solid black ;
				border-left: 0px solid black ;
				border-right: 0px solid black ;
				
			}
			legend{
				font-weight: bold;
			}
			.class1{
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<div>
			<div id="div1">反馈表单</div>
			<div>
				
				<form>
					<fieldset class="base_info">
						<legend >用户信息</legend>
						<table>
							
							<tr>
								<td align="right">用户名:</td>
								<td><input type="text" size="20" /> </td>
							</tr>
							<tr>
								<td align="right">电子邮件:</td>
								<td><input type="email" value="@" size="30"/> </td>
							</tr>
							<tr>
								<td align="right">网址:</td>
								<td><input type="url" value="http://" size="40"> </td>
							</tr>
							
						</table>
					</fieldset>
					<fieldset>
						<legend>反馈内容</legend>
						<table>
							<tr>
								<td align="right">相关图片:</td>
								<td><input type="file" value="选择文件"></td>
							</tr>
							<tr>
								<td></td><td><span>本系统支持上传,jpg、gif、png图片</span></td>
							</tr>
							<tr>
								<td align="right" class="class1">内容:</td>
								<td><textarea></textarea></td>
							</tr>
							<tr>
								<td></td><td><span>请输入留言内容</span></td>
							</tr>
							<tr>
								<td colspan="2" align="center"><input type="submit"><input type="reset"></td>
							</tr>
						</table>
					</fieldset>
				</form>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input{
				border: 1px solid cadetblue;
			}
			legend{
				border: 1px solid cadetblue;
			}
			.lan{
				background-color: #00BFFF;
			}
			span{
				color: red;
			}
			select{
				color: blue;
			}
			fieldset{
				width: 500px;
			}
			.top{
				vertical-align: top;
			}
			td{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<form>
				<fieldset>
					<legend>用户登录</legend>
					<table>
						<tr>
							<td align="right">用户姓名:</td>
							<td><input type="text" > </td>
						</tr> 
						<tr>
							<td align="right">密码:</td>
							<td><input type="password" ></td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<input type="submit" value="登录" class="lan"/>
							</td>						
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>用户注册</legend>
					<table >
					<tr>
							<td align="right">用户名:</td>
							<td><input type="text" > </td>
							<td><span>*(最多30个字符)</span></td>
						</tr>
						<tr>
							<td align="right">密码:</td>
							<td><input type="password" ></td>
							<td><span>*(最多30个字符)</span></td>
						</tr>
						<tr>
							<td align="right">重置密码:</td>
							<td><input type="password" ></td>
							<td><span>*(密码需要一)</span></td>
						</tr>
						<tr>
							<td align="right">密码保护问题:</td>
							<td><select><option>选择密码提示问题</option><option>123</option> </select></td>
						</tr>
						<tr>
							<td align="right">密码保护问题答案:</td>
							<td><input type="text" ></td>
						</tr>
						<tr>
							<td align="right">性别:</td>
							<td><input type="radio" name="sex"><input type="radio" name="sex"></td>
						</tr>
						<tr>
							<td align="right" class="top">本站印象:</td>
							<td><textarea></textarea> </td>
						</tr>
						<tr>
							<td align="right">同意服务条款</td>
							<td><input type="button"><u>查看服务条款</u></td>
						</tr>
						<tr>
							<td colspan="2" align="center"><input type="submit" value="提交" class="lan"></td>
							
						</tr>
					</table>
				</fieldset>
			</form>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: url(img/bg_login.jpg);
			}
			#div1{
				
				background-color: grey;
				opacity: 0.5;
				width: 500px;
				height: 400px;
				position: absolute;
				top: 150px;
				left: 150px;
				float: 1;
				margin: opx auto;
			}
			#div2{
				background-color: white;
				opacity: 1;
				width: 250px;
				height: 150px;
				position: absolute;
				top:250px;
				left: 250px;
				float: 2;
				margin: opx auto;
				
			}
			table{
				
				color: black;
				line-height: 50px;
				width: 250px;
				text-indent: 1em;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
			<div id="div2">
				<form >
					
						<table  >
						<tr>
							<td>账号:<input type="text"></td>
						</tr>
						<tr>
							<td>密码:<input type="password"></td>
						</tr>
						<tr>
							<td><input type="submit" value="ok"></td>
						</tr>
					</table>
				
				</form>
			</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#p{
				height: 240px;
				width: 240px;
				border: 1px solid gray;
				
			}
			#div1{
				height:40px;
				width:40px;
				background-color: red;
				float: none;
			}
			#div2{
				height:20px;
				width:30px;
				background-color: green;
				position: absolute;
				left: 220px;
				top: 10px;
				float: right;
			}
			#div3{
				height:15px;
				width:200px;
				background-color: green;
				position: absolute;
				left: 50px;
				top: 35px;
				float: right;
			}

		</style>
	</head>
	<body>
		<div id="p">
			<div id="div1"></div>
			<div id="div2"></div>
			<div id="div3"></div>
			<div id="div4"></div>
			<div id="div5"></div>
			<div id="div6"></div>
			<div id="div7"></div>
			<div id="div8"></div>
			<div id="div9"></div>
			<div id="div10"></div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#parent{
				background-color: gainsboro;
				width: 400px;
				height: 500px;
			}
			#div1{
				width: 200px;
				height: 250px;
				float: left;
				position: absolute;
				left: 15px;
				
			}
			#div2{
				width: 200px;
				height: 250px;
				float: left;
				position: absolute;
				left: 210px;
			}
			#div3{
				width: 200px;
				height: 160px;
				float: left;
				position: absolute;
				left: 15px;
				top: 250px;
			}
			#div4{
				width: 200px;
				height: 160px;
				float: left;
				position: absolute;
				left: 210px;
				top: 250px;
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="div1">
				<img src="img/商品/goods1.jpg" /><br />
				新年狂欢,剁手装备<br />¥100 <span>¥1</span>
			</div>
			<div id="div2">
				<img src="img/商品/goods2.jpg" /><br />
				新年狂欢,剁手装备<br />¥100 <span>¥1</span>
			</div>
			<div id="div3">
				<img src="img/商品/goods3.jpg" /><br />
				新年狂欢,剁手装备<br />¥100 <span>¥1</span>
			</div>
			<div id="div4">
				<img src="img/商品/goods4.jpg" /><br />
				新年狂欢,剁手装备<br />¥100 <span>¥1</span>
			</div>
		</div>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值