我的进步

最新推荐文章于 2022-06-09 22:32:52 发布

lavendersue

最新推荐文章于 2022-06-09 22:32:52 发布

阅读量816

点赞数

分类专栏：学习心得文章标签： web前端开发扩展

本文链接：https://blog.csdn.net/lavendersue/article/details/76278970

版权

学习心得专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天呢，来和大家分享一下我所学到的新知识，虽然都是一些基础知识，虽然在学校里已经学过了，虽然已经使用的很熟练，但是有些知识是在学校中学习不到的，毕竟在学校中学习的东西都比较广泛，知识虽多却不全面。我个人觉得这非常适合零基础但却很喜欢web前端开发的人员学习掌握，来扩展对基础知识的认识以及使用，可以更好的打好较好的基础。
1.透明度：opacity属性,数值为0-1，数值越小越透明，数值越大越清晰。
2.关于定位：（1）绝对定位：不占有空间，使用后，后一个标签会占据使用了绝对定位的标签的位置（2）相对定位：占有空间使用后，后一个标签不会占据使用了绝对定位的标签的位置。（3）固定定位：极少使用。当滑动滚动条需要达到页面头部导航栏一直存在在页面顶部效果时使用。
3.z-inded的使用条件：存在定位。
4.设置鼠标样式属性：cursor 。当cursor值为pointer时，鼠标移到上方时，鼠标会由箭头变成手指，no-drop为禁止等。
5.淘宝、京东、易迅各网站制作三角形箭头的方法。
今天就介绍到这里吧，希望可以对大家学习web前端有一些帮助。

/*淘宝*/
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

                       *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 0;
                height: 0;
                border: 100px solid cornflowerblue;
            }
            div{
                border-color: cornflowerblue transparent transparent transparent;
            }
            div:hover{
                margin-top: -100px;
                border-color: transparent transparent cornflowerblue transparent;
            }

                 </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

/*京东*/
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 0px;
                height: 0px;
                margin: 200px;
                border: 100px solid cornflowerblue;
                border-color: transparent transparent transparent cornflowerblue;
                position: relative;
            }
            div::after{
                content: "";
                width: 0px;
                height: 0px;
                border: 100px solid pink;
                position: absolute;
                top: -100px;
                left: -118px;
                border-color: transparent transparent transparent #fff; 
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

lavendersue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的进步

今天呢，来和大家分享一下我所学到的新知识，虽然都是一些基础知识，虽然在学校里已经学过了，虽然已经使用的很熟练，但是有些知识是在学校中学习不到的，毕竟在学校中学习的东西都比较广泛，知识虽多却不全面。我个人觉得这非常适合零基础但却很喜欢web前端开发的人员学习掌握，来扩展对基础知识的认识以及使用，可以更好的打好较好的基础。 1.透明度：opacity属性,数值为0-1，数值越小越透明，数值...
复制链接

扫一扫