<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="css/tb.css" rel="stylesheet">
<style>
.outer-box{
width: 100%;
border: 10px solid #5374d7;
margin: 0 auto;
padding: 1.18em;
box-sizing: border-box;
}
.card{
width: 15%;
height: 130px;
border: 5px solid #1a579e;
background:#1a579e ;
float: left;
box-sizing: border-box;
margin: 1.45em;
}
.empty{
clear: left;
}
.card div{
font-size: 40pt;
color: #FFF;
// font-family: 黑体;
text-align: center;
height: 100%;
line-height: 110px;
}
</style>
<!--
0.默认块级元素:<div> <p> <table> <span style="display:block">
1.margin: 容器之间的距离
2.padding: 内容与边框之间的距离
3.box-sizing:border-box / content-box
-border-box:height/width = border + padding + content
-content-box:height/width = content
4.两个div在同一个地方的margin会重叠,大的覆盖小的
5.两个div在同一个地方的margin和padding不会重叠
-->
<!--
(1)float:left|right 使div脱离标准流,浮动在某一个方向
(2)clear: left|right|both 取消div在某一方向的浮动
(3)注意:取消浮动使div变成inline-block(没有脱离标准流,但不换行)
(4)浮动的div之间的margin不会重叠
(5) 掌握javascript基础
-->
<script type="text/javascript">
function initBox(){
var box = document.getElementById("outbox");
var result = "";
for(var i=0;i<10;i++)
{
result += "<div class=\"card\"><div>"+(i+1)+"床</div></div>" ;
}
result += "<div class=\"empty\"></div>" ;
box.innerHTML = result;
}
</script>
</head>
<body οnlοad="initBox();">
<div id="outbox" class="outer-box">
</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="css/tb.css" rel="stylesheet">
<style>
.outer-box{
width: 100%;
border: 10px solid #5374d7;
margin: 0 auto;
padding: 1.18em;
box-sizing: border-box;
}
.card{
width: 15%;
height: 130px;
border: 5px solid #1a579e;
background:#1a579e ;
float: left;
box-sizing: border-box;
margin: 1.45em;
}
.empty{
clear: left;
}
.card div{
font-size: 40pt;
color: #FFF;
// font-family: 黑体;
text-align: center;
height: 100%;
line-height: 110px;
}
</style>
<!--
0.默认块级元素:<div> <p> <table> <span style="display:block">
1.margin: 容器之间的距离
2.padding: 内容与边框之间的距离
3.box-sizing:border-box / content-box
-border-box:height/width = border + padding + content
-content-box:height/width = content
4.两个div在同一个地方的margin会重叠,大的覆盖小的
5.两个div在同一个地方的margin和padding不会重叠
-->
<!--
(1)float:left|right 使div脱离标准流,浮动在某一个方向
(2)clear: left|right|both 取消div在某一方向的浮动
(3)注意:取消浮动使div变成inline-block(没有脱离标准流,但不换行)
(4)浮动的div之间的margin不会重叠
(5) 掌握javascript基础
-->
<script type="text/javascript">
function initBox(){
var box = document.getElementById("outbox");
var result = "";
for(var i=0;i<10;i++)
{
result += "<div class=\"card\"><div>"+(i+1)+"床</div></div>" ;
}
result += "<div class=\"empty\"></div>" ;
box.innerHTML = result;
}
</script>
</head>
<body οnlοad="initBox();">
<div id="outbox" class="outer-box">
</div>
</body>
</html>