前端作业之完成学校官方网页的制作

最新推荐文章于 2024-07-23 22:09:24 发布
最新推荐文章于 2024-07-23 22:09:24 发布
阅读量434 收藏
点赞数 2
分类专栏： 前端学习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banliyaoguai/article/details/137359730
版权

 （未使用框架，纯html和css制作）

注：由本人技术限制，代码复用性极差

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx大学</title>
    <style>
       
        .head_one{
            border-radius: 20px;

        }
        span{
            vertical-align: middle;
        }
        .top1{
            width: 100%;
            height: 25.67px;
            background-color: #c32929;
        }
        /* 回到首页 */
        a{
            text-decoration: none;
        }
        .a{
            vertical-align: text-bottom;
            font-size: smaller;
            color: aliceblue;

        }
        .b{
            display:inline-block;
            float: right;
            font-size: smaller;
            vertical-align: text-bottom;
            color: aliceblue;
        }
        .top2{
            height: 160px;
            width: 100%;
            background-color: #c32929;
            vertical-align: middle;
        }
        .c{
            width: 322px;
            height: 90px;
            margin-left: 22px;
            margin-top: 32px;
        }
        .d{
            width: 240px;
            height: 34px;
            /* margin-left: 820px; */
            border: 0;
            padding-left: 10px;
            outline: none;
            line-height: 28px;
            font-size: 12px;
            position: absolute;
            left: 1220px;
            top: 100px;
            display: block;
        }
        .e{
            width: 42px;
            height: 34px;
            position: absolute;
            left: 250px;
            top: 0px;
            background-image: url(./学校门互网站素材/搜索图标.png);
            border: 0px;
            background-color: transparent;
            outline: none;
            position: absolute;
            left: 1460px;
            top: 100px;
            display: block;
        }
        .f{
            display: flex;
            width: 100%;
            height: 45px;
            justify-content: center;
            position: relative;
            top: 0;
            left: 0;
        }
        .f>ul{
            position: absolute;
            top:auto;
        }
        .f1{
            width: 109px;
            height: 45px;
            position: relative;
            top: 0;
            left: 0;
        }

        .f1>a{
            color: #990100;
            position: absolute;
            top: 12px;
            left: 22px;
        }
        .f2{
            display: none; 
        }
        /* ul{
            display: none;
        } */
        .f1:hover{
            background-color: #ff7f00;
            
        }
        .f1:hover.f2{
            display: inline-block;
            background-color: #990100;
        }
        .g1{
            width: 100%;
            height: 280px;
        }
        .main{
            position: relative;
            width: 100%;
            height: 450px;
            overflow: hidden;
            border-radius: 5px;
        }
        .item{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            transition: all 0.5s;
            background-size: cover;
        }
        .item1{
           background-image: url(./img/1.jpg);
        }
        .item2{
            background-image: url(./img/4.jpg);
            left: 100%;
        }
        .item3{
            background-image: url(./img/11.jpg);
            left: 200%;
        }
        input{
            position: relative;
            z-index: 100;
            display: none;
        }
        .select{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 10px;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;         
        }
        .select>label{
            width: 10px;
            height: 10px;
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
            cursor: pointer;
            border: 1.5px solid white;
        }
        .main input:nth-of-type(1):checked ~ .select label:nth-of-type(1){
            background-color: rgb(26, 26, 26);
        }
        .main input:nth-of-type(2):checked ~ .select label:nth-of-type(2){
            background-color: rgb(26, 26, 26);
        }
        .main input:nth-of-type(3):checked ~ .select label:nth-of-type(3){
            background-color: rgb(26, 26, 26);
        }
        .main input:nth-of-type(1):checked ~ .item{
            transform: translateX(0);
        }
        .main input:nth-of-type(2):checked ~ .item{
            transform: translateX(-100%);
        }
        .main input:nth-of-type(3):checked ~ .item{
            transform: translateX(-200%);
        }
        .h{
            
            background-color: #dddddd;
            width: 100%;
            height: 294px;
            position: relative;
            top: 0;
            left: 0;
        }
        .h0{
            display: flex;
            width: 80%;
            height: 290px;
            position: absolute;
            left: 20%;
        }
        /* .h1{
            background-color: #990100;
        } */
        .h2_1{
            width: 398px;
            height: 40px;
            font-size: 20px;
            color: #990100;
            /* background-color: gold; */
        }
        .h1_1{
            /* background-color: aquamarine; */
            width: 660px;
            height: 40px;
            font-size: 20px;
            color: #990100;
            /* display: table-cell;
            text-align: center; */
            /* border-bottom: 1px #990100 solid; */
            /* text-align: center; */
        }
        .h1-1-1{
            margin: 0;
            float: left;
            display: block;
            list-style-type: none;
            /* flex-direction: column； */
            
        }
        .h1-1-1 li{
            padding-top: 10px;
        }
        .h1_1_1{
            margin: 0;
            float: right;
            display: block;
            list-style-type: none;
            /* flex-direction: column； */
        }
        .h1_1_1 li{
            padding-top: 10px;
        }

        li{
            list-style-type: none;
        }
        .h2-2-2{
            float: left;
        }
        .h2_2_1 li{
            padding-bottom:15px;
            padding-top: 2px;
        }
        .h2_2_2>a{
            color: black;
        }
        .x {
        width: 48px;
        text-align: center;
        color: #fff;
        background: #990100;
        line-height: 16px;
        font-size: 12px;
        display: block;
         }
        .s {
        width: 48px;
        text-align: center;
        color: #4E4E4E;
        line-height: 26px;
        font-size: 18px;
        display: block;
        background: #F5F5F6;
         }
         .h2-2-2-2{
            float: right;
         }
         .h2-2-2-1{
            float: left;
         }
         .h2-2-1-1{
            width: 398px;
            margin-top: 0px;
            float: left;
         }
         .i{
            width: 1004px;
            /* height: auto; */
            margin: 0 auto;
         }
         .i1{
            width: 1004px;
            height: 40px;
            line-height: 10px;
            font-size: 20px;
            color: #990100;
            border-bottom: 1px #990100 solid;
         }
         .i1-1{
            float: left;
         }
         .i1-2{
            float: right;
         }
         .j{
            width: 1004px;
            height: 300px;
            display :grid;
            grid-template-columns:repeat(3,1fr) ;
            grid-template-rows: repeat(2,1fr);
            
         }
         .j1{
            width: 320px;
            height: 136px;
            background-color: #990100;
            margin: 0;
            display: flex;
         }
         /* .j1-1{
            width: 316px;
            height: 135px;
            margin-right: 28px;
            margin-bottom: 20px;
            background: #dddddd;
            float: left;
         } */
         .k{
            width: 1130px;
            height: 210px;
            margin: 0 auto 30px;
            display: grid;
            grid-template-columns:repeat(8,1fr) ;
            /*  设置当前网格有多少行 */
            grid-template-rows: repeat(2,1fr);

         }
         .k1{
            height: 100px;
            width: 135px;
            /* background-color: #990100; */
         }
        .l{
            width: 100%;
            height: 255px;
            background: #990100;
        }
        .l1{
            width: 1004px;
            height: 255px;
            margin: 0 auto;
            background: #ff7f00;
            text-align: center;
            line-height: 120px;

        }
        
    </style>
