【无标题】

最新推荐文章于 2024-09-24 11:22:03 发布

黄俊然

最新推荐文章于 2024-09-24 11:22:03 发布

阅读量385

点赞数 8

本文链接：https://blog.csdn.net/2301_80950331/article/details/135253822

版权

<!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">
    <link href="style.css" rel="stylesheet" />
    <title>毕业夏之季</title>
</head>
<body>
    <span class="top">>></span>
    <div class="box">
        <div class="nav_main">
            <span class="logo">Graduate<span class="y">.</span></span>
            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Honor</a></li>
                    <li><a href="#">souvenir</a></li>
                    <li><a href="#">Introduce</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </div>
        <div class="centen">
            <span>First</span>
            <span>One Day</span>
            <p>
                Time is fleeting and fleeting, so those love and warmth 
                <br />
                are always in a hurry, not cherished in the blink of an eye.
            </p>
            <div >
                <button type="button" class="btn">Leam More</button>
                <a href="#">Good Bye</a>
            </div>
        </div>
    </div>
</body>
</html>

html

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
body{
    background-color: rgb(206, 128, 25);
}
.top {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: rotateZ(90deg) translateX(-50%);
    font-size: 35px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 20px rgb(0, 93, 168);
}
.box{
    width: 100vw;
    height: 100vh;
    background-image: url(./1.jpg);
    background-size: cover;
    background-position: center center;
}

/* 导航栏 */
.nav_main{
    height: 100px;
    background-color: rgba(248, 248, 248, 0.747);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: -1px 2px 20px #ccc;
}
.logo {
    font-size: 40px;
    font-family: '微软雅黑';
    font-weight: bold;
    transition: .5s;
    color: rgb(26, 15, 0);

}
.logo:hover{
    cursor: pointer;
    color: rgb(233, 132, 0);
}
.logo span{
    color: rgb(254,142,0);
}
.nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
}
.nav ul li {
    margin: 0 30px;
    /* background-color: rgb(170, 170, 170); */
}
.nav ul li a {
    padding: 10px;
    font-weight: bold;
    transition: .5s;
    color: rgb(26, 15, 0);
    text-decoration: none;
    text-shadow: 1px 1px 5px rgba(248, 248, 248, 0.747);
    border-bottom: 3px solid rgba(248, 248, 248, 0);
    /* background-color: aqua; */
}
.nav ul li a:hover{
    cursor: pointer;
    color: rgb(231, 132, 1);
    text-shadow: 1px 1px 40px rgba(255, 194, 114, 0.747);
    border-bottom: 3px solid rgba(231, 132, 1, 0.747);

}

.centen {
    padding: 5% 0 0 10% ;
    display: flex;
    flex-direction: column;
}
.centen span:nth-child(1){
    font-size: 150px;
    font-weight: bold;
    color: rgb(255, 164, 89);
    text-shadow: 2px 5px 5px rgb(71, 36, 0);

}
.centen span:nth-child(2){
    font-size: 80px;
    font-weight: bold;
    margin-bottom: 30px;
    color: rgb(255, 252, 250);
    text-shadow: 2px 5px 5px rgb(10, 5, 0);

}
.centen p {
    padding: 0 0 0 5px;
    margin: 0 0 30px 0;
    font-weight: bold;
    font-size: 25px;
    color: rgb(75, 75, 75);
    text-shadow: 2px 2px 5px rgba(15, 8, 0, 0.178);

}
.centen div a {
    font-size: 25px;
    font-weight: bold;
    margin: 0 0 0 20px;
    text-decoration: none;
    color: rgb(255, 255, 255);
}
.btn {
    padding: 15px;
    border: 2px solid rgba(255, 145, 0);
    border-radius: 10px;
    font-size: 25px;
    font-weight: bold;
    color: rgba(255, 145, 0);
    text-shadow: 2px 2px 5px rgba(15, 8, 0, 0.664);
    background-color: rgba(255, 255, 255, 0.048);

}

css