第九次作业---制作校园官网

最新推荐文章于 2025-04-21 17:34:48 发布
XRJ040618xrj
最新推荐文章于 2025-04-21 17:34:48 发布
阅读量145
点赞数 3
文章标签：前端 javascript html
本文链接：https://blog.youkuaiyun.com/XRJ040618xrj/article/details/145245174
版权
制作校园官网

代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box0{
            width: 1673px;
            height: 35px;
            border: 0px solid red;
        }
        .box0-1{
            width: 65px;
            height: 35px;
            border: 0px solid red;
            float: left; 
            background-color: rgb(211, 212, 217);
        }

        .box1{
            width: 225px;
            height: 35px;
            border: 0px solid red;
            float: left; 
            background-color: rgb(211, 212, 217);
        }

        .box2{
            width: 1163px;
            height: 35px;
            border: 0px solid rgb(12, 226, 94);
            float: left;
            background-color: rgb(211, 212, 217);
        }

        .box3{
            width: 200px;
            height: 35px;
            border: 0px solid rgb(21, 0, 255);
            float: left;
            background-color: rgb(211, 212, 217);
        }
        .box3-1{
            width: 20px;
            height: 35px;
            border: 0px solid red;
            float: left; 
            background-color: rgb(211, 212, 217);
        }
        
        .line0{
            margin: 7px;/* 设置box间的间距 根据 上 右 下 左 的顺序*/
            color: rgb(44, 157, 243);
        }
        .line1{
            margin: 5px;/* 设置box间的间距 根据 上 右 下 左 的顺序*/
            background-color: rgb(91, 117, 202);
            color: rgb(253, 253, 253);
        }

        .box4{
            width: 1673px;
            height: 70px;
            border: 0px solid red;
            
        }
        .box5{
            width: 130px;
            height: 70px;
            border: 0px solid rgb(10, 235, 59);
            float: left;
            
        }

        .box5>:hover{
            background-color: rgb(97, 129, 165);
            cursor: pointer; /*cursor: pointer 将光标变为pointer(手势)*/


        }
        .png0{
            width: 290px;
            height: 70px;
            border: 0px solid red;
        }
       
        .box5-1{
            width: 50px;
            height: 70px;
            border: 0px solid rgb(235, 10, 183);
            float: left;

        } 
        .box100{
            width: 130px;
            height: 50px;
            border: 0px solid rgb(10, 13, 233);
            float: left;
            text-align: center; /* text-align: center 将文字居中*/
            margin: 9px 0px 0px 0px;/* 设置box间的间距 根据 上 右 下 左 的顺序*/
            cursor: pointer; /*cursor: pointer 将光标变为pointer(手势)*/
            float: left;
            line-height:48.5px ; /* 设置行高*/
        } 

        .box7{
            width: 70px;
            height: 70px;
            border: 0px solid rgb(59, 10, 235);
            float: left;
            
        }

        .box8{
            width: 142px;
            height: 70px;
            border: 0px solid rgb(59, 10, 235);
            float: left;   
        }
        .box8-1{
            width: 142px;
            height: 70px;
            border: 0px solid rgb(10, 235, 14);
            float: left;  

        }

        .png1{
            width: 100px;
            height: 30px;
            color: #ffffff;
            background-color: rgb(91, 117, 202);
            margin: 19px;   
        }

        .png2{
            width: 1673px;
            height: 580px;
        }

        .box9{
            width: 1673px;
            height: 45px;
            border: 0px solid red;

        }

        .box16{
            width: 1550px;
            height: 70px;
            border: 0px solid red;
            margin: auto;
            line-height:28px ; /* 设置行高*/
        }






        
        .box10{
            width: 1570px;
            height: 670px;
            border: 0px solid rgb(55, 0, 255);
            margin: auto;/*margin:auto 将box1自动居中*/
            
        }

        .box11{
            width: 360px;
            height: 290px;
            border: 0px solid rgb(0, 255, 110);
            box-shadow: 2px 2px 2px 2px  #999;/*制作阴影部分*/
            float: left;/* float: left 使标签向左聚集(浮动)*/
            margin: 15px 15px 15px 15px;/* 设置box间的间距 根据 上 右 下 左 的顺序*/
            
        }

        .box12{
            width: 360px;
            height: 200px;
            border: 0px solid red;
        }

        .box11:hover .box13{ /*鼠标移动到box1区域时显示透明部分*/
            display: block;/* 将透明框显示*/
             
        }

        .box15{
            border: 0px solid rgb(11, 11, 11);
            position: relative;/* 相对定位*/ 
        }

        .box13{
            width: 360px;
            height: 40px;
            border: 0px solid red;
            position: absolute;/* 绝对定位*/
            left: 0;
            bottom: 0;    
            background-color: rgba(0, 0, 0, 0.5);/* 透明色*/
            color: #dad7d7;
            line-height: 40px;
            display: none;/* 将透明框隐藏*/
            }

        .clear_float{
            clear: both;/* 清除浮动*/
        }

        .box17{
            color: #9d9ea0;

        }




        .box18{
            width: 1673px;
            height: 0px;
            border: 1px solid rgb(194, 190, 190);
        }
        .box19{
            width: 100px;
            height: 100px;
            border: 0px solid red;
        }
        .png3{
            width: 1673px;
            height: 300px;
        }

    </style>
