移动端也能兼容的web页面制作2:导航栏、背景图片设置(上)

简介: 移动端也能兼容的web页面制作2:导航栏、背景图片设置

效果图

先给大家看下移动端和 web 端效果对比图。

d8a31aaaa7d84e1999beff023c020e7a.png

这是 web 端的效果展示图。

5a512ac382e842de8703f1a521e18837.png

这个是移动端的展示图。

117966f5388547bcad7936e7ae38a4a3.png


第一章:背景图片设置

① 放置图片

首先在静态资源文件夹里放入两张背景图片。

5fdbfefe17b34babbadde3453d73aad8.png

95b2dfa7814548729773c3e965d1b213.png


② 引入图片

可以引用本地文件,也可以引用网上的图片。

我们这里使用 Home.vue 文件,使用前最好复制下做个备份。

6366445cf7de44789f5bb9c54d5ebac4.png

可以看到文字部分是看不清的,这里我们加个蒙层来解决问题,还可以提高背景的视觉效果。

945c09c824cb44aab6aba073297b9df8.png


③ 图片蒙层


这个是 rgba-purple-light 亮紫色的特效。

e3fe993bc4c94fae9db684bb8a94334d.png

可以看到效果比之前好了很多。

2e620f3534c9407293ffe39e43917d7e.png


第二章:导航栏设置


① 基础导航栏添加


因为导航栏一直要存在页面中,所以我设置了将导航栏添加到 App.vue 里,和 <router-view/> 并列在其上面,后面主要内容都会在导航栏的下面进行切换。

4aed52681d734247b1f144b60dbfdb5a.png

因为有深色背景,这里用 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 navInput
        waves waves-fixed />
    </form>
  </mdb-navbar-toggler>
</mdb-navbar>

这个是导航栏的效果,还包含个搜索项。

60cced7ca691442794f18ba683f12174.png

这个是手机端展开的效果。

117966f5388547bcad7936e7ae38a4a3.png


② 下拉菜单


添加个下拉菜单的效果,可以将一些小的菜单合并到里面,保持整体的简洁美观。

6b64b38fb77c464293c68cb2983fc0be.png

<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> 是个分割线的效果

00044726d09d416d8400a5dea006ec26.png


目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
119 2
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文
|
5月前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术
|
5月前
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
295 3
|
6月前
|
数据处理 开发者 UED
FastAPI 的模板引擎简直太神奇啦!这就是构建动态 Web 页面的终极秘籍,快来一探究竟!
【8月更文挑战第31天】FastAPI 是一款高性能异步 Web 框架,可通过集成模板引擎(如 Jinja2 或 Mako)实现动态页面渲染。使用模板引擎可分离页面结构与数据,简化代码并提升可维护性。此外,它还提供丰富的语法支持,如循环和条件判断,从而增强页面展示效果及开发效率。通过简单的配置步骤,即可在 FastAPI 中启用模板引擎,显著改善用户体验。
578 1
|
2月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
3月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
55 7
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2
|
3月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
159 62

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55