</head>
<body>
    <div class="head_one">
        <div class="top1">
            &nbsp&nbsp&nbsp&nbsp
            <a class="a" href="">回到首页</a>
            <span>|</span>
            <a class="a" href="">English</a>
            <div class="b"> 
            <span >本站支持IPv6</span>&nbsp&nbsp&nbsp&nbsp&nbsp
            </div>
        </div>
        <div class="top2">
            <img class="c" src="./学校门互网站素材/学校名称.png" alt="">
            <input class="d" type="search">
            <input class="e" type="submit" value="  ">
        </div>
        <div class="f">
            <div class="f1"><a href="">首页</a></div>
            <div class="f1"><a href="">学校概况</a></div>
            <div class="f1"><a href="">院部设置</a></div>
            <div class="f1"><a href="">组织机构</a></div>
            <div class="f1"><a href="">人才培养</a></div>
            <div class="f1"><a href="">科学研究</a></div>
            <div class="f1"><a href="">学科建设</a></div>
            <div class="f1"><a href="">师资力量</a></div>
            <div class="f1"><a href="">招生就业</a></div>
            <div class="f1"><a href="">校园生活</a></div>
        </div>
        <ul class="f2">
            <li><a href="">学校简介</a></li>
            <li><a href="">学校章程</a></li>
            <li><a href="">历史沿革</a></li>
            <li><a href="">学校领导</a></li>
            <li><a href="">组织机构</a></li>
            <li><a href="">学校地图</a></li>
        </ul>
        
         <div class="main">
            <!-- 三个单选按钮，先默认选择第一个 -->
            <input type="radio" name="choose" id="choose1" checked>
            <input type="radio" name="choose" id="choose2">
            <input type="radio" name="choose" id="choose3">      
            <!-- 放三张图片，用背景图片表示 -->
            <div class="item item1"><a href=""><img width="100%" height="450px" src="./学校门互网站素材/永远跟党走.jpg" alt=""></a></div>
            <div class="item item2"><a href=""><img width="100%" height="450px" src="./学校门互网站素材/永远跟党走.jpg" alt=""></a></div>
            <div class="item item3"><a href=""><img width="100%" height="450px" src="./学校门互网站素材/永远跟党走.jpg" alt=""></a></div>
            <!-- 三个label标签 -->
             <span class="select">
                 <label for="choose1"></label>
                 <label for="choose2"></label>
                 <label for="choose3"></label>
             </span>
        </div>
        
        <div width="100%" height="150px">&nbsp;<br>&nbsp;</div>
        <div class="h">
            <div class="h0">
            <div class="h1">
                <div class="h1_1">
                    <ul class="h1-1-1"><li>奋斗新征程  建工新时代</li></ul>
                    <ul class="h1_1_1"><li><a href="">+Mare</a></li></ul></div>
                    <hr>
                    <ul class="h2-2-2"><li><a href=""><img src="./学校门互网站素材/不忘新征程.png" width="269px" height="200px" alt=""></a></li></ul>
                    <ul class="h2_2_1">
                        <li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li>
                        <li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li>
                        <li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li>
                        <li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li>
                        <li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li>
                        <li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li>
                    </ul>
            </div>
            <div class="h2">
                <div class="h2_1">
                <ul class="h1-1-1"><li>通知公告</li></ul>
                <ul class="h1_1_1"><li><a href="">+Mare</a></li></ul></div>
                
                <hr>
            <div class="h2-2-1-1">
                <ul class="h2-2-2-1">
                    <li>
                        <span class="s">06</span>
                        <span class="x">2024.03</span>
                    </li>
                </ul>
                <ul class="h2-2-2-2">
                    <li>
                        <a href="">关于学生体质健康测试免测申请通知</a>
                    </li>
                </ul>
            </div>
            
            <div class="h2-2-1-1">
                 <ul class="h2-2-2-1">
                    <li>
                        <span class="s">17</span>
                        <span class="x">2023.03</span>
                    </li>
                </ul> 
                 <ul class="h2-2-2-2">
                    <li>
                        <a href="">关于学生体质健康测试免测申请通知</a>
                    </li>
                </ul>
            </div>

            <div class="h2-2-1-1">
                <ul class="h2-2-2-1">
                   <li>
                       <span class="s">19</span>
                       <span class="x">2022.03</span>
                   </li>
               </ul> 
                <ul class="h2-2-2-2">
                   <li>
                       <a href="">关于学生体质健康测试免测申请通知</a>
                   </li>
               </ul>
           </div>
            </div>
            </div>
        </div>
            
        <div width="100%" height="100px">&nbsp;<br>&nbsp;</div>
        <div class="i">
            <div class="i1">
                <ul class="i1-1"><li>讲座报告</li></ul>
                <ul class="i1-2"><li><a href="">+Mare&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li></ul>
            </div>
            <!-- <hr> -->
        <div class="j">
            <div class="j1">
                <div class="j1-1">
                    <img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px">
                </div>
                <div class="j1-1">
                    <ul>
                        <li>科技大讲堂</li>
                        <li>报告人：张三</li>
                        <li>时间：3月15日（周五）16：00</li>
                        <li>地点：图书馆</li>
                    </ul>
                </div>
            </div>
            <div class="j1">
                <div class="j1-1">
                    <img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px">
                </div>
                <div class="j1-1">
                    <ul>
                        <li>科技大讲堂</li>
                        <li>报告人：张三</li>
                        <li>时间：3月15日（周五）16：00</li>
                        <li>地点：图书馆</li>
                    </ul>
                </div>
            </div>
            <div class="j1">
                <div class="j1-1">
                    <img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px">
                </div>
                <div class="j1-1">
                    <ul>
                        <li>科技大讲堂</li>
                        <li>报告人：张三</li>
                        <li>时间：3月15日（周五）16：00</li>
                        <li>地点：图书馆</li>
                    </ul>
                </div>
            </div>
            <div class="j1">
                <div class="j1-1">
                    <img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px">
                </div>
                <div class="j1-1">
                    <ul>
                        <li>科技大讲堂</li>
                        <li>报告人：张三</li>
                        <li>时间：3月15日（周五）16：00</li>
                        <li>地点：图书馆</li>
                    </ul>
                </div>
            </div>
            <div class="j1">
                <div class="j1-1">
                    <img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px">
                </div>
                <div class="j1-1">
                    <ul>
                        <li>科技大讲堂</li>
                        <li>报告人：张三</li>
                        <li>时间：3月15日（周五）16：00</li>
                        <li>地点：图书馆</li>
                    </ul>
                </div>
            </div>
            <div class="j1">
                <div class="j1-1">
                    <img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px">
                </div>
                <div class="j1-1">
                    <ul>
                        <li>科技大讲堂</li>
                        <li>报告人：张三</li>
                        <li>时间：3月15日（周五）16：00</li>
                        <li>地点：图书馆</li>
                    </ul>
                </div>
            </div>
        </div>
        </div>

        <div class="k">
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>教务在线</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>研究生教育</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>图书资源</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>财务平台</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>信息公开</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园邮箱</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园一卡通</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>教务在线</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>研究生教育</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>图书资源</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>财务平台</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>信息公开</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园邮箱</a></div>
            <div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园一卡通</a></div>
        </div>
    <div class="l">
        <div class="l1"> 
                <ul>
                <li>地址：中国</li>
                <li>联系我们：xxx@.com</li>
                </ul>
        </div>
    </div>
    </div>
    
