2019.6.22 Web全栈开发学习笔记（四）

本文链接：https://blog.csdn.net/weixin_44363959/article/details/96495316

Day 4

课程第四天，主要还是讲CSS的各种属性以及如何用到网页的设计中，以下是课程的内容部分。

课程内容

一、CSS的定位属性

相对定位
形式：position:relative
以它默认位置为参考点定位
绝对定位
形式：position:absolute
以父元素(定位)为参考点定位，如果父元素没有定位，则一级往上参考直到html
固定定位
形式：position:fixed
以浏览器窗口为参考点

二、z-index属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

img
{
  z-index:-1;
}

三、显示/隐藏

visibility
visibility属性指定一个元素是否是可见的

隐藏：

h2
{
visibility:hidden;
}

显示：

h2
{
visibility:visible;
}

display:none
也可使一个元素不会被显示。

四、小三角效果
用于菜单栏的美化，用法：

.triangle{
            border-left:solid 8px transparent;
            border-bottom:solid 8px black;
            border-right:solid 8px transparent;
        }

五、圆角效果

border-radius:50%; 圆
１个值表示四个角都是相同的弧度
２个值表示对角弧度
３个值表示，左上，右上，右下　（右上和左下相同）　　
４个值表示：左上，右上，右下，左下　　　（顺时针）

div{
            width: 500px;
            height: 500px;
            border: solid 1px red;
            border-radius: 50%;
        }

六、二级三级菜单效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            border: 1px solid silver;
            box-sizing: border-box;
        }

        #menu {
            height: 30px;
            background-color: black;
            padding: 0 20px;
        }

        #menu > li {
            float: left;
            list-style: none;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 13px;
        }

        #menu > li:hover {
            color: black;
            background-color: #fff;
        }

        .fchild {
            width: 150px;
            background-color: black;
            display: none;
            /*隐藏*/
        }

        .fchild > li {
            color: #fff;
            text-align: left;
            padding: 0 10px;
            height: 30px;
            list-style: none;
        }

        .fchild > li:hover {
            color: black;
            background-color: #fff;
        }

        #menu > li:hover > .fchild {
            display: block;
        }

        .listchild {
            display: none;
            background-color: black;
            width: 150px;
            margin-left: 139px;
            margin-top: -32px;
        }

        .listchild > li {
            list-style: none;
            color: #fff;
            padding-left: 10px;
        }

        .listchild > li:hover {
            color: black;
            background-color: #fff;
        }

        .fchild > li:hover .listchild {
            display: block;
        }
    </style>
</head>
<body>
<ul id="menu">
    <li>首页</li>
    <li>公司招聘
        <ul class="fchild">
            <li>Python</li>
            <li>Java开发工程师</li>
            <li>Linux</li>
            <li>Web开发工程师
                <ul class="listchild">
                    <li>Html+CSS</li>
                    <li>Html5+CSS3</li>
                    <li>JavaScript</li>
                    <li>Jquery</li>
                </ul>
            </li>
            <li>C/C++</li>
        </ul>
    </li>
    <li>公司文化</li>
    <li>公司项目
        <ul class="fchild">
            <li>前端项目
                <ul class="listchild">
                    <li>App项目</li>
                    <li>网站项目</li>
                    <li>web系统项目</li>
                </ul>
            </li>
            <li>后端项目</li>
            <li>游戏项目</li>
        </ul>
    </li>
    <li>联系我们</li>
</ul>
</body>
</html>