跟高老师学习Web前端之53.-display的flex属性制作菜单

虔诚

       雾霾天气的原因,小年夜没有像往年一样噼里啪啦的爆竹声,每天上班、下班亦没有什么特别的感觉,大伙儿都在感慨一句:年味太淡了,一点感觉也没有。今天周会上主管宣导关于16年的年终奖核算事宜,终于有点过年的感觉啦,期盼岁末,哈哈!

       今天学习了如何用display的flex属性制作菜单。

代码书写1
代码书写2

       list-style:默认无序列表前面的黑点,当取值为none时,黑点不显示。

       flex-direction,表示元素在主轴方向以何种方式排列。row值为默认值,设定为元素靠左的一个排列。

       text-decoration:表示文本下划线,取值为none时,a标签的下划线取消。

页面展示

       当flex-direction取值row-reverse时,元素内容和顺序都反向,如下:

代码书写
页面展示

      当flex-direction取值column时,元素呈垂直排列,如下:

代码书写
页面展示

       当flex-direction取值column-reverse时,元素内容和顺序都呈垂直反向排列,如下:

代码书写
页面展示

      晚安!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,507评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,604评论 0 26
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,558评论 0 1
  • 有些事情是必须交流交流的,不应该藏在心底。有些事情是宁愿藏在心底,也不愿意说出来交流交流的。或许很多事情都和某个人...
    李一十八阅读 287评论 0 0