1. 程式人生 > 實用技巧 >Mybatis Plus 自定義SQL和分頁外掛

Mybatis Plus 自定義SQL和分頁外掛

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .d1{
                width: 200px;
                height: 200px;
                background
-color: red; /*靜態定位*/ position: static; left:100px; top: 100px; } .d2{ width: 200px; height: 200px; background-color: yellow; position: relative; right: 100px; bottom: 100px; } .d3{ width: 200px; height: 200px; background
-color: blue; } .d4{ width: 400px; height: 400px; background-color: blue; } .d5{ width: 300px; height: 300px; background-color: yellow; } .d6{ width: 200px; height: 200px; background
-color: gray; } .d7{ width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; } .d8{ width: 150px; height: 150px; background-color: green; } .div1{ width: 200px; border: 1px solid red; position: relative; } .div1 img{ width: 200px; } .div1 p{ width: 200px; background-color: gray; position: absolute; left: 0; bottom: 0; } .d9{ width: 400px; height: 400px; background-color: red; } .d10{ width: 200px; height: 200px; background-color: yellow; } .d11{ width: 100px; height: 100px; background-color: blue; /*固定定位*/ position: fixed; left: 100px; } .d12{ width: 150px; height: 150px; background-color: gray; } ul{ border: 1px solid red; width: 302px; } li{ list-style: none; width: 300px; height: 300px; border: 1px solid bisque; position: absolute; left: 0; top: 0; font-size: 30px; text-align: center; line-height: 300px; } </style> </head> <body> <!-- html階段重要知識點: 1.標籤 2.選擇器&&css樣式 3.盒模型 4.浮動 5.定位 --> <!-- 定位是元素的css樣式,任何元素都可以設定定位效果 1.定位的種類 2.每種定位的特點 3.每種定位的適用場景 --> <!-- 定位:position一共有四個常用值 1.static 靜態定位 預設值 設定了該值的元素對以下四個方位詞不起作用 2.relative 相對定位 3.absolute 絕對定位 4.fixed 固定定位 設定position僅僅是規定了元素的定位方式,並不會讓元素移動,如果想要讓元素移動,還需要left,right,top,bottom這四個css樣式的輔助。 以上四個方位詞的理解: 距某個方向XX畫素。 --> <!--static--> <!--<div class="d1"></div>--> <!--relative 相對定位 1.其移動的參考是自身當前的位置 2.不完全脫離文件流,不會失去自己的位置,但是層級會提升 --> <!--<div class="d2"></div> <div class="d3"></div>--> <!-- absolute 絕對定位 1.其移動的參考是離其最近的設定了非static定位的祖先元素 2.如果絕對定位的元素的所有元素都沒有設定非static定位,此時該元素相對於整個文件定位。 3.絕對定位的元素完全脫離文件流,失去自己的位置,層級提升。 --> <!--<div class="d4"> <div class="d5"> <div class="d6"> <div class="d7"></div> <div class="d8"></div> </div> </div> </div>--> <!-- 例子1 --> <!--<div class="div1"> <img src="../../canvas/images/1.jpg"/> <p>劍聖</p> </div>--> <!--固定定位 fixed 1.其移動的參考是整個文件 2.固定定位的元素完全脫離文件流,失去自己的位置,層級提升。 --> <!--<div class="d9"> <div class="d10"> <div class="d11"></div> <div class="d12"></div> </div> </div>--> <!--多個定位元素的層級問題 元素因為定位導致的層級提升,如果多個元素位置有重合的情況,後寫的會覆蓋在先寫的元素上面。 --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>