15.我的大学班级网站大学生期末大作业 Web前端网页制作 html5 css

一、网页简介

二、网页效果

三、代码展示

1.html

2.CSS

四、要点解析

五、更多推荐

一、网页简介

本实例共包含6个页面，应用html5+css，Div+css布局，设置包括菜单栏、二级菜单、图片轮翻、系统日期时间、文字滚动、搜索、登录、注册等。页面简单，代码精简，为初级的学生水平，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页效果

三、代码展示

节选代码示例如下：

1.html

<body οnlοad="showDT()">
<div class="one">

<div class="first">
<p ><a href="" style="color:#FF8C00;text-decoration:none " >已登录</a></span> | 我的班级 |  收藏夹  <img src="images\t_arrow.gif" alt="">  服务  <img src="images\t_arrow.gif" alt="" style="vertical-align:middle;">  网站导航  <img src="images\t_arrow.gif" alt="">   | 关注我们： <img src="images\sh1.png" alt="">   <img src="images\sh2.png" alt="" style="vertical-align:middle;">  | 手机版  <img src="images\s_tel.png" alt="" style="vertical-align:middle;"></p>
</div>
<h1><i>手 脑 并 用 ， 创 造 分 析</i></h1>
<div class="search"> 
           <div class="a"></div>
           <input type="search" id="search-check" value="" placeholder="请输入关键字"/>
           
           <button id="search-btn">搜索</button>
   </div>
</div>
<div id="theClock"></div>
<div class="nav">
<ul>
   
   <ul class="menu1">
           
           <li><a href="home.html" >首页</a></li>
           <li><a href="#">人员展示</a>
           <ul class="menu2">
           
           <li><a href="photo.html">班级照片墙</a></li>
           <li><a href="people.html">人员总览</a></li>
           </ul>
           </li>
           <li><a href="huodong.html">班级活动</a></li>
           <li><a href="">班级论坛</a></li>
           <li><a href="person.html">个人主页</a></li>
           </ul>
           </ul>
</div>
<div class="two">
<div id="list">
<h2>班级通知</h2>
           <ul>
               <li><span>1</span><a href="">本学期学生综合素质测试和综合奖学金···</a></li>
               <li><span>2</span><a href="">2021年6月29日上午本班举行2020-2···</a></li>
               <li><span>3</span><a href="">关于创建书香班级通知：阅读是一种···</a> </li>
               <li><span>4</span><a href="">班委会召开应用文通知，为更好维护···</a> </li>
               <li><span>5</span><a href="">关于六月主题班会召开时间及内容展示···</a> </li>
               <li><span>6</span><a href="">计算机二级火热报名中，同学们积极···</a> </li>
               <li><span>7</span><a href="">距离期末考试已不足一月，好好复习···</a> </li>
               <li><span>8</span><a href="">暑假将至，快来领取你的暑假大礼包···</a> </li>

           </ul>
           </div>
<div class="imgBox">
           <img class="img-slide img" src="images/1.jpg" alt="1">
           <img class="img-slide img" src="images/2.jpg" alt="2">
           <img class="img-slide img" src="images/3.jpg" alt="3">
           <img class="img-slide img" src="images/4.jpg" alt="4">
           </div>
           <div id="li" style="left:1150px">
<h2>学科指南</h2>
<div id="moocBox">
           <ul id="con1">
           <li><a href="#">电子与信息工程学院实施教...   2021-06-06</a></li>
               <li><a href="#">兰州城市学院2021年上半年...   2021-06-09</a></li>
               <li><a href="#">安博教育集团为我院学生做...   2021-06-12</a></li>
               <li><a href="#">电子与信息工程学院召开学...   2021-06-15</a></li>
               <li><a href="#">我院召开国家级科研项目申...   2021-06-18</a></li>
               <li><a href="#">电子与信息工程学院学科建...   2021-06-21</a></li>
               <li><a href="#">电子与通信工程学科方向及...   2021-06-26</a></li>
               <li><a href="#">物理学学科方向及其学术代...   2021-06-30</a></li>
           </ul>
           <ul id="con2">
           </ul>
           </div>
           </div>
</div>
<div class="three">
           <ul>
               <li><img src="images/信箱.png" alt="" /><a href=""><span>班级信箱</span></a></li>
               <li><img src="images/下载.png" alt="" /><a href=""><span>资料下载</span></a></li>
               <li><img src="images/学生服务.png" alt="" /><a href=""><span>学生服务</span></a></li>
               <li><img src="images/工作服务.png" alt="" /><a href=""><span>工作服务</span></a></li>
               <li><img src="images/生活服务.png" alt="" /><a href=""><span>生活服务</span></a></li>
               <li><img src="images/考研辅导.png" alt="" /><a href=""><span>考研辅导</span></a></li>
               <li><img src="images/联系电话.png" alt="" /><a href=""><span>联系电话</span></a></li>
           </ul>
       </div>
