导航条-响应式|学习笔记

简介: 快速学习 导航条-响应式

开发者学堂课程【移动 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;

margin-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;

}

相关文章
|
8月前
uniapp Vue3 面包屑导航 带动态样式
uniapp Vue3 面包屑导航 带动态样式
153 1
|
Web App开发 存储 JSON
Vue 学习笔记三、触摸事件、轮播图
Vue 学习笔记三、触摸事件、轮播图
108 0
|
JavaScript
vue可拖拽悬浮按钮组件
vue封装一个可拖拽,贴边吸附的悬浮按钮组件。
2047 0
|
容器
ivx页面(3)轮播图的动态数据绑定实现以及轮播图点击跳转页面
ivx页面(3)轮播图的动态数据绑定实现以及轮播图点击跳转页面
245 0
|
JavaScript
vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)
vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)
|
JavaScript 前端开发 开发者
10行代码!实现vue导航条动态效果
每天一个知识点:【scroll事件】 在网页中滚动页面时触发的事件
257 0
uniapp使用组件显示轮播图
uniapp使用组件显示轮播图
80 0
|
编解码
响应式和自适应布局
响应式和自适应布局
291 0
|
前端开发
react项目实战学习笔记-学习38-滚动条样式
react项目实战学习笔记-学习38-滚动条样式
138 0
|
开发框架 前端开发 JavaScript
Bootstrap响应式前端框架笔记一——强大的栅格布局
Bootstrap响应式前端框架笔记一——强大的栅格布局
290 0
Bootstrap响应式前端框架笔记一——强大的栅格布局