零基础学做网站培训介绍

当前位置:

微信小程序导航菜单制作方法

以下为学做网站论坛关于“微信小程序导航菜单制作方法”讲解视频教程。

微信小程序导航菜单制作比较简单就是通过图片与文字组成一个菜单项。

  • margin 外边距
  • padding 内边距

微信小程序导航菜单制作WXML代码:


<!-- 导航 -->
<view class="navAll">
<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav01.webp"></image>
</view>
<view class="navText">
淘宝超市
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav02.webp"></image>
</view>
<view class="navText">
数码电器
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav03.webp"></image>
</view>
<view class="navText">
淘宝服饰
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav04.webp"></image>
</view>
<view class="navText">
淘宝生鲜
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav05.webp"></image>
</view>
<view class="navText">
淘宝到家
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav06.webp"></image>
</view>
<view class="navText">
充值缴费
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav07.webp"></image>
</view>
<view class="navText">
9.9元拼
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav08.webp"></image>
</view>
<view class="navText">
淘宝领券
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav09.webp"></image>
</view>
<view class="navText">
淘宝金贴
</view>
</view>

<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav10.webp"></image>
</view>
<view class="navText">
淘宝会员
</view>
</view>

</view>

微信小程序导航菜单制作WXSS样式代码:


/* 菜单样式 */
.navAll{display: flex;justify-content: space-around;flex-wrap: wrap;background:#fff;padding:20px 0;}
.navLi{width:20%;font-size: 14px;text-align: center;margin-bottom: 10px;}
.navImg image{width:40px;height:40px;margin-bottom:5px;}

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如何注册微信小程序 图文教程 (110325 次浏览)
    要发布自己的微信小程序,首先需要在微信公众平台上注册微信小程序。注册步骤 登录“微信公众平台”,如果还没有账号,可以先注册一个。登录地址
  • 微信小程序开发授权 图文教程 (111796 次浏览)
    我们在“微信公众平台”注册好了小程序之后,接下来的工作就是开发微信小程序了。开发微信小程序前,我们需要进行授权。方法/步骤 点击“细致微信
  • 微信小程序制作步骤 图文教程 (111447 次浏览)
    上一步,我们完成了微信小程序的授权。这一步,就是使用我们购买的“微信小程序细致制作工具”,进行小程序的制作了。方法/步骤 点击左侧菜单的“
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • Dreamweaver跳转菜单制作 视频教程 (1119268 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想