<div class="four">
           <div class="Professional-intro"> 
               <h3>班级介绍<img src="images/更多.png" alt="" /></h3>
               <p>       怀揣着梦想与希望，充满着活力与激情，27个来自中华各地精彩而又跃动的音符飘到例美丽的兰州，在弥漫着书香与人文气息的兰州城市学院天空，汇聚在一起谱写出了一曲积极向上又昂扬奋进的青春之歌--大数据191班，没错，这就是我们，这就是大数据191班，充满着朝气与活力，向往着梦想与自由。我们是前进道路上最靓丽的风景线，是生活油画中那抹最鲜明的色彩。在人生前行的道路上，我们用汗水浇灌希望，用青春诠释无悔！</p>
           </div>
</div>
<div class="five">
<ul>
   <li><div><img src="images/8.jpg" alt="" style="width:375px;height:250px"></div></li>
   <li>
   <div style="background: #87cefa">
   <h2 style="margin-left:40px;margin-top:10px;color:white">Library</h2>
   <p style="line-height: 30px;color:white;margin-top:10px">      兰州城市学院图书馆前身为兰州师范高等专科学校图书馆，始建于1979年。自学校建校开始，图书馆随着学校的几度合并、升格、易名，逐步得到发展。现有馆舍呈三校区分布，即有本部、培黎校区和东校区三个馆，面积合计34686.4平方米。</p>
   </div>
   </li>
   <li><div><img src="images/2.jpg" alt="" style="width:375px;height:250px"></div></li>
   <li>
   <div style="background: #87cefa"><h2 style="margin-left:40px;margin-top:10px;color:white">Classroom</h2>
   <p style="line-height: 30px;color:white;margin-top:10px">      本班共有学生48人，男女均分，都来自甘肃省，最终汇聚成了大数据191班，在今后的几年里，我们将不断努力，朝着自己的梦想一步一步往前走，加油大数据191！</p>
   </div>
   </li>
</ul>

</div>
<div class="six">
<ul>
   <li>
   <div style="background: #87cefa">
   <h2 style="margin-left:40px;margin-top:10px;color:white">School</h2>
   <p style="line-height: 30px;color:white;margin-top:10px">      兰州城市学院培黎校区有四个院，它们分别是电子与信息工程学院，培黎石油工程学院，培黎机械工程学院，美术学院，培黎校区虽然不大，但是该有的设备都有，校区环境也相对优美。</p>
   </div>
   </li>
   <li><div><img src="images/bg5.jpg" alt="" style="width:375px;height:250px"></div></li>
   <li>
   <div style="background: #87cefa"><h2 style="margin-left:40px;margin-top:10px;color:white">Playground</h2>
   <p style="line-height: 30px;color:white;margin-top:10px">      操场是我们锻炼身体的地方，在学校操场主要设置了足球场，操场面积足够广阔，足够大家在操场尽情玩耍，在这里充满活力与自由。</p>
   </div>
   </li>
   <li><div><img src="images/80.png" alt="" style="width:375px;height:250px"></div></li>
</ul>

</div>
<div class="four">
           <div class="Professional-intro"> 
               <h3 style="text-align: center">About<img src="images/更多.png" alt="" /></h3>
               <p>       怀揣着梦想与希望，充满着活力与激情，27个来自中华各地精彩而又跃动的音符飘到例美丽的兰州，在弥漫着书香与人文气息的兰州城市学院天空，汇聚在一起谱写出了一曲积极向上又昂扬奋进的青春之歌--大数据191班，没错，这就是我们，这就是大数据191班，充满着朝气与活力，向往着梦想与自由。我们是前进道路上最靓丽的风景线，是生活油画中那抹最鲜明的色彩。在人生前行的道路上，我们用汗水浇灌希望，用青春诠释无悔！</p>
           </div>
</div>

...

2.CSS

*{
           margin:0;
           padding:0;
       }
       body{
           width:1500px;
   height:720px;
   margin:10px auto;
       }
       .one{
height:170px;
position:relative;
background:url(images/25.jpg) no-repeat;
background-size:1500px 170px;
}
       .first{
           position:absolute;
           right:5px;
           top:0px;
           width:550px;
       height:30px;
       line-height:30px;
       font-size:12px;
       background: rgba(255, 255, 255, 0.05);
}
#search-check{
    position:absolute;
    right:138px;
    top:42px;
