先看一下页面布局:
下面是代码布局:
<div class="main">
<ul>
<li class="types all" data-index="0">全部</li>
<li class="types aa" data-index="1">简餐</li>
<li class="types bb" data-index="2">饮品</li>
<li class="types cc" data-index="3">麻辣鲜香</li>
<li class="types dd" data-index="4">甜点</li>
</ul>
<div class="button"><span>开始</span></div>
<div class="name"><span id='ko'>随机名称</span></div>
</div>
<div class="tips">如果您点击超过十次还没有选到满意的菜单,也许在你心里面早已有答案。遵循自己的内心吧~!</div>
还有CSS的代码:
body{background: #ef4009c2}
.main{
width: 660px;
height: 760px;
margin: 80px auto;
}
.button{
height: 100px;
color: #fff;
font-weight:bold;
font-size: 58px;
position: relative;
top: 210px;
text-align: center;
cursor: pointer;