CSS布局

Cheryl

CSS实现居中布局

方式一

# parent
text-align: center;
# child
display: inline-block;

方式二(推荐)

display: block;
margin: 0 auto;

方式一

# parent
position: relative;
# child
position: absolute;
left: 50%;
transform: translateX(-50%);

垂直居中

(推荐)

display: flex;
align-items: center;

(推荐)

display: table-cell;
vertical-align: middle;
# parent
position: relative;
# child
position: absolute;
top: 50%;
transform: translate(-50%);

水平和竖直方向都实现居中

    display: flex;
    justify-content: center;
    align-items: center;

两列布局

针对定宽自适应

margin-left

        <style>
            #parent {
                width: 300px; height: 300px;
            }
            .left,.right {
                height: 200px;
            }
            .left {
                /*定宽*/
                width: 100px;
                float: left;
                background-color: #A6E1EC;
            }
            .right {
                margin-left: 100px;
                background-color: #FAF2CC;
                border: 1px #000000 solid;
            }
        </style>
    </head>
    <body>
        <p>index</p>
        <div id="parent">
            <div class="left">
                左
            </div>
            <div class="right_fix">
                <div class="right">
                    右
                </div>
            </div>
        </div>
    </body>

margin-left做优化

        <style>
            #parent {
                width: 300px; height: 300px;
            }
            .left,.right {
                height: 200px;
            }
            .left {
                /*定宽*/
                width: 100px;
                float: left;
                position: relative;
                
                background-color: #A6E1EC;
            }
            .right_fix {
                float: right;
                width: 100%;
                margin-left: -100px;
                
                background-color: #DCA7A7;
            }
            .right {
                border: 1px #000000 solid;
            }
        </style>
    </head>
    <body>
        <p>index</p>
        <div id="parent">
            <div class="left">
                左
            </div>
            <div class="right_fix">
                <div class="right">
                    右
                </div>
            </div>
        </div>
    </body>

BFC模式

只须使用overflow就可开启BFC模式

        <style>
            div {
                height: 200px;
            }
            #left {
                width: 400px;
                background-color: #C9302C;
                float: left;
            }
            #right {
                background-color: #CCCCCC;
                /* 开启BFC模式 */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <p>index</p>
        <div id="left">
            左
        </div>
        <div id="right">
            右
        </div>
    </body>
        <style>
            div {
                height: 200px;
                display: table-cell;
            }
            #parent {
                display: table;
                table-layout: fixed;
                width: 100%;
            }
            #left {
                width: 200px;
                background-color: #66AFE9;
            }
            #right {
                background-color: #008000;
            }
        </style>
    </head>
    <body>
        <p>index</p>
        <div id="parent">
            <div id="left">
                左
            </div>
            <div id="right">
                右
            </div>
        </div>
    </body>

Bootstrap分页

        <!-- Start: 分页组件 -->
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li class="navbtn_first disabled">
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <#list 1..(pageResult.totalPage)!0 as i>
                <#if i==1><li class="active"><a href="#">${i!""}</a></li><#else>
                <li><a href="#">${i!""}</a></li>
                </#if>
            </#list>
            <#if pageResult.totalPage==1><li class="navbtn_last disabled"><#else>
            <li class="navbtn_last">
            </#if>
              <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
        <span>${pageResult.items[0]}</span>
        <script>
            // TODO
            $('.pagination li:not(li[class*="navbtn"])').on('click',function(){
                var jsonData = {                       
                    key: null || "",                   
                    currentPage: $(this).text(),       
                    rows: 2                            
                };                                     
                $.ajax({                               
                    url: 'queryPage',                  
                    type: 'POST',                      
                    data: jsonData,                    
                    success: function(result){         
                        //$('.table').html();                    
                    },                                 
                    error: function(d,m){alert(m);}    
                });                                    
                console.log(jsonData);                 
                
                // 当前选取的元素
                $current = $('.pagination .active');
                $current.attr("class","");
                $(this).attr("class","active");
                $('.pagination li[class^="navbtn"]').removeClass("disabled");
                if($(this).text() && $(this).text()==$('.pagination li:not(li[class^=navbtn])').length){
                    $('.pagination li[class^="navbtn_last"]').addClass("disabled");
                } else if($(this).text() && $(this).text()==1){
                    $('.pagination li[class^="navbtn_first"]').addClass("disabled");
                }
            });
            $('.pagination li[class^="navbtn_first"]').click(function(){
                let index = $('.pagination .active').text();
                $($('.pagination li:not(li[class*="navbtn"])')[index-2]).trigger('click');
          });
          $('.pagination  li[class^="navbtn_last"]').click(function(){
                  let index = $('.pagination .active').text();
                  $($('.pagination li:not(li[class*="navbtn"])')[index]).trigger('click');
          });
        </script>
        <!-- End: 分页组件 -->
阅读 650

Java技术栈 [链接]

13 声望
0 粉丝
0 条评论

Java技术栈 [链接]

13 声望
0 粉丝
文章目录
宣传栏