</head>
<body>
    <div class="box0">
        <div class="box0-1">  
            <div class="box"> <p class="line0"></p></div>
        </div>

        <div class="box1">  
            <div class="box"> <p class="line0">欢迎来到在线教学平台</p></div>
        </div>

        <div class="box2">
             <div class="box"> </div>
        </div>

        <div class="box3">  
            <div class="box"> <button class="line1">&nbsp;在线答疑&nbsp;</button></div>
        </div>

        <div class="box3-1">  
            <div class="box"> <p class="line0"></p></div>
        </div>
    </div>

    <div class="box4">
        <div class="box5">
            <div class="100"><img class="png0" src="img/银川科技学院.png"></div>
        </div>

        <div class="box5">
            <div class="100"></div>
        </div>

        <div class="box5-1">
           <div class="box"></div>
        </div>

        <div class="box5">
            <div class="box100"><a class="box101"><b>首页</b></a></div>
         </div>

         <div class="box5">
            <div class="box100"><a class="box101"><b>全部课程</b></a></div>
         </div>

        <div class="box5">
            <div class="box100"><a><b>公开课</b></a></div>
         </div>

         <div class="box5">
            <div class="box100"><a><b>云课直播</b></a></div>
         </div>

         <div class="box5">
            <div class="box100"><a><b>新闻公告</b></a></div>
         </div>

         <div class="box5">
            <div class="box100"><a></a><b>数图资源</b></a></div>
         </div>

         <div class="box5">
            <div class="box100"><a><b>智汇大讲堂</b></a></div>
         </div>

         <div class="box7">
            <div class="box7-1"></div>
         </div>

         <div class="box8">
            <div class="box8-1">
               <button class="png1"><b>学生登陆</b></button>
            </div>
         </div>

         <div class="box8">
            <div class="box8-1">
               <button class="png1"><b>教师登陆</b></button>
            </div>
         </div>
    </div>

    <div>
        <img class="png2" src="img/微信截图_20250119013923.png">
    </div>

    <div class="box9"></div>

    <div class="box16"><h1>公开课</h1></div>





    <div class="box10">
        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>

        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>

        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>

        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>

        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>

        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>

        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>

        <div class="box11">
            <div class="box15">
                <img class="box12" src="/img/微信截图_20250119170749.png">
                <div class="box13">&nbsp;&nbsp;&nbsp;播放量900000+</div> 
            </div>
            <p class="box14"><b>&nbsp;&nbsp;毛泽东思想和社会主义理论体系概论</b></p>
            <p class="box17">&nbsp;&nbsp;&nbsp;&nbsp;银川科技学院</p>
        </div>
    </div>

    <div class="box18"></div>

    <div class="box19"></div>

    <div class="box20">
        <img class="png3" src="/img/微信截图_20250119173748.png">
    </div>
</body>
</html>
运行结果: