H5+CSS3响应式导航条
<div class="top">
<div class="top_box">
<a class="top_box_title" href="index.aspx">Gepeer</a>
<a class="top_box_nav" href="index.aspx">首页</a>
<a class="top_box_nav">全部资源</a>
<a class="top_box_nav">模型</a>
<a class="top_box_nav">场景</a>
<a class="top_box_nav">代码</a>
<a class="top_box_nav">登录</a>
<a class="top_box_nav">注册</a>
</div>
<div class="top_box_phone">
<a class="top_box_title">Gepeer</a>
<div class="top_box_phone_navbutton" style="width:30px; height:30px; line-height:30px; position:absolute; right:14px; top:10px; cursor:pointer;" onclick=
"
var top_box_phone_navbox = document.getElementById('top_box_phone_navbox');
if(top_box_phone_navbox.style.display == 'none')
{
top_box_phone_navbox.style.display='block';
}
else
{
top_box_phone_navbox.style.display='none';
}
">
<div style="position:absolute; background-color:white; width:30px; height:6px; top:4px;"></div>
<div style="position:absolute; background-color:white; width:30px; height:6px; top:12px;"></div>
<div style="position:absolute; background-color:white; width:30px; height:6px; top:20px;"></div>
</div>
<div id="top_box_phone_navbox" class="top_box_phone_navbox" style="width:100%; height:390px; background-color:#2a2a2a; position:absolute; left:0px; top:50px; display:none;">
<a class="top_box_phone_nav top_box_nav">首页</a>
<a class="top_box_phone_nav top_box_nav">全部资源</a>
<a class="top_box_phone_nav top_box_nav">模型</a>
<a class="top_box_phone_nav top_box_nav">场景</a>
<a class="top_box_phone_nav top_box_nav">代码</a>
<a class="top_box_phone_nav top_box_nav">登陆</a>
<a class="top_box_phone_nav top_box_nav">注册</a>
</div>
</div>
</div>
<style>
*{
margin:0px; padding:0px;
}
/*top部分*/
@media screen and (min-width:800px) {
.top_box {
display: block;
}
.top_box_phone {
display: none;
}
}
@media screen and (max-width:800px) {
.top_box {
display: none;
}
.top_box_phone {
display: block;
}
}
/*PC端网页布局*/
.top {
margin: 0px auto; height: 50px; line-height: 50px; background-color: #2a2a2a;
}
.top_box {
width: 960px; margin: 0px auto;
}
.top_box_title {
color: white; cursor: pointer; margin-right: 20px;
}
.top_box_nav {
color: #b2b2b2; margin-right: 10px; cursor: pointer;
}
.top_box_nav:hover {
color: white;
}
/*Phone端网页布局*/
.top_box_phone_nav {
display: block; margin-left: 20px;
}
/*footer部分*/
.footer{
margin:0px auto; height:50px; line-height:50px; background-color:#2a2a2a;
}
.footer p{
text-align:center; color:#b2b2b2;
}
.footer a{
cursor:pointer;
}
.footer a:hover{
color:white;
}
</style>
