demo54-模仿京東

時間 2020-03-29

標籤 demo54 demo 模仿京東简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 590px;
                height: 470px;
                border: 4px solid green;
                margin: 50px auto;
                /*設置相對定位
                 若是但願圖片做爲參照物的話,那麼必須讓長輩是相對定位,子輩是絕對定位
                 * */
                position: relative;
                left: 0px;
                top: 0px;
            }
            .left{
                width: 50px;
                height: 90px;
                background: pink;
                position: absolute;
                left: 0px;
                /*設置成自身高度的一半*/
                top: 50%;
                margin-top: -45px;
            }
            .right{
                width: 50px;
                height: 90px;
                background: pink;
                position: absolute;
                left: 540px;
                /*設置成自身高度的一半*/
                top: 50%;
                margin-top: -45px;
            }
            </style
        </style>
    </head>
    <body>
        <div>
            <img src="img/xlx.jpg"/>
            <span class="left"></span>
            <span class="right"></span>
        </div>
    </body>
</html>
<!--
    案例:電商網站的組合鍵定位
    模仿京東
    一半狀況下,都使用絕對定位,基本不用相對定位
    由於相對定位會佔據位置
    絕對位置不會佔據位置
    只有一種狀況,尋找原點位置的時候,以某個元素做爲參照物的時候,纔會使用相對位置
-->

演示效果:css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。