可以把复杂的类型做命名。例如接口中没有定义年龄，在定义person的时候 如果写了age那么就会报错。因为我们接口中并没有定义年龄。

可选属性，只读属性

新的布局方式


下面这里menu设置类型为TopMenu的接口，那么后面的热门、男装、手机 就报错了。

输入了title属性后，还缺少link的属性。


想让link属性可选。link属性后面加问号就可以了。

设置link属性为只读的

因为link设置了为只读的，所以下面定义的test方法里面给link属性赋值就会报错了。

接口的函数定义

参数都是number类型的。返回的类型也是number类型的

es6箭头函数的写法

相当于下面这种方式的简写，省略了大括号和return

只有一行内容可以简写成这种写法

接口-字典类型

定义索引的类型是字符类型，且索引值也是字符类型。

定义字典类型的时候，如果复制了数字1 那么就会报错了。因为规定的是string类型的

改成string类型就没问题了

输出a的值看一下

前端需要改一下

把test改成constructor构造函数

默认输出了字典的值

这里为什么有绿线呢？

其实是可以直接用点的形式，这种写法

把josn的数据 复制过来。

我们希望菜单是不折行，在上面滚动的。外层用flex布局

按照行布局

每个item折行了。


column布局

row-reverse

倒着排列。人们拍在了最后。

竖着，倒着


默认就是横向的 ，不需要加

每个item折行的问题

避免折行的属性。

在手机上看的话，这里行下面就会有个滚动条出现。

这个滚动台实际上，我们是不需要的

这样他在真机上就没有滚动条了，在浏览器管是看不出来的

真机调试


‘

结束

2-4 【接口Interface Flex布局】让顶部导航滚动的更多相关文章

  1. 移动Web开发-WebApp（flex布局+移动端导航案例）

    实际开发中的像素:css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2缩放改变的是css像素大小PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/ ...

  2. CSS3弹性伸缩布局（二）——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  3. Flex布局新旧混合写法详解（兼容微信）

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  4. Go语言学习笔记（四）结构体struct & 接口Interface & 反射

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套: go中的struc ...

  5. flex布局justify-content属性和align-items属性设置

    前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...

  6. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  7. list之flex布局写法

    list之flex布局写法 移动端实际场景中经常会遇到将header置顶,然后下面list需要滚动的情况,通常的做法会是将header使用fixed的方式固定到顶部,然后list主体相对于header ...

  8. Flex布局和Bootstrap布局两者的比较

    在Bootstrap中采用12栅格的布局,12份随意分配,但是不能解决5等分,7等分的问题.所以flex布局来协助. bootstrap的布局方式 <div class="row&qu ...

  9. grid - 它和flex布局有何区别?

    Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定.调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的.(这里我们称为Flex). Flex布局 ...

随机推荐

  1. 在vps中搭建ftp服务器

    1. 服务器配置 首先当然是更新源列表并安装 vsftpd. sudo apt-get update sudo apt-get install vsftpd 安装完成后我们需要对服务器进行进一步的配置 ...

  2. video基础介绍&封装react-video基础组件，ES6

    好几个月没有写博客了,人都赖了,今天抽了一点时间把最近项目react中video整理了一下(感觉这个以后用的活比较多) 1.前三部部分详细归纳了video的基础知识,属性和功能: 2.第四部分是封装了 ...

  3. 51nod 1254 最大子段和 V2

    N个整数组成的序列a[1],a[2],a[3],…,a[n],你可以对数组中的一对元素进行交换,并且交换后求a[1]至a[n]的最大子段和,所能得到的结果是所有交换中最大的.当所给的整数均为负数时和为 ...

  4. django-用户中心订单页面

    提交订单页面place_order.html,创建订单成功后跳转到用户订单页面 {% block bottomfiles %} <script type="text/javascrip ...

  5. Vue.js not detected

    安装vue devtools工具,在chrome中一直是灰色,title是Vue.js not detected ① F12关闭开发者模式 ② 刷新 ③ 然后再按F12就好了 网上看到的,居然真的有用 ...

  6. 极限挑战----3小时完成OA系统(失败)

    今天老师要求三小时把OA系统做出了,之前一点也没接触过,对其不了解,而且这几天一直把时间放在六级了,对Web重视有点少. 最终我只做了登录和校验,可以显示富文本框,但不能提交数据库. 总之还有还多没有 ...

  7. php Web 项目的文件/文件夹上传下载

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  8. 2019.12.09 java循环（while）

    class Demo04 { public static void main(String[] args) { int sum=0; int i=1; while(i<=100){ //sum ...

  9. 集成omnibus-ctl 开发一个专业的软件包管理工具

    前边有转发过来自chef 团队的一篇omnibus-ctl 介绍文章,以下尝试进行项目试用 就是简单的集成,没有多少复杂的操作 环境准备 ruby ruby 使用2.6.3 使用 rbenv 安装,可 ...

  10. linux命令之------Cat命令

    Cat命令 作用:cat命令用于连接文件并打印,查看文件内容: -n或--number:由1开始对所有输出的行数编号: -b或--number-nonblank:和-n相似,只不过对于空白行不做编号: ...