前端（七）
2018-08-15 本文已影响0人
要你何用杀了算了
1.在定塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在定塌陷</title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
}
.box3{
border: 10px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*塌陷重叠用*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
运行结果：
image.png
2.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 表单</title>
<style type="text/css">
</style>
</head>
<body>
<form action="73副.html" method="post">
<!-- placeholder="小面有虚字" value='默认值' -->
<!-- <label for ="um"> </label> 跟下面一起的 让光标点击就亮 -->
<!-- id= "um" -->
<!-- <fieldset> </fieldset> 分组 给包住的内容圈起来-->
用户名
<input type="text" name="username" value="我是">
<br><br>
密码<input type="password" name="password" >
<br><br>
性别<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<br><br>
<!-- 默认选择 checked="checked" -->
爱好<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="lq">篮球
<input type="checkbox" name="hobby" value="pq">排球
<input type="checkbox" name="hobby" value="yq">羽毛球
<br><br>
你喜欢的明星
<select name="star">
<!-- 可以分组optgroup -->
<optgroup label="女的">
<option value="mu">小暮</option>
<option value="mi">小蜜</option>
<option value="dm">大米</option>
</optgroup>
<optgroup label="男的">
<option value="xm">小明</option>
<option value="xx">小熊</option>
<option value="xw">小王</option>
</optgroup>
<!-- 可以多行输入内容 textarea name ="info" 重置type="reset" type="button" value="按钮" <button> <button>可以提交 -->
</select>
<br><br>
<input type="submit" value="注册">
</form>
</body>
</html>
写一个接受数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 模拟服务器</title>
<style type="text/css"></style>
</head>
<body>
<h1>表单提交成功</h1>
</body>
</html>
运行结果：
image.png
image.png
3.框架集
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 框架集</title>
</head>
<frameset cols = "50%, 20%, 30%">
<!-- 可以引用别的 -->
<frame src="9作业.html"/>
<frame src="53小作业.html"/>
<frame src="73.html"/>
</frameset>
<!-- <fieldset>跟body冲突不能一起用</fieldset> 不能写入-->
</html>
运行结果：
image.png
4.ie6png图片修复
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<titlei>ie6png图片修复</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-image: url(./img/x11.jpg );
background-repeat: no-repeat;
}
.box1{
width: 200px;
height: 200px;
background-image: url(./img/x11.jpg );
background-repeat: no-repeat;
}
</style>
</head>
<body style="background-color: yellow" >
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
运行结果：
image.png
5.表格布局
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>表格布局</title>
</head>
<style type="text/css">
</style>
<body>
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
运行结果：
image.png
