demo54-模仿京东 

<!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>
<!--
    案例:电商网站的组合键定位
    模仿京东
    一半情况下,都使用绝对定位,基本不用相对定位
    因为相对定位会占据位置
    绝对位置不会占据位置
    只有一种情况,寻找原点位置的时候,以某个元素作为参照物的时候,才会使用相对位置
-->

演示效果:

 

posted @ 2020-03-28 22:01  砚台是黑的  阅读(205)  评论(0)  编辑  收藏  举报