<!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>