</body>
</html>

结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

板栗妖怪
关注
专栏目录
web前端网页制作课作业：校园科技节活动网站 (纯HTML+CSS布局制作)
HTML网页设计
08-09 776
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
school_Website_by_abhi:它包含学校网站前端的完整源代码-ab source code
03-24
school_Website_by_abhi 它包含学校网站前端的完整源代码
HTML做一个学校网站（纯html代码）
HTML网页设计 专注大学生网页设计
04-09 546
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
html学校官网
最新发布
2303_81782041的博客
07-23 228
教职工登录页面同学生一样。
web前端 css学校官网（导航栏）
Asitpun的博客
06-09 436
导航栏悬停框
【优质】「web开发网页制作」—html+css+js实现学校官网网页制作(带轮播效果5页面)【附源码】
赏樱看雪撸代码
12-27 1129
学校官网主题网页制作，学校网站5页面，网页制作轮播，网页制作div+css+js，校园网站成品，CSS+DIV布局，js实现轮播效果，表单登录页面，期末网页大作业，网页作业成品，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。
html实现学校网站
06-22
用html实现的简单的学校代码。主页里面的对应的附属页。相应有附属页用一个文件夹保存
web前端网页设计作品web期末大作业web前端作业网页制作代码web大作业制作网页代码
07-10
临近期末, 你是否还在为HTML网页设计期末...多套(HTML+CSS+JS)网页设计的学生期末大作业，都符合学校或者学生考试期末作业的水平，都是div+css框架代码写的，可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载!
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
- **项目背景**：本项目是一份针对大学期末考核而设计的前端网页制作作业，主要面向的是初学者或大学生，目的是让学生能够通过实践来加深对HTML、CSS以及JavaScript的理解和运用。 - **项目目标**：通过完成此作业，...
html网页设计作业-基于html+css，制作的学校官网网页
12-29
【标题】中的“html网页设计作业-基于html+css，制作的学校官网网页”表明这是一个使用HTML和CSS技术设计的学校官方网站的项目。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading ...
school-www:学校网站前端
06-20
学校-www 学校网站前端
学校系统web网页设计
05-19
学校网页的HTML文件，实现了主页，导航栏，分页跳转的功能
学校部门网站html源码
06-15
学校整站源码 ，学校部门网站html源码，学校静态网站源码。
一个学校主页HTML代码
11-21
一个简洁的学院主页代码，html+css编写，有需要的朋友可以省下自己设计了。
HTML5学校网站模板
11-20
使用 ＨＴＭＬ５和css3制作的一个学校模板。没有投入 实际使用，只是一个简单的练习。
web前端期末节课大作业 ~HTML5响应式少儿舞蹈培训学校网站模板.zip
06-18
本项目是一个基于HTML5的响应式少儿舞蹈培训学校网站模板，专为web前端学习者设计，适合作为期末课程的大作业或毕业设计的参考。这个模板具有高度的自适应性，能够良好地在不同分辨率的设备上展示，无论是PC端还是...
JavaScript大作业 制作简单的程序员个人博客网站（web前端网页制作课作业）
08-10
根据给定文件的信息，我们可以提炼出以下几个主要的知识点： ...通过以上几个方面的综合运用，可以创建出既美观又实用的个人博客网站，不仅能够满足学校的作业要求，也能作为展示个人能力和兴趣爱好的平台。
web前端—学校官网制作（部分）
txtxla的博客
03-28 2980
【代码】web前端—学校官网制作（部分）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值