2019.10.25 笔记 | 效果图

一、简单的导航栏

<style type="text/css">
            #big{
                width: 100%;
                height: 60px;
                border top: 1px solid transparent;
                background-color: #7FFF00;
            }
            .small{
                height: 50px;
                width: 25%;
                float: left;
                text-align: center;
                line-height: 40px;
                margin-top: 10px;
            }
            .small:hover{
                background-color: #6E6E6E;
                color: white;
                cursor: pointer;
                border-top: 10px solid red ;
                margin-top: 0px;
            }
        </style>
    </head>
    <body>
        <div id="big">
            <div class="small">春节</div>
            <div class="small">端午</div>
            <div class="small">清明</div>
            <div class="small">中秋</div>
        </div>

效果图

二、div制作三角形

div{
                width: 0px;
                border-top: 50px solid #006400;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
            }

效果图