纯css写标题样式，时间引导图

<!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>

/* 方块 */
.border_tit{
	border: 3px solid #2e71f0;
    height: 80px;
    margin: 0 auto;
	margin-top: 60px;
	width: 60px;
    position: relative;
}
.border_tit p{
	position: absolute;
	top:2%; 
	background: #fff;
	font-size: 24px;
	width: 120px;
	left: -10px;
	text-indent:0;
	left: 30px;
}

/* 时间条 */
        .timeline {
            margin: 30px;
        }

        .timeline li {
            position: relative;
            overflow: hidden;
            margin: 0;
        }

        .timeline li .milestone {
            width: 200px;
            float: left;
            margin-top: 22px;
            text-align: right;
            padding-right: 35px;
            color: #333743;
            font-size: 16px;
            font-weight: bold;
        }

        .timeline p {
            line-height: 1.8;
            letter-spacing: 0.5px;
            margin: 0 0 10px;
            text-indent: 0;
        }

        .timeline li .timeline-content {
            width: 75%;
            float: left;
            padding-left: 40px;
            padding-bottom: 30px;
            position: relative;
        }

        .timeline li .timeline-content:before {
            content: '';
            position: absolute;
            height: 100%;
            width: 3px;
            background-color: #ececec;
            top: 0px;
            left: 0px;
        }

        .timeline li .timeline-content:after {
            content: '';
            width: 25px;
            height: 25px;
            background: #fff;
            position: absolute;
            top: 22px;
            left: -15px;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            border-radius: 100%;
            border: 3px solid #333743;
        }
    </style>
</head>

<body>
        <h4 class="border_tit">
                <p>关于我们</p>
        </h4>

    <ul class="timeline">
        <li>
            <p class="milestone">2012年</p>
            <div class="timeline-content">
                <p> 统一驭岳(YYIT)品牌，全面负责大中华区域运营。</p>
            </div>
        </li>
        <li>
            <p class="milestone">2013年</p>
            <div class="timeline-content">
                <p>升级世贸商擎1.0系统。</p>
            </div>
        </li>
        <li>
            <p class="milestone">2014年</p>
            <div class="timeline-content">
                <p>推出中国市场分析报告ChinaTSR</p>
            </div>
        </li>
    </ul>
</body>

</html>
效果如下：
纯css写标题样式，时间引导图

猜你喜欢
