计划列表功能实现

忘是亡心i 2022-05-16 14:07 131阅读 0赞

效果图如下：

![70][]

描述：右侧的图标是可以根据你自己的需要换的哦

小原点的实现原理：使用伪类，核心css代码

li:first-of-type h2:before,li h2:after{
                content:'';
                position:absolute;
                width:12px;
                height:12px;
                background:#e26c60;
                border-radius:50%;
            }

1/4圆弧的实现核心代码：

border:2px solid transparent;
                border-top:2px solid #e26c60;
                border-radius:50%;
                transform:rotate(45deg)

完整的实现代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>work-list</title>
        <style>
            ul,li,h2{padding:0; margin:0}
            h2{font-weight:normal}
            ul{list-style:none;}
            .container{
                width:768px;
                margin:0 auto;
            }
            ul li{margin-top:-26px;}
            .work-list{
                padding-top:46px;
                padding-left:49px;
            }
            li h2{
                font-family: "微软雅黑";
                color:#e26c60;
                height:72px;
                border-bottom:2px solid #e26c60;
                border-left:2px solid #e26c60;
                position:relative;
            }
            li:first-of-type h2:before,li h2:after{
                content:'';
                position:absolute;
                width:12px;
                height:12px;
                background:#e26c60;
                border-radius:50%;
            }
    
            li:first-of-type h2:before{
                left:-7px;
                top:-6px;
            }
            li h2:after{
                right:0;
                bottom:-6px;
            }
            li h2 em{
                float:left;
                background:#fff;
                border-radius:50%;
                margin-left:-42px;
                margin-top:34px;
                border:2px solid transparent;
                border-top:2px solid #e26c60;
                border-radius:50%;
                transform:rotate(45deg)
            }
            li h2 em:before{
                content:'';
                float:left;
                width:60px;
                height:60px;
                padding:8px;
                background:url("icon.png") no-repeat 0 -254px;
                background-size:400px;
                background-clip:content-box;
                background-origin: content-box;
            }
            li h2 span:first-of-type{
                font-size:24px;
                float:left;
                line-height:56px;
                padding-top:16px;
                text-indent:52px;
            }
            li h2 span:last-of-type{
                font-size:30px;
                float:right;
                line-height:62px;
                padding-top:10px;
                padding-right:30px;
            }
            .content{
                padding-left:37px;
                border-left:2px solid #985a99;
                position:relative;
            }
            .content:before{
                content:'';
                position:absolute;
                width:12px;
                height:12px;
                background:#985a99;
                border-radius:50%;
                left:-6px;
                top:-6px;
    
            }
            li:last-of-type .content:after{
                content:'';
                position:absolute;
                width:12px;
                height:12px;
                background:#985a99;
                border-radius:50%;
                left:-7px;
                bottom:0px;
            }
            .content h4{
                font-size:32px;
                color:#464646;
                font-weight:normal;
                padding-top:11px;
                line-height:65px;
            }
            .content p{
                font-size:16px;
                line-height:30px;
                color:#999999;
            }
    
        </style>
    </head>
    <body>
    <div class="container">
        <ul class="work-list">
            <li>
                <h2>
                    <em></em>
                    <span>2018年</span>
                    <span>前端开发工程师</span>
    
                </h2>
                <article class="content">
                    <h4>腾讯课堂</h4>
                    <p>腾讯大学腾讯网教育频道腾讯精品课腾讯云腾讯电脑管家腾讯御安全企鹅FM腾讯微云
                        腾讯文档腾讯游戏学院环球网校中华考试网学神IT教育云中帆教育为课网校中大网校</p>
                </article>
            </li>
            <li>
                <h2>
                    <em></em>
                    <span>2018年</span>
                    <span>前端开发工程师</span>
    
                </h2>
                <article class="content">
                    <h4>腾讯课堂</h4>
                    <p>腾讯大学腾讯网教育频道腾讯精品课腾讯云腾讯电脑管家腾讯御安全企鹅FM腾讯微云
                        腾讯文档腾讯游戏学院环球网校中华考试网学神IT教育云中帆教育为课网校中大网校</p>
                </article>
            </li>
            <li>
                <h2>
                    <em></em>
                    <span>2018年</span>
                    <span>前端开发工程师</span>
    
                </h2>
                <article class="content">
                    <h4>腾讯课堂</h4>
                    <p>马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾
                        马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾马化腾</p>
                </article>
            </li>
    
        </ul>
    </div>
    </body>
    </html>

[70]: /images/20220516/b5e65d9b1c7d4006968c206cc89931d6.png