实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动定位与布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing:border-box;
}
li{
list-style: none;
}
.table{
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
overflow: hidden;
display: inline-block;
}
.table>ul{
float: left;
}
.table>ul:first-child>li{
width: 100px;
}
.table>ul>li{
width: 60px;
height: 25px;
line-height: 25px;
text-align: center;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.table>ul>li:first-child{
font-weight: bold;
}
.table>ul:first-child>li:nth-child(2){
height: 75px;
line-height: 75px;
}
.table>ul:first-child>li:nth-child(3){
height: 50px;
line-height: 50px;
}
/*登录框*/
.dl{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left:-75px;
width: 200px;
height: 150px;
background: #abcdef;
}
/*圣杯布局*/
.box1{
margin-top: 100px;
position: relative;
}
.left{
position: absolute;
left: 0;
top:0;
width: 200px;
height: 100px;
background: #abcdef;
}
.in{
margin: 0 200px;
height: 100px;
background: red;
}
.right{
position: absolute;
right: 0;
top:0;
width: 200px;
height: 100px;
background: #cdcdcd;
}
</style>
</head>
<body>
<table>
<caption>课程表</caption>
<thead>
<tr>
<th>日期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">8:00-12:00</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td rowspan="2">14:00-16:00</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
</tbody>
</table>
<div class="table">
<ul>
<li>日期</li>
<li>8:00-12:00</li>
<li>14:00-16:00</li>
</ul>
<ul>
<li>星期一</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
</ul>
<ul>
<li>星期二</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
</ul>
<ul>
<li>星期三</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
</ul>
<ul>
<li>星期四</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
</ul>
<ul>
<li>星期五</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
<li>体育</li>
</ul>
</div>
<div class="dl">
<form action="login.php" method="post">
<p>
<label for="username">账号：</label>
<input type="username" id="username" name="username" placeholder="用户名不能为空">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="不能少于6位">
</p>
</form>
</div>
<!-- 圣杯布局 -->
<div class="box1">
<div class="left"></div>
<div class="in"></div>
<div class="right"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