width: 260px;
border: 1px solid #e2e2e2;
height: 32px;

       }
       #search-btn{
           position:absolute;
           right:60px;
           top:42px;
   width: 78px;
   height: 32px;
   background: black;
   color: white;
   text-align: center;
       }
h1{
      position:absolute;
      left:220px;
      line-height:130px;
      font-style: border;
}
/*.nav{
width:900px;
height:40px;
line-height: 40px;
position:absolute;
top:140px;
left:300px;
}
.nav>ul>li{
    list-style:none;
    display: inline-block;
    line-height: 40px;
    font-size:20px;
}
.nav>ul>li>div{
width:100px;
height:40px;
margin-left:70px;
text-align: center;
background: rgba(255, 255, 255, 0.6);
}
.nav>ul>li>div>a{
    text-decoration: none;
    color:black;
}*/
.menu1{
width:900px;
height:40px;
line-height: 40px;
position:absolute;
top:140px;
left:300px;
   }
   .menu1 li{
   width: 100px;
   height: 40px;
   list-style:none;
   display: inline-block;
   line-height: 40px;
   font-size:20px;
   float: left;
   margin-left:62px;
   text-align: center;
   background: rgba(255, 255, 255, 0.6);
   }
   .menu1 li>a{
   text-decoration: none;
   color:black;
   }

   .menu1 li:hover{
   background-color: #87cefa;
   }
   .menu1 li ul.menu2{
   /* 当鼠标不点击时隐藏二级菜单 */
   display: none;
   margin-left:-60px;
   }
   .menu1 li:hover ul.menu2{
   /* 使二级菜单显示出来 */
   display: block;
   }
   .menu1 a:hover {
       color:white;
   }
#theClock{
font-weight: bold;
width:300px;
position: absolute;
top:150px;
left:40px;
}
.a{
    position: absolute;
    right:397px;
    top:42px;
    width:32px;
    height:32px;
background:url(images/000.jpg) no-repeat;
    background-position:-308px -206px ;
}
/*.img {
position: absolute;
top: 200px;
}*/
.two{
      width:1500px;
      height:400px;
}
#list{
   width:350px;
   height:400px;
   background:#fff;
   /*position: absolute;*/
   float:left;
}
#list>h2{
   background:#1e90ff;
   height:44px;
   line-height:44px;
   color:#fff;
   text-indent:1em;
   font-size:20px;
}
#list>ul>li{
   list-style:none;
   height:43px;
   line-height:43px;
   border-bottom:1.5px dashed #ccc;
text-indent:1em;
}
#list>ul>li>span{
   display:inline-block;
   width:25px;
   height:25px;
   line-height:25px;
   border-radius:16px;
   background:#1e90ff;
   color:#fff;
   text-indent:8px;
   margin-right:20px;
}
#list>ul>li>a:link{
   text-decoration:none;
   color:#444;
}
#list>ul>li>a:visited{
color:#444;
}
#list>ul>li:hover span{
   background:#0000ff;

}
#list>ul>li:hover a{
   color:#0000ff;
}
.imgBox{
width: 800px;
height: 400px;
float:left;
margin-left:350px;
margin-top:-400px;
clear: both;
           overflow: hidden;
}
.imgBox img{
width: 800px;
height: 400px;
}
.img{
display: block;
}
#li{
   width:350px;
   height:400px;
   background:#fff;
   float:right;
   margin-top:-400px;
}
#li>h2{
   background:#1e90ff;
   height:44px;
   line-height:44px;
   color:#fff;
   text-indent:1em;
   font-size:20px;
}
/* 底部样式 */
       #moocBox {
           width: 350px;
           height: 10px;
           overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
       }
       /* 中间样式 */
       #moocBox {
           height: 330px;
           width: 335px;
           margin-top: 15px;
           overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
       }
       #moocBox>ul>li>a {
           list-style:none;
           width: 335px;
   height:43px;
   line-height:43px;
   border-bottom:1.5px dashed #ccc;
text-indent:1em;
           display: block;
           overflow: hidden;
           text-indent: 15px;
           text-decoration:none;
           color:#444;
       }
#moocBox>ul>li:hover a{
   color:#0000ff;
}
   .three{
       margin-top:20px;
           width: 1500px;
           height: 120px;
           line-height: 120px;
           position: relative;
           /*background:#1e90ff;*/
           background: #87cefa;
           z-index: 3;
       }
       .three li{
           list-style: none;
           float: left;
           width: 213px;
           height: 120px;
           margin-left: -1px;
           border-left:1px solid black;
           border-right:1px solid black;
       }
       .three img{
           width: 70px;
           line-height: 120px;
           vertical-align: middle;
           padding-left: 20px;
           /*clear: both;*/
       }
       .three a{
           display: inline-block;
           float: right;
           height: 120px;
           margin-right: 30px;
           color:black;
           font-size: 20px;
       }
       .three a:hover{
           color:white;
       }
       .three span{
           display: inline-block;
           line-height: 130px;
       }
