计划列表功能实现

最新推荐文章于 2023-03-22 09:53:38 发布

冰雪为融

最新推荐文章于 2023-03-22 09:53:38 发布

阅读量865

点赞数

分类专栏： css3 文章标签：小案例

本文链接：https://blog.csdn.net/lhjuejiang/article/details/81913996

版权

css3 专栏收录该内容

45 篇文章 3 订阅

订阅专栏

效果图如下：

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

小原点的实现原理：使用伪类，核心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>

冰雪为融

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计划列表功能实现

效果图如下：描述：右侧的图标是可以根据你自己的需要换的哦小原点的实现原理：使用伪类，核心css代码 li:first-of-type h2:before,li h2:after{ content:''; position:absolute; width:12px; hei...
复制链接

扫一扫