关于发展历程还算可以的一种写法

之前写到发展历程得展示,写得不太如意,这次写得感觉还算可以,就记录分享一下,以此激励如我一般在前端线上挣扎的runoober
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ab_view .develop>h3 {
            font-size: 20px;
            color: #043491;
            font-weight: 600;
        }

        .ab_view .develop p.en {
            font-size: 16px;
            color: rgb(196, 190, 161);
        }

        .ab_view .develop ul {
            margin-top: 20px;
            margin-left: 9px;
        }

        .ab_view .develop ul li {
            border-left: 2px solid #043491;
            padding-left: 18px;
            display: flex;
            position: relative;
            margin-bottom:8px; 
        }

        .ab_view .develop ul li .pic {
            width: 220px;
            margin-right: 10px;
        }

        .ab_view .develop ul li .pic img {
            margin-bottom: 10px;
            display: block;
            width: 100%;
            min-width: 220px;
        }

        .ab_view .develop ul li .date {
            color: #000;
            font-size: 16px;
        }

        .ab_view .develop ul li .desc {
            color: #000;
            font-size: 13px;
        }

        .ab_view .develop ul li .circle-white {
            width: 10px;
            height: 10px;
            border: 3px solid #043491;
            border-radius: 50%;
            position: absolute;
            left: -9px;
            top:-9px;
            background: #fff;
        }

        
    </style>
</head>

<body>
    <div class="ab_view">

        <div class="develop">
            <!-- 发展历程 -->
            <h3>发展历程</h3>
            <p class="en">Development History</p>
            <ul>
                <li>
                    <div class="circle-white"></div>
                    <div class="pic">
                        <img src="http://www.xiangli.com/upload/portal/20190315/b063d04b92dd9a288f88cb986240ddc5.jpg"
                            alt="历史图片" />
                        <img src="http://www.xiangli.com/upload/portal/20190315/b063d04b92dd9a288f88cb986240ddc5.jpg"
                            alt="历史图片" />
    
                    </div>
                    <div class="history">
                        <p class="date">1987年</p>
                        <p class="desc">新型先回复好地方和车管所</p>
                    </div>
                </li>
                <li>
                    <div class="circle-white"></div>
                    <div class="pic">
                        <img src="http://www.xiangli.com/upload/portal/20190315/b063d04b92dd9a288f88cb986240ddc5.jpg"
                            alt="历史图片" />
    
                    </div>
                    <div class="history">
                        <p class="date">1987年</p>
                        <p class="desc">5月11日，南宁分公司成立，项目是SEO技术后期处理及营销型网站建设
                            5月11日，南宁分公司成立，项目是SEO技术后期处理及营销型网站建设
                            12月30日，南宁分公司团队发展超20人</p>
                    </div>
                </li>
            </ul>
    
        </div>

    </div>
</body>

</html>
关于发展历程还算可以的一种写法

猜你喜欢
