开发者学堂课程【移动 Web 前端开发:导航条-响应式】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8455
导航条-响应式
创建响应式导航条
导航栏
<
nav class=”navbar wjs
_nav
”>
<
ul class=”nav navbar-nav navbar-right hidden-sm”>
.
wjs_nav .navbar-toggle {
border-color:#ddd;
m
argin-top:23px;
}
基本布局
Company NamHomeSomethingotherAboutContact
@media all and (max-width: 768px) {
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul li {
float: none;
border-bottom: 1px solid lightgray;
}
}
.nav-responsive {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 50px;
width: 50px;
}
@media all and (max-width: 768px) {
.nav-responsive {
display: block;
}