前端开发css完成最基础的時间轴的示例编码

日期:2021-03-01 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

本文详细介绍了前端开发css完成最基础的時间轴的示例编码,共享给大伙儿,实际以下:

原形:

编码:
 

<!DOCTYPE html >
<html>
    <head>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <meta charset="UTF⑻">
        <title>情况详细信息</title>
        <style>
            #timeleft div {
                height: 65px;
                color: #333333;
            }
            
            #timecenter div {
                height: 65px;
                color: #333333;
            }
            
            #timeright div {
                height: 65px;
                color: #333333;
            }
            
            #timeright div p {
                margin: 0 0 0px;
            }
            
            .cicle1 {
                position: absolute;
                top: 0px;
                left: ⑴0px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
            
            .cicle2 {
                position: absolute;
                top: 70px;
                left: ⑴0px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
            
            .cicle3 {
                position: absolute;
                top: 140px;
                left: ⑴0px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
            
            .cicle4 {
                position: absolute;
                top: 210px;
                left: ⑴0px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
        </style>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    </head>

    <body>

        <!--右边信息内容-->
        <div class="col-md⑴0 col-sm⑴0 col-xs⑴0" style="margin-top:30px;">
            <div class="col-md⑷ col-sm⑷ col-xs⑷" id="timeleft">
                <div>2012⑴2⑵4 8:00</div>
                <div>2012⑴2⑵4 8:00</div>
                <div>2012⑴2⑵4 8:00</div>
                <div>2012⑴2⑵4 8:00</div>

            </div>

            <div class="col-md⑷ col-sm⑷ col-xs⑷" id="timecenter">

                <div style="height:212px;  border-left:1px   solid  #366595; position:absolute;  left:65px;">
                    <ul>
                        <li class="cicle1"></li>
                        <li class="cicle2"></li>
                        <li class="cicle3"></li>
                        <li class="cicle4"></li>
                    </ul>

                </div>
            </div>

            <div class="col-md⑷ col-sm⑷ col-xs⑷" id="timeright">
                <div>
                    <p>竣工交车</p>
                    <p>1小时</p>
                </div>
                <div>
                    <p>竣工交车</p>
                    <p>1小时</p>
                </div>

                <div>
                    <p>竣工交车</p>
                    <p>1小时</p>
                </div>
                <div>
                    <p>竣工交车</p>
                    <p>1小时</p>
                </div>
            </div>
        </div>
    </body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。