HTML第二次作业

发布于：2025-08-14 ⋅ 阅读:(25) ⋅ 点赞:(0)

制作银川科技学院官网

  • 页面一：学校官网（银川科技学院-官网）

    • 代码
      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学校官网</title>
    <style>
        body{
            margin: 0; 
            padding: 0; 
}
        .Aa{
            width: 100%;
            height: 120px;
            position: fixed;
            top: 0;
            background-size:100% 120px ;
           
            z-index: 2;
        }
        .Ab{
            width: 100%;
            height: 120px;
            position: fixed;
            background-color: white;
            z-index: -1;
            top: 0;
        }
        .Ac{
            width: 25%;
            height: 120px;
            position: fixed;
            background:url(./搜索.png)  scroll no-repeat;
            background-size:100% 120px ;
            margin-left: 75%;
            top: 0;
            z-index: 2;
        }

        .Ba{
            width: 100%;
            height: 50px;
            position: fixed;
            background-color: rgb(43, 63, 134) ;
            background-size: 100% 50px;
            color: white;
            top: 120px;
            justify-content: center;
            align-items: center;
            display: flex;
            z-index: 9999;
            
        }
        .Bb{
            font-size: 15px;
            list-style: none;
            margin: 0px 30px; 
            z-index: 9999;
        
        }


        .C{
            width: 100%;
            height: 600px;
            background:url(./葡萄酒音乐艺术节.jpg) scroll no-repeat  ;
            background-size: 100% 600px;
            margin-top: 155px;
        }


        .Da{
            height: 60px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: center;
            display: flex;
            font-size: 20px;
            margin-top: 25px;
        }
        .Db{
            height: 40px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: flex-start;
            display: flex;
            color: darkgrey;
            font-size: 20px;
        }
        .Dc{
            height: 330px;
            display: grid;
            grid-template-columns: 24% 24% 24% 24%;
            grid-gap: 2%;
            margin-top: 40px;
            margin-left: 15%;
            margin-right: 15%;
            margin-bottom: 65px;
            line-height: 1.5;
            
        }
        .Dc>:nth-child(1){
            background:url(./新闻1.jpg) scroll no-repeat  ;
            background-color: white;
        }
        .Dc>:nth-child(2){
            background:url(./新闻1.jpg) scroll no-repeat 0px 50px ;
            background-size: 252px 175px;
            background-color: white;
        }
        .Dc>:nth-child(3){
            background:url(./新闻2.jpg) scroll no-repeat 0px 50px ;
            background-size: 252px 175px;
            background-color: white;
        }
        .Dc>:nth-child(4){
            background:url(./新闻3.jpg) scroll no-repeat 0px 50px ;
            background-size: 252px 175px;
            background-color: white;
        }
        .D_date{
            font-size: 25px;
        }
        .D_information{
            margin-top: 200px;
            font-size: 20px;
        }
        .first{
            margin-top: 260px;
            color: white;
            font-size: 18px;
        }
        .Dd{
            height: 50px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: flex-start;
            display: flex;
            margin-bottom: 15px;
        }


        .Ea{
            color: white;
            height: 60px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: flex-end;
            display: flex;
            font-size: 20px;
        }
        .Eb{
            height: 40px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: center;
            display: flex;
            color: white;
            font-size: 20px;
        }
        .Ec{
            height: 250px;
            display: grid;
            grid-template-columns: 23% 23% 23% 23%;
            grid-gap: 2%;
            margin-top: 60px;
            margin-left: 10%;
            margin-right: 10%;
            margin-bottom: 65px;
            line-height: 1.5;
            
        }
        .Ec>:nth-child(1){
            background-color: white;
        }
        .Ec>:nth-child(2){
            background-color: white;
        }
        .Ec>:nth-child(3){
            background-color: white;
        }
        .Ec>:nth-child(4){
            background-color: white;
        }
        .E_date{
            margin-left: 10px;
            font-size: 25px;
        }
        .E_information{
            height: 110px;
            margin-left: 10px;
            margin-right: 10px;
            font-weight: bolder;
            font-size: 20px;
        }
        .Ed{
            display: flex;
            flex-direction: column; 
            justify-content: space-around;
        }
        .Ee{
            color: white;
            height: 60px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: flex-start;
            display: flex;
            
        }
        .E{
            width: 100%;
            height: 535px;
            background:url(./学校1.jpg) scroll no-repeat  ;
            background-color: rgba(77, 128, 210, 0.8);
            background-size: 100% 535px;
        }

        .Fa{
            height: 60px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: center;
            display: flex;
            font-size: 20px;
            margin-top: 45px;
        }
        .Fb{
            height: 40px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: flex-start;
            display: flex;
            color: darkgrey;
            font-size: 20px;
        }
        .Fc{
            width: 100%;
            height: 315px;
            background:url(./图书馆.jpg) scroll no-repeat  ;
            background-size: 100% 315px;
            margin-top: 50px;
        }
        .Fd{
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid gainsboro;
            height: 280px;
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
        }
        .Fd>:nth-child(1){ 
            border: 1px solid gainsboro;
            background-color: white;
        }
        .Fd>:nth-child(2){
            border: 1px solid gainsboro;
            background-color: white;
        }
        .Fd>:nth-child(3){
            border: 1px solid gainsboro;
            background-color: white;
        }
        .Fd>:nth-child(4){
            border: 1px solid gainsboro;
            background-color: white;
        }
        .Fe{
            border: 1px solid gainsboro; 
            padding: 20px;
            display: flex;
            flex-direction: column; 
            justify-content: space-around;
        }
        .F_date{
            font-size: 30px;
            color: gainsboro;
            display: block; 
        }
        .F_information{
            font-weight: 800;
            font-size: 19.5px;
            line-height: 1.5;
        }
        .Ff{
            height: 100px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: flex-end;
            display: flex;
        }
        .F{
            height: 915px;
            width: 70% ;
            margin-left: 15%; 
        }


        .G{
            width: 100%;
            height: 700px;
            background:url(./学校3.jpg) scroll no-repeat  ;
            background-size: 100% 700px;
            position: relative;

        }
        .g{
            width: 100%;
            height: 700px;
            position: absolute;
            background-color: rgba(77, 128, 210, 0.8);
            background-size: 100% 700px;
            float: center;
        }
        .Ga1{
            height: 140px;
            display: grid;
            margin-left: 150px;
            margin-top: 80px;
            grid-gap: 0.5%;
            grid-template-columns: 12% 12% 12% 12% 12% 12% 12%;
            
        }
        .Ga1>:nth-child(1){ 
            background-color: rgba(255, 255, 255, 0.7);
        }
        .Ga1>:nth-child(2){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga1>:nth-child(3){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga1>:nth-child(4){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga1>:nth-child(5){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga1>:nth-child(6){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga1>:nth-child(7){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga2{
            height: 150px;
            display: grid;
            margin-left: 150px;
            margin-top: 25px;
            grid-gap: 0.5%;
            grid-template-columns: 12% 12% 12% 12% 12% 12% 12%;
            
        }
        .Ga2>:nth-child(1){ 
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga2>:nth-child(2){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga2>:nth-child(3){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga2>:nth-child(4){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga2>:nth-child(5){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga2>:nth-child(6){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga2>:nth-child(7){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga3{
            height: 150px;
            display: grid;
            margin-left: 150px;
            margin-top: 25px;
            grid-gap: 0.5%;
            grid-template-columns: 12% 12% 12% 12% 12% 12% 12%;
            
        }
        .Ga3>:nth-child(1){ 
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga3>:nth-child(2){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga3>:nth-child(3){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Ga3>:nth-child(4){
            background-color:  rgba(255, 255, 255, 0.7);
        }
        .Gb{
            padding: 20px;
            display: flex;
            flex-direction: column; 
            justify-content: center;
            font-size: 13px;
        }


        .H{
            width: 100%;
            height: 250px;
            background-color: rgb(44, 42, 42);
            display: grid;
            grid-template-columns: 50% 50%;
        }
        .Ha{
            margin-left: 150px;
            margin-top: 20px;
            justify-content: center;
            
        }
        .Hb{
            color: white;
            font-size: 10px;
            margin-top: 5px;
            text-align: center;

        }
        .Hd{
            display: flex;
            gap: 10px;
            margin-top: 20px; 
        }
        .He{
            display: grid;
            height: 250px;
            margin-left: 50px;
            margin-top: 10px;
            grid-template-columns: 50% 50%;
        }
        

        .H_title{
            color: white;
            font-size: 18px;
            margin: 10px;
            font-weight: bolder;

        }
        .H_smalltitle{
            color: white;
            font-size: 15px;
            line-height: 1.8;
            
        }
        
    </style>
</head>
<body>
    <div class="Aa"><img src="./logo.jpg">
        <div class="Ab"></div>
        <div class="Ac"></div>
    </div>


    <div class="Ba">
        <div class="Bb">首页</div>    
        <div class="Bb">学校概况</div>    
        <div class="Bb">党建工作</div>    
        <div class="Bb">学院设置</div>    
        <div class="Bb">人才培养</div>    
        <div class="Bb">招生就业</div> 
        <div class="Bb">活力校园</div> 
        <div class="Bb">校园风采 </div> 
        <div class="Bb">信息服务</div> 
    </div>    


    <div class="C"></div>


    <div class="Da"><b>学校要闻</b></div>
    <div class="Db">School news</div>
    <div class="Dc">
        <div>
            <div class="first">西南民族大学马克思主义学院到访我校共探思政育人新路径</div></div>
        <div class="D_date"><b>08/05</b><sub> <small>2025</small></sub>
                <div class="D_information">西南民族大学马克思主义学院到访我校共探思政育人新路径</div></div>
        <div class="D_date"><b>08/04</b><sub> <small>2025</small></sub>
                <div class="D_information">我校啦啦操队在2025年全国啦啦操联赛总决赛中取得佳绩</div></div>
        <div class="D_date"><b>08/03</b><sub> <small>2025</small></sub>
                <div class="D_information">我区精准施策助推高校毕业生与就业岗位“双向推送”</div></div>
    </div>
    <div class="Dd">查看更多</div>


    <div class="E">
        <div class="Ea"><b>通知公告</b></div>
        <div class="Eb">Notic notic</div>
        <div class="Ec">
            <div class="Ed">
            <div class="E_date"><b>07/09</b><sub> <small>2025</small></sub></div>
            <div class="E_information">关于公示第十九届“挑战杯”竞赛“人工智能+”专项赛校拟推荐项目的通知</div>
            </div>
        <div class="Ed">
            <div class="E_date"><b>06/24</b><sub> <small>2025</small></sub></div>
            <div class="E_information">银川科技学院建校20周年校庆公告 （第一号）</div>
            </div>  
        <div class="Ed">
            <div class="E_date"><b>06/19</b><sub> <small>2025</small></sub></div>
            <div class="E_information">关于公示银川科技学院2025级学生收费情况的通知</div>
            </div>
        <div class="Ed">
            <div class="E_date"><b>05/20</b><sub> <small>2025</small></sub></div>
            <div class="E_information">银川科技学院关于开展2025年中小学教师资格认定工作的公告</div>
            </div>
        </div>
        <div class="Ee">查看更多</div>
    </div>


    <div class="F">
        <div class="Fa"><b>招生计划</b></div>
        <div class="Fb">Enrollment plan</div>
        <div class="Fc"></div>
        <div class="Fd">
            <div class="Fe">
                <div class="F_date">2025</div>
                <div class="F_information">银川科技学院2025年分省分专业计划表（本科）</div>
                <div class="F_date">→</div>
            </div>
            <div class="Fe">
                <div class="F_date">2025</div>
                <div class="F_information">银川科技学院2025年分省分专业计划表（专科）</div>
                <div class="F_date">→</div>
            </div>
            <div class="Fe">
                <div class="F_date">2024</div>
                <div class="F_information">银川科技学院2024年分省分专业计划表（本科）</div>
                <div class="F_date">→</div>
            </div>
            <div class="Fe">
                <div class="F_date">2024</div>
                <div class="F_information">银川科技学院2024年分省分专业计划表（专科）</div>
                <div class="F_date">→</div>
            </div>
        </div>
        <div class="Ff">查看更多</div>
    </div>


    <div class="G">
        <div class="g">
        <div class="Ga1">
            <div class="Gb">在线教学MOOC平台</div>
            <div class="Gb">数字化实习实训课程平台</div>
            <div class="Gb">公益课程平台</div>
            <div class="Gb">教师在线学习</div>
            <div class="Gb">模拟仿真实训系统</div>
            <div class="Gb">人事管理系统</div>
            <div class="Gb">OA办公</div>
        </div>
        <div class="Ga2">
            <div class="Gb">教务管理系统</div>
            <div class="Gb">图书馆管理系统</div>
            <div class="Gb">校园网自主服务平台</div>
            <div class="Gb">小北学生服务</div>
            <div class="Gb">校长信箱</div>
            <div class="Gb">内容安全审核只能管理系统（内部访问）</div>
            <div class="Gb">篡改发现预警系统（内部访问）</div>
        </div>
        <div class="Ga3">
            <div class="Gb">高效科研管理系统（内部访问）</div>
            <div class="Gb">智能知识库</div>
            <div class="Gb">集中运维工单管理系统（内部访问）</div>
            <div class="Gb">数字化招标采购平台</div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        </div>
    </div>


    <div class="H">
        <div class="Ha">
            <div class=""><img src="./学校logo.jpg"></div>
            <div class="Hd">
                <div class="Hc1"><img src="./wx.jpg" width="100px" height="100px"><div class="Hb">学校微信</div> </div>
                <div class="Hc2"><img src="./wb.jpg" width="100px" height="100px"><div class="Hb">学校微博</div> </div>
                <div class="Hc3"><img src="./dy.jpg" width="100px" height="100px"><div class="Hb">学校抖音</div> </div>
            </div>
        </div>
       
        
        <div class="He">
            <div class="Hf">
                <div class="H_title">友情链接</div>
            <div class="H_smalltitle">宁夏回族自治区教育厅</div>
            <div class="H_smalltitle">数字化招标采购平台</div>
            <div class="H_smalltitle">小北学生服务</div>
            <div class="H_smalltitle">五车数字图书馆</div>
            <div class="H_smalltitle">京广电子图书</div>
            <div class="H_smalltitle">心理测评</div>
            <div class="H_smalltitle">校内公示网</div>
            </div>
            <div class="Hg">
                 <div class="H_title">联系方式</div>
                <div class="H_smalltitle">学校地址：宁夏银川市西夏区</div>
                <div class="H_smalltitle">金波北街培华路1号</div>
                <div class="H_smalltitle">联系电话：0951-5181666</div>
                <div class="H_smalltitle">邮箱：750001</div>
            </div>
        </div>
    </div>
    
</body>
</html>
    • 实现（学校官网-CSDN直播）

      • 学校官网

  • 页面二：学院官网（银川科技学院-计算机与人工智能学院）

    • 代码
      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学院官网</title>
    <style>
        body{
            margin: 0; 
            padding: 0; 
        }
        .Aa{
            width: 100%;
            height: 120px;
            position: fixed;
            
            background-color: white;
            background-size:100% 120px ;
            top: 0;
            z-index: 9999;
        }
       

        .Ba{
            width: 100%;
            height: 50px;
            position: fixed;
            background-color: rgb(43, 63, 134) ;
            background-size: 100% 50px;
            color: white;
            top: 120px;
            justify-content: center;
            align-items: center;
            display: flex;
            z-index: 9999;
            
        }
        .Bb{
            font-size: 15px;
            list-style: none;
            margin: 0px 30px; 
            z-index: 9999;
        
        }


        .C{
            width: 100%;
            height: 600px;
            background:url(./网络安全大赛.jpg) scroll no-repeat  ;
            background-size: 100% 600px;
            margin-top: 155px;
        }

        .D{
            font-size: 20px;
            width: 78%;
            height: 150px;
            margin-left: 11%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .D1{
            height: 550px;
            width: 78%;
            margin-left: 11%;
            display: grid;
            grid-gap: 75px;
            grid-template-columns:48% 49% ;
        }
        .Da{
            width: 100%;
            height: 520px;
            display: grid;
            grid-template-rows:32% 32% 32%;
        }
        .Db{
            width: 90%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            height: 420px;
        }
        
        .Dc{
            width: 100%;
            grid-gap: 18px;
            display: grid;
            grid-template-columns:48% 49% ;
            justify-content: space-between;

        }
        .De{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .D_information{
            margin-top: 20px;
            line-height: 1.5;
            font-size: 20px;
            font-weight: 550;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .Df{
            display: flex;
            color: gainsboro;
            font-size: 20px;
        }
        

        .Ea{
            height: 60px; 
            font-size: 20px;
            text-align: center;
            align-items: center;
            justify-content: center;
            display: flex;
        }
        .Eb{
            height: 200px;
            gap: 20px;
            margin-top: 25px;
            display: grid;
            grid-template-columns: 25% 25% 25%;
            justify-content: center;
        }
        .Eb>:nth-child(1){ 
            background-color: white;
        }
        .Eb>:nth-child(2){
            background-color: white;
        }
        .Eb>:nth-child(3){
            background-color: white;
        }
        .Ec{
            padding: 20px;
            display: flex;
            flex-direction: column; 
            justify-content: space-around;
        }
        .E_date{
            font-size: 20px; 
            display: flex;
        }
        .E_year{
            margin-left: 5px;
            display: flex;
            align-items: flex-end;
            font-size: 13px;
            color: gainsboro;
        }
        .E_information{
            
            font-weight: 800;
            font-size: 19.5px;
            line-height: 1.5;
        }
        .Ed{
            height: 80px;
            width: 50% ;
            margin-left: 25%; 
            justify-content: center;
            align-items: flex-end;
            display: flex;
        }
        .E{
            height: 420px;
            width: 100% ;
            background-color:  rgba(220,220,220,0.2); 
        }

        .F{
            width: 100%;
            height: 500px;
            background: url(./领导班子背景.jpg) scroll no-repeat;
            background-size: 100% 500px;
            position: relative;
            
        }
        .Fa{
            width: 100%;
            height: 500px;
            position: absolute;
            background-color: rgba(30, 86, 176, 0.8);
            background-size: 100% 500px;
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            justify-content: space-around;
        }
        .Fb{
            font-size: 25px;
            text-align: center;
        }
        .Fc{
            width: 40%;
            height: 250px;
            background-color: white;
        }
        .Fd{
            display: flex;
            align-items: center;
            font-size: 20px;
            margin: 40px;
        }

        .G{
            width: 100%;
            height: 200px;
            font-size: 25px;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center;
            font-weight: bolder;
        }

        .H{
            width: 100%;
            height: 300px;
            background-color: rgb(44, 42, 42);
            display: grid;
            grid-template-columns: 50% 50%;
            
        }
        .Ha{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .Hb{
            margin-top: 10px;
            margin-left: 100px;
        }
        
        .H_title{
            color: white;
            font-size: 18px;
            margin: 10px;
            font-weight: bolder;

        }
        .H_smalltitle{
            color: rgb(165, 162, 162);
            font-size: 15px;
            line-height: 2.0;
            
        }
        
    </style>
</head>
<body>
    <div class="Aa"><img src="./学院logo1.jpg"></div>

    <div class="Ba">
        <div class="Bb">学院首页</div>    
        <div class="Bb">首页</div>    
        <div class="Bb">学院简介</div>    
        <div class="Bb">学院荣誉</div>    
        <div class="Bb">通知公告</div>    
        <div class="Bb">新闻动态</div> 
        <div class="Bb">党团建设</div> 
        <div class="Bb">思想政治</div> 
        <div class="Bb">学生工作</div> 
        <div class="Bb">实践教学</div> 
    </div>    


    <div class="C"></div>

    <div class="D">
        <div><b>新闻动态</b></div>
        <div>MORE></div>
    </div>
    
    <div class="D1">
        <div class="Da">
                <div class="Dc">
                    <img src="./学院新闻1.jpg" width="250px" height="170px">
                    <div class="De">
                        <div class="D_information">计算机与人工智能学院党总支赴宁夏回族自治区廉政警示教育中心开展实践教育活动</div>
                        <div class="Df">-></div>
                    </div>
                </div>
                <div class="Dc">
                    <img src="./学院新闻2.jpg" width="250px" height="170px">
                    <div class="De">
                        <div class="D_information">银川科技学院2025人工智能产教融合论坛隆重举行</div>
                        <div class="Df">-></div>
                    </div>
                </div>
                <div class="Dc">
                    <img src="./学院新闻3.jpg" width="250px" height="170px">
                    <div class="De">
                        <div class="D_information">专业讲座 | 新 E 代数智未来产业学院助力计算机与人工智能学院开展数据标注讲座</div>
                        <div class="Df">-></div>
                    </div>
                </div>

        </div>
        <div class="Db">
            <img src="./学院新闻1.jpg" width="550px" height="275px">
            <div class="D_information">计算机与人工智能学院党总支赴宁夏回族自治区廉政警示教育中心开展实践教育活动</div>
        </div>
    </div>
    



    <div class="E">
        <div class="Ea">通知公告</div>

        <div class="Eb">
            <div class="Ec">
                <div class="E_date">12.10
                    <div class="E_year">2024</div>
                </div>
                <div class="E_information">关于公示银川科技学院辅修专业及辅修学士学位学费的通知</div>
                <div class="E_date">→</div>
            </div>
            <div class="Ec">
                <div class="E_date">12.10
                    <div class="E_year">2024</div>
                </div>
                <div class="E_information">关于发布受理侵害学生利益、化解矛盾纠纷问题和线索投诉举报渠道的公告</div>
                <div class="E_date">→</div>
            </div>
            <div class="Ec">
                <div class="E_date">08.29
                    <div class="E_year">2024</div>
                </div>
                <div class="E_information">2025届毕业生毕业实习企业邀请函</div>
                <div class="E_date">→</div>
            </div>
        </div>
        <div class="Ed">MORE></div>
    </div>

    <div class="F">
        <div class="Fa">
            <div class="Fb">领导班子</div>
            <div class="Fc">
                <div class="Fd"><img src="./学院领导班子.jpg" width="140px" height="170px"> 领导班子</div>
            </div>
            <div class="Fb">MORE></div>
        </div>
    </div>

    <div class="G">专业介绍</div>



    <div class="H">
        <div class="Ha"><img src="./学院logo.jpg"></div>  
        <div class="Hb">
            <div class="H_title">友情链接</div>
            <div class="H_smalltitle">在线教学平台</div>
            <div class="H_smalltitle">校内公示网</div>
            <div class="H_title">联系方式</div>
            <div class="H_smalltitle">学校地址：宁夏银川市西夏区金波北街培华路1号</div>
            <div class="H_smalltitle">电话：0951-5181555（院办）0951-5181999（招办）</div>
            <div class="H_smalltitle">邮箱：750021</div>
        </div>
    </div>
    
</body>
</html>
    • 实现（学院官网-CSDN直播）

      • 学院官网

  • 页面三：图文信息中心官网（银川科技学院-图文信息中心）

    • 代码
      • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文信息中心官网</title>
    <style>
        body{
            margin: 0; 
            padding: 0; 
        }
        .Aa{
            width: 100%;
            height: 120px;
            position: fixed;
            background-color: white;
            background-size:100% 120px ;
            top: 0;
            z-index: 9999;
        }
       

        .Ba{
            width: 100%;
            height: 50px;
            position: fixed;
            background-color: rgb(43, 63, 134) ;
            background-size: 100% 50px;
            color: white;
            top: 120px;
            justify-content: center;
            align-items: center;
            display: flex;
            z-index: 9999;
            
        }
        .Bb{
            font-size: 15px;
            list-style: none;
            margin: 0px 30px; 
            z-index: 9999;
        
        }


        .C{
            width: 100%;
            height: 600px;
            background:url(./图文1.jpg) scroll no-repeat  ;
            background-size: 100% 600px;
            margin-top: 155px;
        }


        .D{
            height: 700px;
            width: 100% ;
            background-color:  rgba(220,220,220,0.2); 
        }
        .Da{
            width: 70%;;
            margin-left: 15%;
            display: grid;
            grid-template-columns:25% 39% 32%;
            gap: 20px;
        }
        .Da>:nth-child(1){
            background-color: white;
        }
        .Da>:nth-child(2){
            background-color: white;
        }
        .Da>:nth-child(3){
            background-color: white;
        }
        .Da1{
            height: 650px;
            display: grid;
            grid-template-rows:59% 15% 19%;
            justify-content: flex-start;
            gap: 20px;
        }
        .D_title{
            margin: 20px;
            font-size: 20px;
            font-weight: bolder;
        }
        .D_information{
            margin: 20px;
            font-size: 14px;
            line-height: 1.8;
            column-count: 2;
            gap: 15px;
        }
        .Da2{
            height: 580px;
            margin-top: 70px;
        }
        .Da2_1,.Da3_1{
            font-size: 20px;
            height: 40px;
            margin: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .Da2_2{
            display: flex;
            margin: 10px;
            font-size: 18px;
            font-weight: bolder;
            gap: 15px;
            
        }
        .Da2_3{
            font-size: 17px;
            line-height: 2.2;
            display: flex;
        }
        li{
            margin-right: 30px;
        }
        .D_date{
            color: gainsboro;
        }
        .Da3{
            height: 580px;
            margin-top: 70px;
        }
        .date{
            width: 90px;
            height: 100px;
            background-color:  rgb(43, 63, 134) ;
        }
        .day{
            height: 57px;
            color: white;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        .year{
            color: white;
            font-size: 13px;
            display: flex;
            justify-content: center;
        }
        .Da3_2{
            display: flex;
            gap: 10px;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
        }
        .information{
            font-size: 18px;
            font-weight: bolder;
            line-height: 1.5;
        }
        

        .E{
            width: 100%;
            height: 300px;
            background-color: rgb(44, 42, 42);
            display: grid;
            grid-template-columns: 50% 50%;
        }
        .Ea{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .Eb{
            width: 50%;
            margin-top: 10px;
            margin-left: 100px;
        }
        
        .E_title{
            color: white;
            font-size: 18px;
            margin: 10px;
            font-weight: bolder;

        }
        .E_smalltitle{
            color: rgb(165, 162, 162);
            font-size: 15px;
            line-height: 2.0;
            
        }
        .E_small{
            display: flex;
            flex-wrap: wrap;  
            column-gap: 20px;  
            justify-content: flex-start; 
            
            color: rgb(165, 162, 162);
            font-size: 15px;
            line-height: 2.0;
            
        }

        
    </style>
</head>
<body>
    <div class="Aa"><img src="./图文信息中心.jpg" width=""></div>
    <div class="Ba">   
        <div class="Bb">首页</div>       
        <div class="Bb">通知公告</div>    
        <div class="Bb">新闻动态</div> 
        <div class="Bb">部门概括</div> 
        <div class="Bb">校园网络</div> 
        <div class="Bb">图书馆检索系统</div> 
        <div class="Bb">电子资源</div> 
        <div class="Bb">书香校园</div> 
    </div>    
    <div class="C"></div>
    <div class="D">
        <div class="Da">
            <div class="Da1">
                <div class="Da1_1">
                    <div class="D_title">电子资源</div>
                    <div class="D_"></div>
                    <div class="D_information">
                        <div>万方数据库</div>
                        <div>网上报告厅</div>
                        <div>百度文库</div>
                        <div>维普考试服务平台</div>
                        <div>CNKI系列数据库</div>
                        <div>信息素养教育数据库</div>
                        <div>中国知网金融行业知识服务平台</div>
                        <div>MET全面英语学习资源库</div>
                        <div>AI馆员</div>
                        <div>中文期刊数据库</div>
                        <div>职业全能培训数据库</div>
                        <div>设计师之家数据库</div>
                        <div>研学平台</div>
                        <div>微思翻译</div>
                        <div>中国知网</div>
                        <div>维普职业培训云课堂</div>
                        <div>Global Sim全球仿真应用技能资源库</div>
                        <div>AI书苑</div>
                    </div>
                </div>
                <div class="Da1_2">
                    <div class="D_title">检索系统</div>
                    <div class="D_information">图书馆检索系统</div>
                </div>
                <div class="Da1_3">
                    <div class="D_title">图管会</div>
                    <div class="D_information"></div>
                </div>
            </div>
                <div class="Da2">
                    <div class="Da2_1">
                        <div><b>新闻动态</b></div>
                        <div>MORE></div>
                    </div>
                    <div class="Da2_2">
                        <img src="./图文新闻.jpg" width="200px" height="100px">
                        <div>世界读书日系列活动“对话名家·阅见未来”专家报告会圆满举办</div>
                    </div>
                    <div>----------------------------------------------------------</div>
                    <div class="Da2_3">
                        <li>世界读书日系列活动“对话名家·阅见未来”专家报告会圆满举办</li>
                        <div class="D_date">2025.06.30</div>
                    </div>
                    <div class="Da2_3">
                        <li>世界读书日系列活动之“对话名家•阅见未来”专家报告会</li>
                        <div class="D_date">2025.06.23</div>
                    </div>
                    <div class="Da2_3">
                        <li>告别占座，从预约开始！文明自习，你我同行！</li>
                        <div class="D_date">2025.06.12</div>
                    </div>
                    <div class="Da2_3">
                        <li>校养携手传递书香与爱心，共筑公益合作新篇章</li>
                        <div class="D_date">2025.06.05</div>
                    </div>
                    <div class="Da2_3">
                        <li>全民信息素养教育公益大讲堂|第八讲</li>
                        <div class="D_date">2025.06.03</div>
                    </div>
                </div>
                <div class="Da3">
                    <div class="Da3_1">
                        <div><b>通知公告</b></div>
                        <div>MORE></div>
                    </div>
                    <div class="Da3_2">
                        <div class="date">
                            <div class="day">01</div>
                            <div class="year">2025.07</div>
                        </div>
                        <div class="information">关于清理各自习室及假期图书借阅服务的通知</div>
                    </div>
                    <div class="Da3_2">
                        <div class="date">
                            <div class="day">29</div>
                            <div class="year">2025.05</div>
                        </div>
                        <div class="information">图文信息中心关于2025年端午节开馆事项的通知</div>
                    </div>
                    <div class="Da3_2">
                        <div class="date">
                            <div class="day">21</div>
                            <div class="year">2025.05</div>
                        </div>
                        <div class="information">图文信息中心关于办理毕业生离校手续的通知</div>
                    </div>
                    <div class="Da3_2">
                        <div class="date">
                            <div class="day">28</div>
                            <div class="year">2025.04</div>
                        </div>
                        <div class="information">关于五一劳动节期间图书馆开馆服务的通知</div>
                    </div>
                </div>
        </div> 
    </div>

    <div class="E">
        <div class="Ea"><img src="./图文信息中心logo.jpg"></div>     
        <div class="Eb">
            <div class="E_title">友情链接</div>
            <div class="E_small">
                <div class="E_smalltitle">宁夏回族自治区教育厅</div>
                <div class="E_smalltitle">中国国家图书馆</div>
                <div class="E_smalltitle">宁夏图书馆</div>
                <div class="E_smalltitle">宁夏高校图工委</div>
                <div class="E_smalltitle">五车数字图书馆</div>
                <div class="E_smalltitle">京广电子图书</div>
                <div class="E_smalltitle">思多听图书馆</div>
            </div>
            <div class="E_title">联系方式</div>
            <div class="E_smalltitle">学校地址：宁夏银川市西夏区金波北街培华路1号</div>
            <div class="E_smalltitle">电话：0951-5181555（院办）0951-5181999（招办）</div>
            <div class="E_smalltitle">邮箱：750021</div>
        </div>
    </div>
    
    
</body>
</html>
    • 实现（图文信息中心官网-CSDN直播）

      • 图文信息中心官网

创作网页（页面为本人自创）

页面一：首页

左侧导航栏、右侧关键词 
中间自上而下为图片集、舞台混剪（视频时间短）、舞台纯享（视频时间长）视频设置为按动开关播放、部分成员介绍

  • 代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到南波万</title>
    <style>
    body{
        width: 94%;
        margin: 0;
        padding-left: 6%;
        background-image: url(./风景2.jpg);
        background-repeat: no-repeat; 
        background-size: cover; 
        background-attachment: fixed;
    }
    .A{
        width: 6%;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        background-color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        z-index: 9999;
    }
    .Aa{
        font-size: 35px;
        list-style: none;
        margin: 15px 0; 
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        text-align: center;
        padding: 5px 10px;
        border-radius: 5px;
        font-family: font1;
    }
    .Aa:hover{
            background-color: #555;
            transform: scale(1.1);
    }

    .B{
        width: 12%;
        height: 100%;
        right: 0;
        top: 0;
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        z-index: 9999;
        
    }
    .Ba{
        font-size: 27px;
        list-style: none;
        margin: 17px 0;
        font-family: font1; 
        color: pink;
        background-color: #555;
        transition: all 0.3s ease;
        text-align: center;
        border-radius: 5px;
        line-height: 2.0;
    }
    .Ba:nth-child(1) {
      margin-left: 5px;
      transform: translateX(-10px) translateY(3px) rotate(-5deg);
    }

    .Ba:nth-child(2) {
      margin-left: 15px;
      transform: translateX(50px) translateY(-5px) rotate(3deg);
    }

    .Ba:nth-child(3) {
      margin-left: 0px;
      transform: translateX(-5px) translateY(-20px) rotate(-8deg);
    }

    .Ba:nth-child(4) {
      margin-left: 12px;
      transform: translateX(15px) translateY(-20px) rotate(5deg);
    }

    .Ba:nth-child(5) {
      margin-left: 3px;
      transform: translateX(25px) translateY(5px) rotate(0deg);
    }

    .Ba:nth-child(6) {
      margin-left: 18px;
      transform: translateX(0px) translateY(-7px) rotate(3deg);
    }

    .Ba:nth-child(7) {
      margin-left: 1px;
      transform: translateX(80px) translateY(-20px) rotate(-6deg);
    }

    .Ba:nth-child(8) {
      margin-left: 16px;
      transform: translateX(10px) translateY(-30px) rotate(4deg);
    }

    .Ba:nth-child(9) {
      margin-left: 4px;
      transform: translateX(-6px) translateY(4px) rotate(deg);
    }

    .Ba:nth-child(10) {
      margin-left: 14px;
      transform: translateX(6px) translateY(-6px) rotate(6deg);
    }

    .Ba:hover{
            background-color: #555;
            transform: scale(1.1) rotate(0deg) translateX(0) translateY(0); 
    }
    @font-face {
        font-family: font1;
        src: url(./HYKeepRunning-55U.ttf);
    }
    
    .C{
        width: 1200PX;
        height: 700px;
        position: relative;
        overflow: hidden;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        background-size: 100% 700px;
        }
    .photos{
        display: flex;
        width: 1000%;
        height: 100%;
        animation: photo 20s infinite linear;
    }
    .photo{
        width: 10%;
        height: 100%;
    }
    @keyframes photo {
        0%{transform: translateX(0);}         
        10%{transform: translateX(0);}        
        10.1%{transform: translateX(-10%);}  
        20%{transform: translateX(-10%);}        
        20.1%{transform: translateX(-20%);}     
        30%{transform: translateX(-20%);}        
        30.1%{transform: translateX(-30%);}   
        40%{transform: translateX(-30%);}        
        40.1%{transform: translateX(-40%);}      
        50%{transform: translateX(-40%);}        
        50.1%{transform: translateX(-50%);}  
        60%{transform: translateX(-50%);}        
        60.1%{transform: translateX(-60%);}    
        70%{transform: translateX(-60%);}        
        70.1%{transform: translateX(-70%);}        
        80%{transform: translateX(-70%);}        
        80.1%{transform: translateX(-80%);}        
        90%{transform: translateX(-80%);}   
        90.1%{transform: translateX(-90%);}   
        100%{transform: translateX(-90%);}   
    }
    .D{
      width: 1100px;
      height: 590x;
    }
    .D video{
      display: flex;
      align-items: center;
      margin-left: 20%;
      justify-content: center;
    }
    .E{
      width: 94%;
      height: 1200px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; 
    }
    .videobox{
      height: 200px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      margin: 30px;
      transition: all 0.5s;
    }
    .smalltitle{
      font-size: 25px;
      font-family: font1;
    }
    .smalltitle-box{
      width: 100%;
      height: 50px;
      text-align: center;
      background-color: rgb(255, 255, 255,0.5);
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }
    .videobox:hover{
      background-color: rgba(192, 255, 239, 0.2);
      transform: scale(1.1);
    }

    .title-box {
      
      border: 2px dashed #000; 
      padding: 10px 20px; 
      border-radius: 10px; 
      background-color: rgba(255, 255, 255, 0.3); 
      display: inline-block; 
      margin-top: 10px; 
    }
    .title {
      font-size: 40px;
      font-family: font1;
      font-weight: bolder;
      
    }

    .people-box1{
      display: flex;
      margin-bottom: 120px;
      transition: all 0.5s;
    }
    .people-box2{
      display: flex;
      margin-top: 120px;
      transition: all 0.5s;
    }
    .people-box1:hover{
      background-color: rgba(248, 255, 192, 0.2);
      transform: scale(1.1);
    }
    .people-box2:hover{
      background-color: rgba(192, 255, 239, 0.2);
      transform: scale(1.1);
    }
    .F{
      display: flex;
      flex-wrap: wrap;
    }
    .information1{
      width: 450px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: rgb(255, 255, 255,0.5);
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      font-family: font1;
    }
    .information2{
      width: 450px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: rgb(255, 255, 255,0.5);
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      font-family: font1;
    }
    </style>
</head>
<body>
    <div class="A">
        <div><img src="./南波万logo灰.jpg" width="70px" height="50px"></div>
        <a href="./欢迎来到南波万.html" class="Aa">首页</a>
        <a href="./作品.html" class="Aa">作品</a>
        <a href="./语录.html" class="Aa">语录</a>
        <a href="./周边.html" class="Aa">周边</a>
        <a href="./登录界面.html" class="Aa">登录</a>
    </div>
    <div class="B">
        <div class="Ba">内娱独一份</div>
        <div class="Ba">无限流</div>
        <div class="Ba">主角团</div>
        <div class="Ba">群像天花板</div>
        <div class="Ba">“三高”</div>
        <div class="Ba">高智商</div>
        <div class="Ba">高学历</div>
        <div class="Ba">高颜值</div>
        <div class="Ba">智性恋天花板</div>
    </div>
    <div class="C">
        <div class="photos">
            <div class="photo"><img src="./合照1.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照2.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照3.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照4.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照9.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照6.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照7.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照8.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照5.png" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照10.png" width="1200px" height="700px"></div>
          
        </div>
    </div>
    <div class="D">
      <div class="title-box">
        <div class="title">舞台混剪</div>
      </div>
      <div class="first"><video src="./舞台混剪.mp4" width="800px" height="400px" controls></video></div>
    </div>
    <div class="title-box">
        <div class="title">舞台纯享</div>
      </div>
    <div class="E">
      
      <div class="videobox">
        <div class="video"><video src="./南波万.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">南波万</div></div>
        
      </div>
      <div class="videobox">
        <div class="video"><video src="./南波万的聚会.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box">
           <div class="smalltitle">南波万的聚会</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./宝藏就是你.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">宝藏就是你</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./Romance-石凯.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">Romance-石凯</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./卓别林的帽子-蒲熠星.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">卓别林的帽子-蒲熠星</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./好喜欢你-曹恩齐.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">好喜欢你-曹恩齐</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./成为你想成为的大人-黄子弘凡.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">成为你想成为的大人-黄子弘凡</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./最天使-火树.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">最天使-火树</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./笔记-何运晨.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">笔记-何运晨</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./那年夏天-文韬.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">那年夏天-文韬</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./致我的朋友-唐九洲.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">致我的朋友-唐九洲</div></div>
      </div>
      <div class="videobox">
        <div class="video"><video src="./让我为你唱首歌.mp4" width="350px" height="250px" controls></video></div>
        <div class="smalltitle-box"><div class="smalltitle">让我为你唱首歌</div></div>
      </div>
      
    </div>
      <div class="title-box">
        <div class="title">成员简介（部分）</div>
      </div>
    <div class="F">
      <div class="people-box1">
        <img src="./蒲熠星.jpg" width="150px" height="200px">
        <div class="information1">
          <div class="name">本名：蒲熠星</div>
          <div>称号：阿蒲、蒲喷喷、up、ppp、蒲罗旺斯</div>
          <div>毕业院校：南京大学（本科）约翰霍普金斯大学（研究生）</div>
          <div>学历：硕士</div>
          <div>职业：作家、演员、歌手、游戏主播</div>
          <div>代表作：《有人自林中坠落》、卓别林的帽子、一站到底等。</div>
        </div>
      </div>
      <div class="people-box2">
        <div class="information2">
          <div class="name">本名：郭文韬</div>
          <div>称号：文韬、ggg、韬韬、史呆芬</div>
          <div>毕业院校：北京大学光华管理学院（金融数学双学位）</div>
          <div>学历：本科</div>
          <div>职业：金融从业者、演员、歌手、品牌主理人</div>
          <div>代表作：勇敢的人先享受世界、名侦探学院、一站到底等。</div>
        </div>
        <img src="./郭文韬.jpg" width="150px" height="200px">
      </div>
      <div class="people-box1">
        <img src="./何运晨.jpg" width="150px" height="200px">
        <div class="information1">
          <div class="name">本名：何运晨</div>
          <div>称号：小何、何律、何par、小egg</div>
          <div>毕业院校：浙江工业大学（本科）北京航空航天大学（研究生）</div>
          <div>学历：硕士</div>
          <div>职业：律师</div>
          <div>代表作：令人心动的offer1、名侦探学院、森林进化论等。</div>
        </div>
      </div>
      <div class="people-box2">
        <div class="information2">
          <div class="name">本名：曹恩齐</div>
          <div>称号：man哥、仙子、n7、帅王king、惹曼</div>
          <div>毕业院校：中央音乐学院</div>
          <div>学历：本科</div>
          <div>职业：演员、钢琴家</div>
          <div>代表作：你好，旧时光、摩天大楼、名侦探学院等。</div>
        </div>
        <img src="./曹恩齐.jpg" width="150px" height="200px">
      </div>
      <div class="people-box1">
        <img src="./火树.jpg" width="150px" height="200px">
        <div class="information1">
          <div class="name">本名：叶逊敏</div>
          <div>称号：火树、煤气罐罐、安吉尼尔·火、老万总</div>
          <div>毕业院校：清华大学（本硕博）</div>
          <div>学历：博士</div>
          <div>职业：游戏主播</div>
          <div>代表作：名侦探学院、森林进化论、京城大师赛等。</div>
        </div>
      </div>
      <div class="people-box2">
        <div class="information2">
          <div class="name">本名：罗予彤</div>
          <div>称号：二姐</div>
          <div>毕业院校：武汉大学</div>
          <div>学历：本科</div>
          <div>职业：演员</div>
          <div>代表作：乘风破浪、名侦探学院、森林进化论等。</div>
        </div>
        <img src="./罗予彤.jpg" width="150px" height="200px">
      </div>
      <div class="people-box1">
        <img src="./黄子弘凡.jpg" width="150px" height="200px">
        <div class="information1">
          <div class="name">本名：黄子弘凡</div>
          <div>称号：黄子、元元、只想搞石头的钱</div>
          <div>毕业院校：伯克利音乐学院</div>
          <div>学历：本科</div>
          <div>职业：歌手、音乐剧演员</div>
          <div>代表作：青火、成为你想成为的大人、天赐的声音等。</div>
        </div>
      </div>
      <div class="people-box2">
        <div class="information2">
          <div class="name">本名：石凯</div>
          <div>称号：凯凯、耶耶、skdd、只想搞钱的石头</div>
          <div>毕业院校：四川师范大学</div>
          <div>学历：本科</div>
          <div>职业：歌手、演员</div>
          <div>代表作：竹蜻蜓、Romance、独家听众等。</div>
        </div>
        <img src="./石凯.jpg" width="150px" height="200px">
      </div>
      <div class="people-box1">
        <img src="./邵明明.jpg" width="150px" height="200px">
        <div class="information1">
          <div class="name">本名：邵明明</div>
          <div>称号：明明</div>
          <div>毕业院校：四川绵阳师范学校</div>
          <div>学历：本科</div>
          <div>职业：主持人、歌手、演员</div>
          <div>代表作：名侦探学院、那个少年、对方正在输入中等。</div>
        </div>
      </div>
      <div class="people-box2">
        <div class="information2">
          <div class="name">本名：唐九洲</div>
          <div>称号：JoJo、粥止弱、唐葫芦串</div>
          <div>毕业院校：北京邮电大学</div>
          <div>学历：本科</div>
          <div>职业：演员、歌手、主持人</div>
          <div>代表作：爱你、致我的朋友、名侦探学院等。</div>
        </div>
        <img src="./唐九洲.jpg" width="150px" height="200px">
      </div>
      <div class="people-box1">
        <img src="./周峻纬.jpg" width="150px" height="200px">
        <div class="information1">
          <div class="name">本名：周峻纬</div>
          <div>称号：主任、那个男人</div>
          <div>毕业院校：加拿大麦吉尔大学（社会学心理学双学位）</div>
          <div>学历：本科</div>
          <div>职业：演员、歌手</div>
          <div>代表作：琉璃、宁安如梦、名侦探学院等。</div>
        </div>
      </div>
      <div class="people-box2">
        <div class="information2">
          <div class="name">本名：齐思钧</div>
          <div>称号：小齐、甄红、齐得龙</div>
          <div>毕业院校：中国传媒大学</div>
          <div>学历：本科</div>
          <div>职业：主持人、演员</div>
          <div>代表作：我是特优声、披荆斩棘、乘风破浪等。</div>
        </div>
        <img src="./齐思钧.jpg" width="150px" height="200px">
      </div>
    </div>

</body>
</html>

页面二：作品

左侧导航栏、右侧关键词 
中间自上而下为图片集、代表作品一览

  • 代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品</title>
    <style>
    body{
        width: 94%;
        margin: 0;
        top: 0;
        padding-left: 6%;
        background-image: url(./风景2.jpg);
        background-repeat: no-repeat; 
        background-size: cover; 
        background-attachment: fixed;
    }
    .A{
        width: 6%;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        background-color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        z-index: 9999;
    }
    .Aa{
        font-size: 35px;
        list-style: none;
        margin: 15px 0; 
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        text-align: center;
        padding: 5px 10px;
        border-radius: 5px;
        font-family: font1;
    }
    .Aa:hover{
            background-color: #555;
            transform: scale(1.1);
    }

    .B{
        width: 12%;
        height: 100%;
        right: 0;
        top: 0;
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        z-index: 9999;
        
    }
    .Ba{
        font-size: 27px;
        list-style: none;
        margin: 17px 0;
        font-family: font1; 
        color: pink;
        background-color: #555;
        transition: all 0.3s ease;
        text-align: center;
        border-radius: 5px;
        line-height: 2.0;
    }
    .Ba:nth-child(1) {
      margin-left: 5px;
      transform: translateX(-10px) translateY(3px) rotate(-5deg);
    }

    .Ba:nth-child(2) {
      margin-left: 15px;
      transform: translateX(50px) translateY(-5px) rotate(3deg);
    }

    .Ba:nth-child(3) {
      margin-left: 0px;
      transform: translateX(-5px) translateY(-20px) rotate(-8deg);
    }

    .Ba:nth-child(4) {
      margin-left: 12px;
      transform: translateX(15px) translateY(-20px) rotate(5deg);
    }

    .Ba:nth-child(5) {
      margin-left: 3px;
      transform: translateX(25px) translateY(5px) rotate(0deg);
    }

    .Ba:nth-child(6) {
      margin-left: 18px;
      transform: translateX(0px) translateY(-7px) rotate(3deg);
    }

    .Ba:nth-child(7) {
      margin-left: 1px;
      transform: translateX(80px) translateY(-20px) rotate(-6deg);
    }

    .Ba:nth-child(8) {
      margin-left: 16px;
      transform: translateX(10px) translateY(-30px) rotate(4deg);
    }

    .Ba:nth-child(9) {
      margin-left: 4px;
      transform: translateX(-6px) translateY(4px) rotate(deg);
    }

    .Ba:nth-child(10) {
      margin-left: 14px;
      transform: translateX(6px) translateY(-6px) rotate(6deg);
    }

    .Ba:hover{
            background-color: #555;
            transform: scale(1.1) rotate(0deg) translateX(0) translateY(0); 
    }
    @font-face {
        font-family: font1;
        src: url(./HYKeepRunning-55U.ttf);
    }
    
    .C{
        width: 1200PX;
        height: 700px;
        position: relative;
        overflow: hidden;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        background-size: 100% 700px;
        }
    .photos{
        display: flex;
        width: 400%;
        height: 100%;
        animation: photo 12s infinite linear;
    }
    .photo{
        width: 25%;
        height: 100%;
    }
    @keyframes photo {
        0%{transform: translateX(0);}        
        20%{transform: translateX(0);}        
        25%{transform: translateX(-25%);}        
        45%{transform: translateX(-25%);}        
        50%{transform: translateX(-50%);}        
        70%{transform: translateX(-50%);}        
        75%{transform: translateX(-75%);}        
        95%{transform: translateX(-75%);}        
        100%{transform: translateX(0);}        
    }
    .D{
      width: 94%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; 
      align-items: center;
    }
    .picturebox{
      height: 330px;
      width: 290px;
      display: flex;
      flex-direction: column;
      margin: 5px;
      justify-content: center;
      align-items: center;
      transition: all 0.5s;
      border-radius: 15px;
      background-color: rgb(255, 255, 255,0.5);
    }
    .picturebox img{
        margin-top: 10px;
    }
    .smalltitle{
      font-size: 25px;
      font-family: font1;
      text-align: center;
    }
    .smalltitle-box{
      width: 100%;
      height: 330px;
    }
    .picturebox:hover{
      background-color: rgba(192, 255, 239, 0.2);
      transform: scale(1.1);
    }

    .title-box {
      
      border: 2px dashed #000; 
      padding: 10px 20px; 
      border-radius: 10px; 
      background-color: rgba(255, 255, 255, 0.3); 
      display: inline-block; 
      margin-top: 20px; 
    }
    .title {
      font-size: 40px;
      font-family: font1;
      font-weight: bolder;
      
    }

    </style>
</head>
<body>
   
    <div class="A">
        <div><img src="./南波万logo灰.jpg" width="70px" height="50px"></div>
        <a href="./欢迎来到南波万.html" class="Aa">首页</a>
        <a href="./作品.html" class="Aa">作品</a>
        <a href="./语录.html" class="Aa">语录</a>
        <a href="./周边.html" class="Aa">周边</a>
        <a href="./登录界面.html" class="Aa">登录</a>
    </div>
    <div class="B">
        <div class="Ba">内娱独一份</div>
        <div class="Ba">无限流</div>
        <div class="Ba">主角团</div>
        <div class="Ba">群像天花板</div>
        <div class="Ba">“三高”</div>
        <div class="Ba">高智商</div>
        <div class="Ba">高学历</div>
        <div class="Ba">高颜值</div>
        <div class="Ba">智性恋天花板</div>
    </div>
    <div class="C">
        <div class="photos">
            <div class="photo"><img src="./合照11.jpg" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照12.jpg" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照13.jpg" width="1200px" height="700px"></div>
            <div class="photo"><img src="./合照14.jpg" width="1200px" height="700px"></div>、
          
        </div>
    </div>
    <div class="title-box">
        <div class="title">名侦探学院</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院1.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第一季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院2.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第二季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院3.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第三季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院4.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第四季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院5.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第五季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院6.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第六季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院7.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第七季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./名侦探学院8.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">名侦探学院 第八季</div></div>
      </div>
    </div>


    <div class="title-box">
        <div class="title">密室大逃脱·大神版</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./密室大逃脱1.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">密室大逃脱 第一季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./密室大逃脱2.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">密室大逃脱 第二季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./密室大逃脱3.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">密室大逃脱 第三季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./密室大逃脱4.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">密室大逃脱 第四季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./密室大逃脱5.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">密室大逃脱 第五季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./密室大逃脱6.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">密室大逃脱 第六季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./密室大逃脱7.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">密室大逃脱 第七季</div></div>
      </div>
    </div>

     <div class="title-box">
        <div class="title">跳进地理书的旅行</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./跳进地理书的旅行1.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">跳进地理书的旅行 第一季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./跳进地理书的旅行2.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">跳进地理书的旅行 第二季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./跳进地理书的旅行3.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">跳进地理书的旅行 第三季</div></div>
      </div>
    </div>

     <div class="title-box">
        <div class="title">森林进化论</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./森林进化论1.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">森林进化论 第一季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./森林进化论2.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">森林进化论 第二季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./森林进化论3.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">森林进化论 第三季</div></div>
      </div>
    </div>

    <div class="title-box">
        <div class="title">南波万的聚会</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./南波万的聚会1.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">南波万的聚会 第一季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./南波万的聚会2.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">南波万的聚会 第二季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./南波万的聚会3.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">南波万的聚会 第三季</div></div>
      </div>
    </div>

    <div class="title-box">
        <div class="title">YES OR NO</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./YES OR NO1.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">YES OR NO 第一季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./YES OR NO2.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">YES OR NO 第二季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./YES OR NO3.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">YES OR NO 第三季</div></div>
      </div>
    </div>

    <div class="title-box">
        <div class="title">院人全年无休计划</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./院人全年无休计划1.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">院人全年无休计划  第一季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./院人全年无休计划2.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">院人全年无休计划 第二季</div></div>
      </div>
    </div>

    <div class="title-box">
        <div class="title">更多综艺</div>
      </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./魔方新世界.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">魔方新世界</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./全员加速中对战季.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">全员加速中对战季</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./海域追光·春日限定.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">海域追光·春日限定</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./友有游几天·夏日限定.jpg" width="200px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">友有游几天·夏日限定</div></div>
      </div>
    </div>
</body>
</html>

页面三：语录

左侧导航栏、右侧口号、中间为各位成员的经典话语

  • 代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语录</title>
    <style>
        body{
        width: 1000px;
        margin: 0;
        padding-left: 225px;
        display: flex;
        flex-wrap: wrap;
        background-image: url(./风景2.jpg);
        background-repeat: no-repeat; 
        background-size: cover; 
        }
    .A{
        width: 225px;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        background-color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        z-index: 9999;
    }
    .Aa{
        font-size: 45px;
        list-style: none;
        margin: 28px 0; 
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        text-align: center;
        padding: 5px 10px;
        border-radius: 5px;
        font-family: font1;
    }
    .Aa:hover{
            background-color: #555;
            transform: scale(1.1);
    }
    .B{
        width: 275px;
        height: 100%;
        right: 0;
        top: 0;
        position: fixed;
        background-color: #333;
        z-index: 9999;
        font-size: 130px;
        display: flex;
        flex-direction: column;
        font-family: font1;
        text-align: center;
        line-height: 1;
        color: rgb(220,220,220,0.8);
    }
    @font-face {
        font-family: font1;
        src: url(./HYKeepRunning-55U.ttf);
    }
    
    
    .picture1{
        top: 0;
        display: flex;
        flex-direction: column; 
        margin: 20px;
    }
    
    .picture1 img{
        margin: 20px;
        border-radius: 15px;
        transition: all 0.3s;
    }
    .picture1 img:hover{
        transform: scale(1.1);
    }
    
    .picture1>:nth-child(2){
        margin-left: 55px;
    }
    .picture1>:nth-child(4){
        margin-left: 55px;
    }
    .picture1>:nth-child(6){
        margin-left: 55px;
    }
    .picture2 img:hover{
        transform: scale(1.1);
    }
    
    
    .picture2{
        display: flex;
        margin-top: 250px;
        margin-left: 20px;
        flex-direction: column;
        border-radius: 15px;
    }
    .picture2 img{
        margin: 20px;
        border-radius: 15px;
        transition: all 0.3s;
    }
    .picture2 img:hover{
        transform: scale(1.1);
    }

    .picture2>:nth-child(1){
        margin-left: -25px;
    }
    .picture2>:nth-child(3){
        margin-left: -25px;
    }
    .picture2>:nth-child(5){
        margin-left: -25px;
    }
    </style>
</head>
<body>
   
    <div class="A">
        <div><img src="./南波万logo灰.jpg" width="140px" height="80px"></div>
        <a href="./欢迎来到南波万.html" class="Aa">首页</a>
        <a href="./作品.html" class="Aa">作品</a>
        <a href="./语录.html" class="Aa">语录</a>
        <a href="./周边.html" class="Aa">周边</a>
        <a href="./登录界面.html" class="Aa">登录</a>
    </div>
    <div class="B">
        <div>要</div>
        <div>做</div>
        <div>就</div>
        <div>做</div>
        <div>NO.1</div>
        <div>!!!</div>
    </div>
        <div class="picture1">
            <img src="./蒲熠星语录.jpg" width="400px" height="500px">
            <img src="./曹恩齐语录.jpg" width="400px" height="500px">
            <img src="./唐九洲语录.jpg" width="400px" height="500px">
            <img src="./黄子弘凡语录.jpg" width="400px" height="500px">
            <img src="./周峻纬语录.jpg" width="400px" height="500px">
            <img src="./火树语录.jpg" width="400px" height="500px">
           
        </div>
        <div class="picture2">
            <img src="./郭文韬语录.jpg" width="400px" height="500px">
            <img src="./何运晨语录.jpg" width="400px" height="500px">
            <img src="./邵明明语录.jpg" width="400px" height="500px">
            <img src="./石凯语录.jpg" width="400px" height="500px">
            <img src="./齐思钧语录.jpg" width="400px" height="500px">

    </div>
</body>
</html>

页面四：周边

左侧导航栏、右侧为团队相关周边售卖

  • 代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周边</title>
    <style>
        body{
        width: 90%;
        background-image: url(./风景2.jpg);
        background-repeat: no-repeat; 
        background-size: 100% 100%; 
      
    }
    .A{
        width: 6%;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        background-color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        z-index: 9999;
    }
    .Aa{
        font-size: 35px;
        list-style: none;
        margin: 15px 0; 
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        text-align: center;
        padding: 5px 10px;
        border-radius: 5px;
        font-family: font1;
    }
    .Aa:hover{
            background-color: #555;
            transform: scale(1.1);
    }

    
    @font-face {
        font-family: font1;
        src: url(./HYKeepRunning-55U.ttf);
    }

    .D{
        margin-left: 8%;
        width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; 
        justify-content: center;
        align-items: center;
    }
    .picturebox{
      height: 315px;
      width: 315px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 3px;
      align-items: center;
      transition: all 0.5s;
      border-radius: 15px;
      background-color: rgb(255, 255, 255,0.5);
    }
    .picturebox img{
        margin-top: 25px;
    }
    .smalltitle{
      font-size: 20px;
      font-family: font1;
      text-align: center;
    }
    .picturebox:hover{
      background-color: rgba(192, 255, 239, 0.2);
      transform: scale(1.1);
    }
   
    </style>
</head>
<body>
    
    <div class="A">
        <div><img src="./南波万logo灰.jpg" width="70px" height="50px"></div>
        <a href="./欢迎来到南波万.html" class="Aa">首页</a>
        <a href="./作品.html" class="Aa">作品</a>
        <a href="./语录.html" class="Aa">语录</a>
        <a href="./周边.html" class="Aa">周边</a>
        <a href="./登录界面.html" class="Aa">登录</a>
    </div>

    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./专辑.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">JoJo首发《PRE2EN7》专辑</div></div>
      </div>
    </div>
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./有人自林中坠落.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">阿蒲新书《有人自林中坠落》</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./喂你好吗.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">小齐新书《喂，你好吗？》</div></div>
      </div>
    </div>
   
    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./抱枕.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">学长人形抱枕</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./玩偶.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">学长Q版玩偶</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./南波饼.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">新成员南波饼</div></div>
      </div>
    </div>

    <div class="D">
      <div class="picturebox">
        <div class="picture"><img src="./南波小兔1.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">南波小兔乐高拼图</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./南波小兔2.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">中号南波小兔玩偶</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./南波小兔3.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">南波小兔冰垫</div></div>
      </div>
      <div class="picturebox">
        <div class="picture"><img src="./雨伞.jpg" width="250px" height="250px" ></img></div>
        <div class="smalltitle-box"><div class="smalltitle">南波小兔雨伞</div></div>
      </div>
      
    </div>
   
</body>
</html>

页面五：登录

左侧导航栏、右侧口号、中间自上而下为图片集、登录界面

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        body{
        width: 1000px;
        margin: 0;
        padding-left: 225px;
        display: flex;
        flex-wrap: wrap;
        background-image: url(./风景2.jpg);
        background-repeat: no-repeat; 
        background-size: cover; 
    }
    .A{
        width: 225px;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        background-color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        z-index: 9999;
    }
    .Aa{
        font-size: 45px;
        list-style: none;
        margin: 28px 0; 
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        text-align: center;
        padding: 5px 10px;
        border-radius: 5px;
        font-family: font1;
    }
    .Aa:hover{
            background-color: #555;
            transform: scale(1.1);
    }
    .B{
        width: 275px;
        height: 100%;
        right: 0;
        top: 0;
        position: fixed;
        background-color: #333;
        z-index: 9999;
        font-size: 130px;
        display: flex;
        flex-direction: column;
        font-family: font1;
        text-align: center;
        line-height: 1;
        color: rgb(220,220,220,0.8);
    }
    @font-face {
        font-family: font1;
        src: url(./HYKeepRunning-55U.ttf);
    }
    .C{
        width: 1000PX;
        height: 500px;
        position: relative;
        overflow: hidden;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        background-size: 100% 700px;
        }
    .photos{
        display: flex;
        width: 500%;
        height: 100%;
        animation: photo 20s infinite linear;
    }
    .photo{
        width: 20%;
        height: 100%;
    }
     @keyframes photo {
    0%{transform: translateX(0);}         
    20%{transform: translateX(0);}        
    25%{transform: translateX(-20%);}    
    45%{transform: translateX(-20%);}        
    50%{transform: translateX(-40%);}    
    70%{transform: translateX(-40%);}        
    75%{transform: translateX(-60%);}     
    95%{transform: translateX(-60%);}        
    100%{transform: translateX(-80%);}    
}
.D{
    width: 1000px;
    height: 470px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.Da{
    width: 400px;
    height: 430px;
    display: flex;
    border-radius: 10%;
}
.Db{
    width: 400px;
    height: 430px;
    background-color: white;
    line-height: 2.0;
    text-align: center;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
.title{
    margin-top: 25px;
    font-size: 25px;
    font-weight: bolder;
    text-align: center;
    font-family: font1;
    
}
.text{
    width: 302px;
    height: 40px;
    display: flex;
    margin-top: 20px;
    justify-content: center;
}
.submit{
    margin-top: 40px;
    width: 302px;
    height: 40px;
    background-color: rgb(7, 37, 105,0.7);
    border: 1px solid rgb(7, 37, 105,0.7) ;
    color: gainsboro;
    border: none;
    font-size: 15px;
    font-family: font1;

}
    </style>
</head>
<body>
    
    <div class="A">
        <div><img src="./南波万logo灰.jpg" width="140px" height="80px"></div>
        <a href="./欢迎来到南波万.html" class="Aa">首页</a>
        <a href="./作品.html" class="Aa">作品</a>
        <a href="./语录.html" class="Aa">语录</a>
        <a href="./周边.html" class="Aa">周边</a>
        <a href="./登录界面.html" class="Aa">登录</a>
    </div>
    <div class="B">
        <div>要</div>
        <div>做</div>
        <div>就</div>
        <div>做</div>
        <div>NO.1</div>
        <div>!!!</div>
    </div>
    <div class="C">
        <div class="photos">
            <div class="photo"><img src="./卡通合照1.jpg" width="1000px" height="500px"></div>
            <div class="photo"><img src="./卡通合照2.jpg" width="1000px" height="500px"></div>
            <div class="photo"><img src="./卡通合照3.jpg" width="1000px" height="500px"></div>
            <div class="photo"><img src="./卡通合照4.jpg" width="1000px" height="500px"></div>
            <div class="photo"><img src="./卡通合照5.jpg" width="1000px" height="500px"></div>
        </div>
    </div>
    <div class="D">
        <div class="Da"><img src="./兔子的本质是流浪2.jpg" width="400px" height="430px"></div>
        <div class="Db">
                <div class="title">登录界面</div>
                <div class="text">
                    <input type="text" name="username" placeholder="用户名" size="40px">
                </div>
                <div class="text">
                    <input type="password" name="password" placeholder="密码" size="40px">
                </div>
                <div class="text">
                    <input type="text" name="number" placeholder="手机号码" size="40px">
                </div>
                <div class="text">
                    <input type="text" name="number" placeholder="邮箱" size="40px">
                </div>
                <button type="submit" class="submit">登录</button>
            </div>
    </div>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布