移动端也能兼容的web页面制作2:导航栏、背景图片设置
[ 导读 ]
MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性。先给大家看下演示 demo 的运行,后面将围绕项目的制作过程,依次来展示导航栏、图片轮播图、表格、数据库交互等各方面的详细实现过程。
MDBootstrap 导航栏、背景图片设置
- 效果图
- 第一章:背景图片设置
- ① 放置图片
- ② 引入图片
- ③ 图片蒙层
- 第二章:导航栏设置
- ① 基础导航栏添加
- ② 下拉菜单
- ③ 菜单跳转
- 第三章:其它
- ① 源代码
- ② 高亮语法设置:vetur插件安装
[ 系列文章 ]
移动端也能兼容的 web 页面制作1:MDBootstrap 演示 Demo 运行演示
[ 文章推荐 ]
Python 地图篇 - 使用 pyecharts 绘制世界地图、中国地图、省级地图、市级地图实例详解
效果图
先给大家看下移动端和 web 端效果对比图。
这是 web 端的效果展示图。
这个是移动端的展示图。
第一章:背景图片设置
① 放置图片
首先在静态资源文件夹里放入两张背景图片。
② 引入图片
可以引用本地文件,也可以引用网上的图片。
我们这里使用 Home.vue 文件,使用前最好复制下做个备份。
可以看到文字部分是看不清的,这里我们加个蒙层来解决问题,还可以提高背景的视觉效果。
③ 图片蒙层
这个是 rgba-purple-light
亮紫色的特效。
可以看到效果比之前好了很多。
第二章:导航栏设置
① 基础导航栏添加
因为导航栏一直要存在页面中,所以我设置了将导航栏添加到 App.vue 里,和 <router-view/>
并列在其上面,后面主要内容都会在导航栏的下面进行切换。
因为有深色背景,这里用 dark 主题,字体是白色的,如果背景为浅色,可以用 light 主题,字体为黑色。
<mdb-navbar position="top" dark transparent scrolling><mdb-navbar-brand href="#">小蓝枣演示</mdb-navbar-brand><mdb-navbar-toggler><mdb-navbar-nav><mdb-nav-item href="#" waves-fixed>主页</mdb-nav-item><mdb-nav-item href="#" waves-fixed>工具</mdb-nav-item><mdb-nav-item href="#" waves-fixed>报表</mdb-nav-item></mdb-navbar-nav><form><mdb-input type="text" class="text-white" placeholder="搜索" aria-label="搜索" label navInputwaves waves-fixed /></form></mdb-navbar-toggler>
</mdb-navbar>
这个是导航栏的效果,还包含个搜索项。
这个是手机端展开的效果。
② 下拉菜单
添加个下拉菜单的效果,可以将一些小的菜单合并到里面,保持整体的简洁美观。
<mdb-dropdown tag="li" class="nav-item"><mdb-dropdown-toggle slot="toggle" tag="a" navLink waves-fixed>其它</mdb-dropdown-toggle><mdb-dropdown-menu><mdb-dropdown-item>工作</mdb-dropdown-item><mdb-dropdown-item>学习</mdb-dropdown-item><div class="dropdown-divider"></div><mdb-dropdown-item>交流</mdb-dropdown-item></mdb-dropdown-menu>
</mdb-dropdown>
其中 <div class="dropdown-divider"></div>
是个分割线的效果
③ 菜单跳转
首先在 router.js 里引入我新增的组件 Blog.vue,这个相当于一个新的页面。
然后菜单的属性里,加个 to="blog"
就能指向对应的连接。
效果如下:
第三章:其它
① 源代码
这个是 Home.vue 的代码。
<template><div><div style="height: 110vh"><div class="view intro-2" style="height: 100vh"><div class="full-bg-img"><div class="mask rgba-purple-light"><div class="container flex-center"><div class="white-text text-center"><h2>Welcome to home</h2><h4>欢迎回家</h4><p>乐观的心态看待世界,世间处处是快乐;以平静的心态看待事物,你会看到事物的两面,其实,时时刻刻我们都在分享快乐,有时,只是因为你没有细心品味罢了。</p></div></div></div></div></div><p class="m-5">我小时候,身为军人的父亲长年在外地工作,于是抚养我的重任便落到母亲身上。四岁那年的一个夏夜,一向身体棒得像只小老虎的我,偏偏因热伤风和盗汗引发了高烧,浑身烫得像个火球一般。母亲吓坏了,连忙用自行车载着我,拼命往医院赶。从医院返回时,已经是子夜时分。静谧的小镇街道早已一片漆黑,地面上却依旧像蒸笼一般湿热。离我家还有十来分钟路程,而且还要经过一个百余米长、坑坑洼洼的下坡路。我家在城乡接合部,当时周围没有路灯。鼻腔里满是湿润的泥土芬芳,耳畔伴着路两侧田野里蛐蛐和田鸡此起彼伏的叫声,眼前不时掠过一两只萤火虫和蝙蝠。闷热的夜幕中,却不见往昔月亮那熟悉的身影,母亲只能借着零散微弱的星光,慢慢地骑着车。在老家,年轻的母亲因为胆子大而出名,可我的小手却依稀触摸到她胳膊光洁皮肤上冒出罕见的鸡皮疙瘩。她一向车技不错,可当时自行车居然连续摇晃起来。我早已吓得缩成一团,见母亲这样,更是浑身哆嗦着,只得紧紧搂住她。转眼就到那段下坡路了,母亲准备下车推着走。这时,身后突然打来两道近光灯,虽然不是很刺眼明亮,却也把眼前黑漆漆坑坑洼洼有些积水的路面,顿时照得亮堂清晰起来。</p><img alt="a duck" src="../assets/duck.jpg"><HelloWorld msg="Welcome to Your MDB Vue.js App"/><Blog/></div></div>
</template><script>import HelloWorld from '@/components/HelloWorld.vue';export default {name: "Home",components: {HelloWorld}};
</script><style scoped>.view {background: url("../assets/background1.jpg") no-repeat center center;background-size: cover;height: 100%;}
</style>
这个是 App.vue 的代码。
<template><div id="app"><mdb-navbar position="top" dark transparent scrolling><mdb-navbar-brand href="#">小蓝枣演示</mdb-navbar-brand><mdb-navbar-toggler><mdb-navbar-nav><mdb-nav-item to="/" waves-fixed>主页</mdb-nav-item><mdb-nav-item to="blog" waves-fixed>工具</mdb-nav-item><mdb-nav-item href="#" waves-fixed>报表</mdb-nav-item><mdb-dropdown tag="li" class="nav-item"><mdb-dropdown-toggle slot="toggle" tag="a" navLink waves-fixed>其它</mdb-dropdown-toggle><mdb-dropdown-menu><mdb-dropdown-item>工作</mdb-dropdown-item><mdb-dropdown-item>学习</mdb-dropdown-item><div class="dropdown-divider"></div><mdb-dropdown-item>交流</mdb-dropdown-item></mdb-dropdown-menu></mdb-dropdown></mdb-navbar-nav><form><mdb-input type="text" class="text-white" placeholder="搜索" aria-label="搜索" label navInputwaves waves-fixed /></form></mdb-navbar-toggler></mdb-navbar><router-view/></div>
</template><script>import {mdbNavbar,mdbNavItem,mdbNavbarNav,mdbNavbarToggler,mdbInput,mdbNavbarBrand,mdbDropdown,mdbDropdownItem,mdbDropdownMenu,mdbDropdownToggle} from "mdbvue";export default {name: "Home",components: {mdbNavbar,mdbNavItem,mdbNavbarNav,mdbNavbarToggler,mdbInput,mdbNavbarBrand,mdbDropdown,mdbDropdownItem,mdbDropdownMenu,mdbDropdownToggle}};
</script><style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');#app {font-family: 'Roboto', Helvetica, Arial, sans-serif;margin-top: 0px;text-align: center;color: #2c3e50;
}
</style><style scoped>.navbar .dropdown-menu a:hover {color: inherit !important;}</style>
② 高亮语法设置:vetur插件安装
通过拓展商店搜索 @id:octref.vetur
可以搜索到 vetur 插件。
通过菜单如图所示菜单或快捷键即可打开拓展商店。
回到程序里看已经有高亮语法了。
喜欢的点个赞❤吧!
移动端也能兼容的web页面制作2:导航栏、背景图片设置相关推荐
- 移动端也能兼容的web页面制作1:MDBootstrap演示Demo运行演示
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
- 页面顶部导航栏随着滚轮转动,页面下滑,导航栏背景颜色,透明度,字体,样式等改变
一.大盒子app里有一个heades的导航栏,通过:style="headStyle"来改变它的颜色等样式,需要改变的,不要在style样式里定义,否则代码会执行style里定义的 ...
- 微信小程序与web页面制作的区别
前言 最近在做一个微信小程序版的个人博客,本来我还有点胆颤,毕竟也没正儿八经的去学一下,不过我之前接触过,而且web方面(网页制作)的基础还可以,所以斗胆就试一试咯,到今天为止,微信小程序页面终于算是 ...
- 1+X初级 Web页面制作基础
第一篇 Web页面制作基础 排版不太好,如果要Word版本,请添加群聊获取 第一章 HTML标签介绍 •HTML 标签是由<>包围的关键词,例: •HTML 标签通常成对出现,分为标签开头 ...
- html背景自动换,html页面换皮肤颜色、背景图片(更换页面背景,常驻缓存)刷新保存...
利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的.通过更改,link标签里的href属性,加载不同的样式文件.这里还用到了一款JQ ...
- vue中如何在登陆页面不显示导航栏
导航栏作为系统的通用组件,我并不想让其显示在登陆页面中,因此可以按照以下方法实现 1.将通用组件如导航栏等和<router-view />放在一起 app.vue <div>& ...
- ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后,期望系统导航栏背景色为白色,但是导航栏背景变成黑色问题. 经过多次分析是因为底层大背景被设置了默认颜色引起,把它设置成对应白色就可以了: sel ...
- vue组件中设置背景图片,随着页面高度的增加,背景图片能够不断延伸铺满屏幕
在做项目的时候,想要实现背景图片将整个页面铺满,等内容变多,高度超过屏幕高度的时候,背景图片仍然能够完全铺满. 第一种方式:(不是想要的) 第一种情况就是最外层设置一个div盒子,宽度100%,高度1 ...
- 移动端h5页面软键盘弹出后 背景图片被顶上去
移动端h5页面在软键盘弹出后,body的高度被压缩了,就导致原本高度100%的背景图被顶上去一截,需要把div的高度强行设回100%才能解决这个问题 <div class="app&q ...
最新文章
- R语言可视化包ggplot2包移除可视化图形的轴标签(刻度及其对应数值)实战(Remove Axis Labels)
- MVC架构 在Android中的使用
- 数字图像处理实验(5):Proj03-01 ~ Proj03-06
- 相对熵(relative entropy或 Kullback-Leibler divergence,KL距离)的java实现(三)
- npm 下载 依赖包时出错的解决方式
- Bytom的链式交易和花费未确认的交易
- 122.买卖股票的最佳时机II
- 电脑运行很慢怎么办_为什么电脑用久了,就算重新安装系统也会变得很慢?
- Fedora:使用Fedora 28在Firefox上启用h264视频(搜狐/优酷视频)
- linux下word转pdf
- WhatsApp Botim 筛号,筛选群发消息,WhatsApp、Botim协议
- Linux 文件压缩和解压命令 (压缩、解压)
- Matlab 直方图均衡化
- 牛牛的Link Power II
- 赚享客系统模式app技术开发
- 人脸图像的几何归一化和灰度归一化
- 信道编码之设计线性分组码
- 《JSP网站开发技术》教学大纲
- 华为路由器 IPSec VPN 配置
- 《调色师手册:电影和视频调色专业技法(第2版)》——导读