abstract：HTML：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS浮動(dòng)</title> <link rel="stylesheet" type="text/css" href="inde
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS浮動(dòng)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="float-left">
</div>
<div class="float-right">
<form>
<table>
<tr>
<td>
<input type="text" placeholder="請(qǐng)輸入用戶名">
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="請(qǐng)輸入密碼">
</td>
</tr>
</table>
</form>
</div>
<div class="clear">
</div>
</body>
</html>
CSS：
*{margin: 0;
padding: 0;
}
.float-left{
float: left;
background-color: #df9f9f;
border-radius: 20px;
width: 400px;
height: 400px;
box-shadow: 10px 10px 5px #ccc;
}
.float-right{
float: right;
background-color: #ffa64d;
width: 300px;
height: 300px;
text-align: center;
box-shadow: -10px 10px 10px #ccc;
}
table{
margin: auto;
margin-top: 90px;
text-align: center;
}
input{
font-size: 30px;
height: 50px;
width: 260px;
text-align: center;
background-color: #7fcc66;
border: 0;
border-radius: 30px;
}
Correcting teacher：天蓬老師Correction time：2018-12-21 11:25:58
Teacher's summary：浮動(dòng)在頁(yè)面中應(yīng)用極廣 ,但是也會(huì)有很大的副作用, 如果能用絕對(duì)定位解決, 就首選絕對(duì)定位, 如果用浮動(dòng)更簡(jiǎn)單,就用浮動(dòng)