固定的导航栏以及全选和反选
1、实现的效果显示
2、具体的代码实现
html和css
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 100%;
height: 60px;
background-color: black;
line-height: 60px;
}
.nav .sc ul {
list-style: none;
}
.nav .sc ul li{
width: 120px;
height: 60px;
float: left;
text-align: center;
}
.sc{
width: 650px;
height: 60px;
background-color: orange;
margin: 0 auto;
}
</style>
<body>
<div class="nav">
<div class="sc">
<ul>
<li>导航栏目</li>
<li>导航栏目</li>
<li>导航栏目</li>
<li>导航栏目</li>
<li>导航栏目</li>
</ul>
</div>
</div>
<h1>请选择你的兴趣爱好</h1>
<input type="button" value="全选" id="chall" />
<input type="button" value="反选" id="reseve" /><br/>
<input type="checkbox" value="唱歌"/>唱歌
<input type="checkbox" value="跳舞"/>跳舞
<input type="checkbox" value="游泳"/>游泳
<input type="checkbox" value="划水"/>划水