我想要一个我想用HTML制作的游戏。我只是不知道如何创建这个布局:
我怎样才能通过HTML,JavaScript和CSS实现这一目标? (不,我不是n00b。我只是不知道如何用小方块创建一个正方形。)非常感谢。附:我还是个孩子。 :)此外,抱歉视觉。我把它扔在一起两分钟。
答案 0 :(得分:0)
您需要包含列和行的网格布局。这应该可以帮助您入门。
http://codepen.io/anon/pen/qOMNdo
<div class="board">
<div class="row">
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column connector">
|
</div>
<div class="column connector">
</div>
<div class="column connector">
</div>
<div class="column connector">
|
</div>
</div>
<div class="row">
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column connector">
|
</div>
<div class="column connector">
</div>
<div class="column connector">
</div>
<div class="column connector">
|
</div>
</div>
<div class="row">
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column connector">
|
</div>
<div class="column connector">
</div>
<div class="column connector">
</div>
<div class="column connector">
|
</div>
</div>
<div class="row">
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
<div class="column">
<div class="box">
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</div>
</div>
</div>
</div>
.row {
clear: both;
}
.column {
float: left;width: 150px;
}
.column.connector {
text-align: center;
}
.box {
border: 1px solid black;
padding: 30px 0;
text-align: center;
}
答案 1 :(得分:0)
你甚至可以通过单一选择来做到这一点并从box-shadow中绘制线条:
select {
display: inline-block;
width: 100px;
height: 16px;
margin: 100px 60px;
box-shadow: 0 0 0 40px white, 0 -40px 0 40px white, 0 40px 0 40px white, 0 -40px 0 41px, 0 40px 0 41px, 0 0 0 41px;
}
form {
padding: 0;
margin: auto;
width: 900px;
box-shadow: inset 0 0 0 110px white, inset 0 0 0 111px black;
}
select:nth-child(5),
select:nth-child(7) {
float: left;
margin-right: 200px;
clear: right;
}
select:nth-child(6),
select:nth-child(8) {
float: right;
margin-left: 200px;
}
<form>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</form>
框可以从包裹每个选择的单个div中绘制,并且在它们之后的伪元素之间的行之间绘制:
form {
padding: 0;
margin: auto;
width: 900px;
background: white;
}
form,
p {
position: relative;
}
form:before {
content: '';
border: 1px solid;
position: absolute;
top: 110px;
left: 110px;
right: 110px;
bottom: 110px;
z-index: 0;
}
p {
display: inline-block;
width: 100px;
line-height: 16px;
padding: 70px 30px;
margin: 30px;
border: 1px solid;
background: inherit;
}
p:nth-child(5),
p:nth-child(7) {
float: left;
margin-right: 200px;
clear: right;
}
p:nth-child(6),
p:nth-child(8) {
float: right;
margin-left: 200px;
}
select {
width: 100px;
<form>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
<p>
<select>
<option>Select</option>
<option>Option 1</option>
</select>
</p>
</form>