最后实现如下
html内容
<html>
<head>
<title>title</title>
<style>
.block:nth-of-type(odd){
width: 200px;
height: 200px;
background-color: red;
display: inline-block;
margin: 10px;
}
.block:nth-of-type(even){
width: 200px;
height: 200px;
background-color: yellow;
display: inline-block;
margin: 10px;
}
#bigBox{
width: 900px;
height: 500px;
border: 5px solid grey;
}
#barcon{
width: 900px;
text-align: center;
position: absolute;
top: 510px;
}
#prev,#next{
font-size: 24px;
display: inline-block;
cursor: pointer;
}
.num{
display: inline-block;
background-color: white;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 5px;
cursor: pointer;
}
#on{
color: white;
background-color: gray;
}
</style>
</head>
<body onload="goPage(1,8)">
<div id="bigBox"> //里面还没有砖块，用js动态插入
<div id="barcon"> //这个是底下的导航
<div id="prev"><</div>
<div id="next">></div>
<p id="totalPage">共X页</p>
</div>
</div>
</body>
</html><html>
<head>
<
