zoukankan      html  css  js  c++  java
  • 122 携程网案例flex布局第三部分

    image

    1.这里我们要分析一下,这些边距怎么做,加在那个类上面。
    首先这里三个颜色的导航,可以用nav抱起来。然后可以给中间的div加一个上下边距,或者给第一个或者第二个加一个下边距。
    image

    2.这里的border-radius,上下的是左右上和左右下有的,中间一个是没有的。
    你给nav一个border-radius,是不是就可了
    image
    image

    3.第一图,椭圆中的边距要怎么实心呢。这里注意一个点,nav-common这个累是没有背景色的,所以可以用margin来做白边距。但是
    nav-common-item是有的,所以还是要用border来做边距好一些。给前两个加,怎么写,-n+2(记住了)
    image

    image

    问题等下,
    现在我们可以考虑先做后两个,上下都是a的这个
    image
    image
    image
    边距,第一个a有下border即可
    image
    image
    错了,为何。猜猜应该是我a中文本居中不是用的text-algin,二十在父级用algin-items导致的,果然
    image
    换了好了。
    在家一个文字阴影:(水平1px,垂直1px,然后颜色rgba给一个;立体效果可增强)
    image

    现在是这样了:
    image
    这里有个细节,你会发现第一个nav-common-item 的第一a下面也有一个border,导致这里白边宽了。这是不对的,需要去掉。
    image

    4.左边酒店+图片,上一篇写了吧,上下的经典布局。几步走:主轴设y,然后侧周上居中。对吧
    image
    image
    素材大小不符,所以多切了,正常。但是现在要背景图靠底端对其,水平居中,这样鞋以为可
    image
    好吧,不行。这种对精灵图无效,要记得
    image
    换图,渐变加上
    image

    图不好看,但是成了

    问题:为什么样式不生效,刚这里整个写错了
    image
    image
    为什么这里nth不生效呢,因为这里三块div没有一个共同的父容器包裹着,body应该是不算的。
    div和nav区别:
    image

    一日之计在于晨
  • 相关阅读:
    mysql总结
    ContOS7 安装 java1.8
    查找
    排序
    线程通信(交替执行)
    死锁(实现)
    Rank Scores
    OpenMP
    聚类的数据量过大的问题
    编译GraphLab出错
  • 原文地址:https://www.cnblogs.com/1998Archer/p/15636089.html
Copyright © 2011-2022 走看看