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

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

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

}

相关文章
|
6月前
uniapp Vue3 面包屑导航 带动态样式
uniapp Vue3 面包屑导航 带动态样式
138 1
|
6月前
|
JavaScript 前端开发
原生js做轮播图
原生js做轮播图
28 0
|
Web App开发 存储 JSON
Vue 学习笔记三、触摸事件、轮播图
Vue 学习笔记三、触摸事件、轮播图
103 0
|
24天前
实现响应式选项卡svg 文本轮播图特效
这是一个响应式选项卡svg 文本轮播图特效,该组件以swiper为基础,用的是swiper双向控制,图标条用的是阿里巴巴个人项目图标库。非常实用
23 0
|
3月前
|
前端开发 JavaScript
Vue2瀑布流图片展示(Waterfall)
这篇文章介绍了如何在Vue 3框架中实现瀑布流图片展示组件,提供了两种实现方式:一种使用CSS的`column-count`和`column-gap`属性,另一种使用JavaScript计算图片位置,以实现图片在多列中的动态分布。
257 1
Vue2瀑布流图片展示(Waterfall)
|
JavaScript
原生js实现轮播图
vue2走马灯有官方bug无法解决,为此用原生js实现了一个轮播图
161 4
原生js实现轮播图
|
前端开发
超简单的轮播图动画效果 HTML+Css
超简单的轮播图动画效果 HTML+Css
|
JavaScript 前端开发 开发者
10行代码!实现vue导航条动态效果
每天一个知识点:【scroll事件】 在网页中滚动页面时触发的事件
234 0
10行代码!实现vue导航条动态效果
|
前端开发
HTML+CSS实现——响应式卡片页面
本篇文章,主要讲解一下如何创建一个响应式卡片页面
613 0
HTML+CSS实现——响应式卡片页面
|
JavaScript 前端开发 API
zepto-使用(轮播图) |学习笔记
快速学习 zepto-使用(轮播图)
336 0
zepto-使用(轮播图)  |学习笔记