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

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

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

}

相关文章
|
4月前
uniapp Vue3 面包屑导航 带动态样式
uniapp Vue3 面包屑导航 带动态样式
116 1
|
12月前
|
Web App开发 存储 JSON
Vue 学习笔记三、触摸事件、轮播图
Vue 学习笔记三、触摸事件、轮播图
91 0
|
JavaScript
vue可拖拽悬浮按钮组件
vue封装一个可拖拽,贴边吸附的悬浮按钮组件。
1995 0
vue可拖拽悬浮按钮组件
|
14天前
|
前端开发 JavaScript
Vue2瀑布流图片展示(Waterfall)
这篇文章介绍了如何在Vue 3框架中实现瀑布流图片展示组件,提供了两种实现方式:一种使用CSS的`column-count`和`column-gap`属性,另一种使用JavaScript计算图片位置,以实现图片在多列中的动态分布。
Vue2瀑布流图片展示(Waterfall)
|
2月前
|
JavaScript
vue拖拽 —— vuedraggable 表格拖拽行
vue拖拽 —— vuedraggable 表格拖拽行
162 1
|
12月前
|
JavaScript
vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)
vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)
|
JavaScript 前端开发 开发者
10行代码!实现vue导航条动态效果
每天一个知识点:【scroll事件】 在网页中滚动页面时触发的事件
217 0
10行代码!实现vue导航条动态效果
|
前端开发
HTML+CSS实现——响应式卡片页面
本篇文章,主要讲解一下如何创建一个响应式卡片页面
569 0
HTML+CSS实现——响应式卡片页面
|
JavaScript 前端开发
Vue使用ElementUI中的面包屑,修改面包屑的字体颜色
Vue使用ElementUI中的面包屑,修改面包屑的字体颜色
583 0
Vue使用ElementUI中的面包屑,修改面包屑的字体颜色
|
JavaScript 前端开发 程序员
Vue实现的5款实用美观的轮播图组件
Vue实现的5款实用美观的轮播图组件
1458 0
Vue实现的5款实用美观的轮播图组件