【无标题】原型图

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

黄俊然

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

阅读量343

点赞数 8

文章标签： html

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

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A-SOUL</title>
    <link rel="stylesheet" href="asoul.css">
</head>
<body>
    <div class="box">
    <div id="head">
        <div id="centen">
            <div class="nav_main">
                <span class="logo">灵境少女！<span class="y">.</span></span>
                <div class="nav">
                    <ul>
                        <li><a href="#">向晚（Ava）</a></li>
                        <li><a href="#">贝拉（Bella）</a></li>
                        <li><a href="#">嘉然（Diana）</a></li>
                        <li><a href="#">乃琳（Eileen）</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="centen">
            <span>A-SOUL时代 沸腾期待</span>
            <span></span>
            <p>
                <br>A-SOUL是乐华娱乐年度最新企划中打造的虚拟偶像女团成员</br>由向晚（Ava）、贝拉（Bella）、珈乐（Carol）、嘉然（Diana）、乃琳（Eileen）</p>
                <p>五人组成于2020年11月以“乐华娱乐首个虚拟偶像团体”名义出道</p>
                <p>2020年12月2日，发行团体第一张单曲《Quiet》</p>
                <p>2月11日，进行了团体第一场线上直播。2021年4月30日，发布第二张单曲《超级敏感》</p>
                <p>2021年12月17日，发布第三张单曲《传说的世界》</p>
                <p>2022年2月3日，发布虎年贺岁单曲《除夕》</p>
                <p>2022年12月8日，A-SOUL首张EP《共鸣 Re-sonance（上）》上架预售，其中收录三首歌曲</p>
                <p>分别是团曲《Re-sonance》、向晚&嘉然《DA DA》、贝拉&乃琳《练习心事》</p>
                <p>2022年12月12日，发布与零跑汽车联动曲《Leap Top》</p>
                <p>2023年12月11日，发布全新专辑《绽放Bloom（下），其中收录三首歌曲</p>
                <p>分别是团曲《绽放Bloom》、向晚&乃琳《风与花Wind & Flowers》、贝拉&嘉然《蓓蕾Bud》</p>
            </p>
            <div >
                <button type="button" class="btn">一个魂儿</button>
                <a href="#" class="btn">Good Bye</a> 
            </div>
        </div>
        <div class="footer">
            <div class="footer-wrap">
                <div class="footer-logo">
                    <img class="en-logo" src="asoul.jpg" alt="">
                    <span></span>
                    <img class="ch-logo" src="屏幕截图 2023-12-30 152531.png" alt="">
                </div>
                <div class="footer-info">
                    <ul class="footer-link">
                        <li>
                            <a href="#">用户协议</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="#">隐私协议</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="#">儿童隐私政策</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="#">自律公约</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="#">家长监护工程</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="#">关于我们</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                        <span>|</span>
                        <li>
                            <a href="#">加入我们</a>
                        </li>
                    </ul>
                    <div class="advice-info">
                        <p>虚拟偶像企划，我们是A-SOUL（灵境少女）！合作洽谈请联系julong@asoul.cn</p>
                        <p>UID703007996</p>
                        <p>生日11-19</p>
                        <p>虚拟偶像
                            虚拟UP主
                            VUP
                            VTUBER</p>
                        <p>感谢线上线下每一位与A-SOUL相聚在这场派对的小伙伴们！</p>
                        <p>灵魂同频的默契让我们相遇，是你们陪伴A-SOUL在星空之上彼此闪耀！有你们的陪伴，从不觉得孤单～在未来的未来，一起和A-SOUL走下去吧！</p>
                        <p>▼【A-SOUL成员房间号】▼
                            向晚-22625025；贝拉-22632424
                            嘉然-22637261；乃琳-22625027
                            ▼【更新内容】▼
                            直播时间详见：《每周日程表》（周二更新）私信提问&回复详见：《每双周QA》（双周的周二更新）</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

body{text-align: 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);

}
.box{
    width: 98vw;
    height: 150vh;
    background-image: url(微信图片_20231229154847.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.centen {
    padding: 5% 0 0 10% ;
    display: flex;
    flex-direction: column;
}
.centen span:nth-child(1){
    font-size: 50px;
    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(240, 115, 31);
    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(222, 120, 31);
    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(212, 34, 34);
}
.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(17, 155, 219, 0.664);
    background-color: rgba(17, 196, 232, 0.048);

}

.footer{
    position: relative;
    width: 100%;
    height: 343px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #000;
    color: #999;
}
.footer-wrap{
    width: 1280px;
    height: 100%;
    margin: auto;
    display: flex;
}
.footer-logo{
    width: 300px;
    height: 293px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-logo span{
    width: 1px;
    height: 28px;
    background-color: #666;
}
.en-logo{
    width: 100px;
    height: 100px;
}
.ch-logo{
    width: 80px;
    height: 150px;
}
.footer-info{
    width: 882px;
    height: 293px;
    margin-left: 60px;
}
.footer-link{
    font-size: 14px;
    display: flex;
    margin-bottom: 28px;
}
.footer-link li{
    margin:0 8px;
}
.footer-link a{
    font-size: 14px;
    color: #fff;
}
.footer-link a:hover{
    text-decoration:underline;
}
.advice-info p{
    font-size: 10px;
    text-align: left;
    line-height: 1.5;
}