html基础4-float

最新推荐文章于 2024-02-14 11:51:22 发布

jing20121012

最新推荐文章于 2024-02-14 11:51:22 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/jing20121012/article/details/38230063

版权

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



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

jing20121012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础4-float

.outer-box{ width: 100%; border: 10px solid #5374d7; margin: 0 auto; padding: 1.18em; box-sizing: border-box; } .card
复制链接

扫一扫