AdvancedWebWeChat
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吴丰的主页</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 20px;

    }

    .box {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        width: 100%;
        height: 100vh;
        background-color: #ff9b19;
    }

    .top {
        width: 100%;
        text-align: center;
        color: #fff;
    }

    .top img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    .top h3 {

        font-size: 30px;
        margin: 20px 0;
        letter-spacing: 5px;
    }

    .bottom {
        width: 100%;
        margin-top: 100px;
    }

    .box ul {
        width: 60%;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }

    .box ul li {
        width: 18%;
        border: 1px solid #fff;
        list-style: none;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 2px 3px 5px #ccc;

    }
    .box ul li:hover{
        transition: all .8s;
        transform:scale(1.4);
    }

    .box ul li a {
        text-decoration: none;
        color: #ff9b19;
        align-content: center;
        flex-wrap: wrap;
        width: 100%;
        height: 140px;
        align-items: center;
    }

    .box ul li span {
        display: block;
        width: 100%;
        text-align: center;
    }
</style>

<body>
    <div class="box">
        <div class="top">
            <img src="./assets/img/touxiang.jpg" alt="">
            <h3>欢迎来到吴丰的主页</h3>
            <p>19001010513</p>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a href="./level-4-project/level-4-project.html">
                        <span>四级项目</span>
                    </a>
                </li>
                <li>
                    <a href="./level-3-project/login.html">
                        <span>三级项目</span>
                    </a>
                </li>
                <li>
                    <a href="./Extr-learn/snake.html">
                        <span>课外学习</span>
                    </a>
                </li>
                <li>
                    <a href="http://172.24.10.121/yuan/awd">
                        <span>返回主页</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- <audio src="./assets/music/kanong.mp3"  loop autoplay type="audio/mpeg"></audio> -->
</body>

</html>