SOURCE

<div id="main">欢迎进入我的网站</div>
    <div>
    <nav>
        <ul class="ul1">
            <li><a href="">首页</a>
            <li><a href="">关于我</a>
                <ul class="ul2">
                    <li><a href="">爱好</a></li>
                    <li><a href="">歌</a></li>
                    <li><a href="">电影</a></li>
                    <li><a href="">娱乐</a></li>
                </ul>
            </li>
            <li><a href="">课程</a>
                <ul class="ul2">
                    <li><a href="">移动网站建设</a></li>
                    <li><a href="">photoshop</a></li>
                    <li><a href="">JSP</a></li>
                    <li><a href="">jQuery</a></li>
                </ul>
            </li>
            <li><a href="我的作品">我的作品</a>
                <ul class="ul2">
                    <li><a href="">简单的QQ农场</a></li>
                    <li><a href="">设计的作品</a></li>
                </ul>
            </li>
            
    </nav>
    </div>
    <div class="note">
        
    </div>
    <h2>我的作品</h2>
    <div class="wrap">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

 #main {
        background-image: url("https://i.loli.net/2020/06/18/Nq5VnLtcmiWM4rJ.jpg" );
        height: 300px;
        text-align: center;
        font-size: 40px;
        font-weight: bolder;
        text-shadow: 15px 5px 15px;
        animation: change 3s linear 0s infinite;

        }

        @keyframes change {

        0% {color: rgb(248, 59, 68);}

        50% {color: rgb(90, 154, 226);}

        100% {color: rgb(76, 19, 233);}

        }
        li{
            list-style-type: none;
            }
        a{
            text-decoration: none;
        }
        .ul1{
            margin: -50px 0px 10px 200px;
        }

        .ul1>li{
            width: 150px;
            height: 2em;
            border-radius: 0.5em 0.5em 0 0;
            background: rgba(30,80,200,0.8);
            font-size: 20px;
            line-height: 2em;
            text-align: center;
            float: left;
            margin-left: 50px;
        }
        .ul2{
            background: rgba(80,80,160,0.6);
            border-radius: 0 0 0.5em 0.5em;
            display: none;
        }

        .ul2>li>a:hover{
            background: rgba(37, 41, 36, 0.8);
            width: 85%;
            height: 1.5em;
            line-height: 1.5em;
            display:inline-block;
            border-radius: 0.5em;
            font-weight: bold;
            padding: 3px 3px;

        }

        .ul1>li:hover>ul{
            display: block;    
        }

        .ul1>li:hover{
            background: rgba(30,80,250,0.8);    
        }
        .note{
            display:block; 
            margin:200px auto;
            width:100px;
            height:100px;
            background:#ff0;
            border:1px solid #000;
        }
    .note{
        display:block; 
        margin:100px auto;
        width:400px;
        height:400px;
        background:#ff0;
        border-width:30px 30px 30px 30px;
        border-color:rgb(98, 189, 121) #f0f #512 #a21;
        border-style:solid;
    }
    h2{
        color: rgb(188, 235, 79);
        text-align: center;
        font-size:50px;
        text-shadow: 15px 5px 15px;
        
    }
    .wrap{
            width: 1013px;
            height: 305px;
            background: rgb(223, 138, 208);
            margin: 0 auto;
        }
        .item{
            float: left;
            width: 168.8px;
            height: 305px;
            background: green;
            transition: 0.5s;
        }
        .item:nth-child(1){
            background-image: url("https://i.loli.net/2020/06/20/wbRYcHrGvKi94kf.jpg");
           
           
        }
        .item:nth-child(2){
            background-image: url("https://i.loli.net/2020/06/20/8gt6zpoTUrAqOnH.jpg");
        }
        .item:nth-child(3){
            background-image: url("https://i.loli.net/2020/06/20/ZQdBclL6IvDW9Vm.jpg");
        }
        .item:nth-child(4){
            background-image: url("https://i.loli.net/2020/06/20/AtGFwomY4JjWhNd.png" );
        }
        .item:nth-child(5){
            background-image: url("https://i.loli.net/2020/06/20/K92qmdDVbZQBphg.png" );
        }
        .item:nth-child(6){
            background-image: url("https://i.loli.net/2020/06/20/w4hymILfuqJNO9B.png");
        }
        .item:hover{
            width: 507px !important;
        }
        .wrap:hover .item{
            width: 101.2px;
        }