html中的绝对定位和相对定位

最新推荐文章于 2024-02-14 11:51:22 发布

xuehyunyu

最新推荐文章于 2024-02-14 11:51:22 发布

阅读量924

点赞数

文章标签： html 相对定位绝对定位 position

本文链接：https://blog.csdn.net/xuehyunyu/article/details/71298522

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container{
            width: 1100px;
            height: 700px;
            background-color: #EFEFF1;
            position: relative;
            margin: 0 auto;
        }
        #line {
            width: 1px;
            height: 658px;
            background-image: url("../../img/f1_line.png");
            position: absolute;
            left: 50%;
        }
        #dot1,#dot2,#dot3,#dot4,#dot5,#dot6{
            background-image: url("../../img/f6.png");
            width: 18px;
            height: 18px;
            position: absolute;
        }
        #dot1{
            top: 40px;
            left: -15px;
        }
        #dot2{
            top: 120px;
            left: -9px;
        }
        #dot3{
            top: 240px;
            left: -9px;
        }
        #dot4{
            top: 341px;
            left: -9px;
        }
        #dot5{
            top: 441px;
            left: -9px;
        }
        #dot6{
            top: 547px;
            left: -9px;
        }
        #left1{
            width: 480px;
            height: 152px;
            background-image: url("../../img/f3.png");
            position: absolute;
            top: 24px;
            left: 54px;

        }
        #left2{
            width: 480px;
            height: 167px;
            background-image: url("../../img/f4.png");
            position: absolute;
            top: 225px;
            left: 54px;

        }
        #left3{
            width: 480px;
            height: 160px;
            background-image: url("../../img/f5.png");
            position: absolute;
            top: 429px;
            left: 54px;
        }

        #right1{
            width: 480px;
            height: 187px;
            background-image: url("../../img/f7.png");
            position: absolute;
            top:104px;
            left: 566px;

        }
        #right2 {
            width: 480px;
            height: 167px;
            background-image: url("../../img/f2.png");
            position: absolute;
            top: 326px;
            left: 566px;

        }
        #right3{
            width: 480px;
            height: 167px;
            background-image: url("../../img/f1.png");
            position: absolute;
            top: 531px;
            left: 566px;
        }
    </style>
    <title>作业</title>
</head>
<body>
<div id="container">

    <div id="line">
        <div id="dot1"></div>
        <div id="dot2"></div>
        <div id="dot3"></div>
        <div id="dot4"></div>
        <div id="dot5"></div>
        <div id="dot6"></div>
    </div>

        <div id="left1">
            <p>2016</p>
        </div>
        <div id="right1">2015</div>
        <div id="left2">2014</div>
        <div id="right2">2013</div>
        <div id="left3">2012</div>
        <div id="right3">2011</div>

</div>
</body>
</html>