发表于： 2020-06-21 21:26:00

1 1349

今天完成的事情：

学习制作特殊符号

简单的伪类使用

重写任务5，6代码


1.制作特殊符号，资料：http://www.webhek.com/post/40-css-shapes.html；https://blog.csdn.net/qq_34645412/article/details/78062304

使用css制作小空心三角与实心三角

使用相对定位制作实心三角

            .jiao {
                position: relative;
                height: 0px;
                width: 0px;
                border-top: 19px solid transparent;
                border-right: 20px solid black;
                border-bottom: 20px solid transparent;
            }

在实心三角为父元素，绝对定位和为伪元素制作空心三角

            .jiao:after {
                content: '';
                position: absolute;
                top: -18px;
                left: 4px;
                border-top: 18px solid transparent;
                border-right: 19px solid white;
                border-bottom: 19px solid transparent;
            }


2.由于给小三角使用居中元素text-algin.vartical-algin等元素居中无效，给2个元素的盒子右边添加伪类元素使用弹性盒子

            header::after {
                content: "";
            }
            header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

使小三角左边，文字中间，右边伪元素，比起以前使空盒子div右边，这样占用会更少，提高性能


提交任务11

明日的计划：

完成任务12sass部分，开始任务13


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1