.four{
   float:left;
   margin-left:400px;
   margin-top:20px;
   width:700px;
      height:300px;
      /*border:1px solid red;*/
}
.four .Professional-intro{
           width: 700px;
           height: 300px;
           /*border: 1px solid black;*/
       }
       .four h3{
           width: 700px;
           height: 40px;
           line-height: 40px;
           font-size: 24px;
           border-bottom: 2px solid #A9A9A9;
           margin-bottom: 20px;
           color: dodgerblue;
       }
       .four h3 img{
           width: 36px;
           float: right;
       }
       .four p{
           width: 600px;
           height: 300px;
           float: left;
           margin-left: 50px;
           padding-top: 20px;
           line-height:30px;
       }
       .five{
           width:1500px;
           height:250px;
           float:left;
           /*border:1px solid red;*/
       }
       .five>ul>li{
           display: inline-block;
           list-style: none;
       }
       .five>ul>li>div{
           float:left;
           width:375px;
           height:250px;
           margin-left:-4px;
           /*border:1px solid red;*/
       }
       .six{
           width:1500px;
           height:250px;
           float:left;
           /*border:1px solid red;*/
       }
       .six>ul>li{
           display: inline-block;
           list-style: none;
       }
       .six>ul>li>div{
           float:left;
           width:375px;
           height:250px;
           margin-left:-4px;
           /*border:1px solid red;*/
       }
       .seven{
           float:left;
           margin-left:70px;
           width: 1330px;
       height: 200px;
       }
       #bottom-img {
       width: 1300px;
       height: 200px;
       margin: 0 auto;
       margin-bottom: 20px;
       overflow: hidden;
       }
       #bottom-img > ul {
       width: 200%;
       list-style: none;
       /*动画属性*/
       animation: imgMove 20s linear infinite;
       }
       /* 暂停动画 */
       #bottom-img>ul:hover{
       animation-play-state: paused;
       }

       #bottom-img > ul > li {
       width: 300px;
       float: left;
       cursor: pointer;
       }

       #bottom-img img {
       width: 100%;
       }
       /*创建动画*/
       @keyframes imgMove {
       from {
       transform: translateX(0px);
       }
       to {
       transform: translateX(-882px);
       }
       }

...

四、要点解析

1.插入自动切换的主图：

2.导航菜单及二级菜单的设置：

3.底部图片轮翻：

4.日期时间的设置：

五、更多推荐

【关注作者|获取更多源码|优质文章】Web前端网页制作、大学生毕业辅导和期末大作辅导、案例模板源码、技术交流，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，3Q！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

15.我的大学班级网站大学生期末大作业 Web前端网页制作 html5 css

一、网页简介

二、网页效果

三、代码展示

1.html

2.CSS

四、要点解析

五、更多推荐

二.TypeScript环境搭建以及基础配置

【几乎最全/全网最长的 2 万字】前端工程化完整流程：从头搭到尾（vue3 vite qiankun docker tailwindcss iview......）

功能：cookie与vue：完成双系统切换（jQuery老系统与vue新系统切换）

ajax笔记二

利用jquery对HTML中的名字进行替代

JQuery工具方法整理，118页Vue面试题总结

jQuery在js里动态修改样式和hover()方法 (入门)

前端JQuery引入不成功报错Failed to load resource: the server responded with a status of 404 (Not Found)；

vue3中标签的ref属性

【React】React18 Hooks 之 useContext

前端哥

二.TypeScript环境搭建以及基础配置

【几乎最全/全网最长的 2 万字】前端工程化完整流程：从头搭到尾（vue3 vite qiankun docker tailwindcss iview......）

TEGG学习总结

功能：cookie与vue：完成双系统切换（jQuery老系统与vue新系统切换）

ajax笔记二

2024年最新轻松学习jQuery控制DOM_jquery平滑显示指定dom(2)，怒肝三个月啃完这110道面试题

利用jquery对HTML中的名字进行替代

JQuery工具方法整理，118页Vue面试题总结

jQuery 密码验证

jQuery在js里动态修改样式和hover()方法 (入门)

1
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

2
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

3
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

4
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

5
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

6
jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

7
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

8
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

9
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

10
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

15.我的大学班级网站 大学生期末大作业 Web前端网页制作 html5 css

一、网页简介

二、网页效果

三、代码展示

1.html

2.CSS

四、要点解析

五、更多推荐

15.我的大学班级网站大学生期末大作业 Web前端网页制作 html5 css