zoukankan      html  css  js  c++  java
  • 布局总结七:左右两端对齐

    效果图

    1.html布局代码

            <div class="header_top">
                <div class="container">
                    <div class="con_left">
                        <a href="javascript:;">首页</a>
                        <a href="javascript:;">MIUI</a>
                        <a href="javascript:;">云服务</a>
                        <a href="javascript:;">协议规则</a>
                    </div>
    
                    <div class="con_right">
                        <a href="javascript:;">登录</a>
                        <a href="javascript:;">注册</a>
                        <a href="javascript:;" class="cart_a">
                            <span class="icon"></span>
                            <span class="cart">购物车</span>
                            <span is="cartcount">(0)</span>
                        </a>
                    </div>
                </div>
            </div>

    2.css代码

        .header_top{
            background: $colorB;
            height: 39px;
            line-height: 39px;
            .container{
                @include flex(space-between, center);
                a{
                    display: inline-block;
                    color: #B0B0B0;
                    margin-right: 17px;
                    span{
                        display: inline-block;
                        vertical-align: middle;
                    }
                    .icon{
                        @include imgIcon(16px, 12px, "/imgs/icon-cart.png");
                        margin-right: 2px;
                        margin-top: -2.5px;
                    }
                }
                a:hover{
                    color: #fff;
                }
                a.cart_a{
                    margin-right: 0;
                    padding: 0 20px;
                    background: $colorC;
                }
            }
        }

    其中imgIcon函数和flex函数作为mixin引入的,如下

    @mixin flex($justify:center,$align:center){
        display:flex;
        justify-content:$justify;
        align-items: $align;
    }
    
    @mixin imgIcon($w:0,$h:0,$url:'',$position:center,$size:cover){
        display:inline-block;
        width:$w;
        height:$h;
        background-image:url($url);
        background-repeat:no-repeat;
        background-position:$position;
        background-size:$size;
    }
  • 相关阅读:
    屏幕截图(带光标)
    warning LNK4070的解决办法
    2015-08-10
    wmic的用法
    2015-03-12
    MFC Button控件自绘
    MFC窗口创建、销毁消息流程
    DDX_Control、SubclassWindow和SubclassDlgItem
    css animation fade in
    kohana reading session data error(session_start)引起的错误
  • 原文地址:https://www.cnblogs.com/pwindy/p/15190834.html
Copyright © 2011-2022 走看看