零基础学做网站培训介绍

当前位置:

Flex布局制作菜单导航

以下为学做网站论坛关于“Flex布局制作菜单导航”讲解视频教程。

制作菜单导航要求是每行5个栏目,总共二行,这就需要使用Flex布局制作菜单导航。

课程中使用的属性:

  • font-size:字体大小
  • margin:外边距
  • padding:内边距
  • text-align:center;

WXML代码:


<view class="navAll">
<view class="navLi">
<view class="navImg">
<image src="../../images/nav/nav01.webp"></image>
</view>
<view class="navText">
淘宝超市
</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;}

发表评论

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

相关教程

  • Flex布局制作菜单导航 图文教程 (1191 次浏览)
    制作菜单导航要求是每行5个栏目,总共二行,这就需要使用Flex布局制作菜单导航。课程中使用的属性: font-size:字体大小 margin:外边距
  • 微信小程序Flex布局属性有以下:justify-content:设置弹性盒子元素在主轴(横轴)方向上的对齐方式它有以下的几个值: flex-start默
  • flex布局是弹性盒模型,可以轻松的包集“自适应”浏览器窗的流动布局。它是csS3中为display新添加的值类型。用法:display: flex; 定义一个flex
  • CSS网页布局中字体样式 图文教程 (111812 次浏览)
    在网页制作时,我们需要控制网页中字体的大小,颜色,粗细等,通过情况下,我们会使用以下的CSS样式去控制这个字体的样式:字体的大小:font-size
  • 问:老师,我在divcss制作一个网页布局时div总是跑出来,怎么解决,代码如下:[cce]<div id="zhongjian"><div class="chebian"&
  • Dreamweaver跳转菜单制作 视频教程 (1119282 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片