HHXY_WEB作业_某学院教务处首页
工作量实属巨大。求点赞~~~
效果图
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>石家庄经济学院</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
<!-- <style type="text/css"></style>-->
</head>
<body>
<!--总体-->
<div class="mybody">
<!-- 菜单栏-->
<div class="menuClass">
<div id="nav" class="widtH80">
<div class="color3 hover">
<a href="#" title="岗位设置" class="color2">首页</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">首页1</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">首页2</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="岗位设置" class="color2">岗位设置</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">岗位设置（一）</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">岗位设置（二）</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学建设" class="color2">教学建设</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学建设（一）</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学建设（二）</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学运行" class="color2">教学运行</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second"> 教学运行（一）</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学运行（二）</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学保障" class="color2">教学保障</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学保障（一）</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学保障（二）</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学评估" class="color2">教学评估</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学评估（一）</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学评估（二）</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="规章制度" class="color2">规章制度</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">规章制度（一）</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">规章制度（二）</a>
</div>
</div>
</div>
</div>
</div>
<!-- 搜索栏-->
<div class="logo">
<div id="search_bar_left_logo">
<img src="images/logo.gif" alt="石家庄经济学院_教务处">
</div>
<div id="search_bar">
<input type="text" alt="搜索框" value="" id="search_bar_textarea">
<input type="search" alt="搜索" value="" id="search_bar_submit">
</div>
</div>
<!-- 图片区-->
<div class="banner">
<img src="images/banner.jpg">
</div>
<!-- 展示区-->
<div class="widtH80">
<div class="flex newsBody">
<div class="news">
<div class="tab_menu">
<ul >
<li id="tab_menu_hotnew">
<a href="#" ><img src="images/jwdt.gif"></a>
<a href="#" class="tab_menu_moreinfo">更多>></a>
</li>
</ul>
</div>
<div id="tab_box_hotnew" class="flex">
<div class="flex hotnew-content">
<div class="card">
<div class="card-day">14</div>
<div class="card-ym">2021.10</div>
</div>
<div class="font">
<div class="font-title">
<a class="tab_box_hotnew_tittle">关于2014-2015学年第一学期学雅通识课程开课的新闻</a>
</div>
<div class="font-content">
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
</div>
</div>
</div>
<div class="flex hotnew-content">
<div class="card">
<div class="card-day">14</div>
<div class="card-ym">2021.10</div>
</div>
<div class="font">
<div class="font-title">
<a class="tab_box_hotnew_tittle">关于2014-2015学年第一学期学雅通识课程开课的新闻</a>
</div>
<div class="font-content">
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
</div>
</div>
</div>
<div class="flex hotnew-content">
<div class="card">
<div class="card-day">14</div>
<div class="card-ym">2021.10</div>
</div>
<div class="font">
<div class="font-title">
<a class="tab_box_hotnew_tittle">关于2014-2015学年第一学期学雅通识课程开课的新闻</a>
</div>
<div class="font-content">
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
</div>
</div>
</div>
<div class="flex hotnew-content">
<div class="card">
<div class="card-day">14</div>
<div class="card-ym">2021.10</div>
</div>
<div class="font">
<div class="font-title">
<a class="tab_box_hotnew_tittle">关于2014-2015学年第一学期学雅通识课程开课的新闻</a>
</div>
<div class="font-content">
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
</div>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="tab_notice_menu">
<ul >
<li class="tab_menu" id="tab_menu_right" style="width: 350px; position: relative; top: -8px;">
<a href="#" ><img src="images/tzgg.gif"></a>
<a href="#" class="tab_menu_moreinfo">更多>></a>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a class="tab_box_notice_tittle" href="#">2015年寒假公共教室使用安排公告</a>
</li>
<li class="tab_box_notice_text">
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
</li>
</ul>
<ul>
<li >
<a class="tab_box_notice_tittle" href="#">2015年寒假公共教室使用安排公告</a>
</li>
<li class="tab_box_notice_text">
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
</li>
</ul>
<ul>
<li>
<a href="#" class="tab_box_notice_tittle">2015年寒假公共教室使用安排公告</a>
</li>
<li class="tab_box_notice_text">
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
专家解读、权威评论、优秀事迹、电脑小分队为新生开展“打开e世界之门”活动
</li>
</ul>
</div>
</div>
</div>
<div class="fw ">
<!-- <div class="fw_main"> -->
<div class="Student_services_all">
<ul id="Student services" class="Singlecolumn_linkgroup" >
<li>
<img src="images/xsfw.gif" alt="学生服务" title="学生服务" class="Singlecolumn_Singlelink_img">
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">学生网上综合系统</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">网上教学平台</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">空闲教室查询</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">网上教评</a>
</li>
</ul>
</div>
<div class="Student_services_all">
<ul id="Teachers_services" class="Singlecolumn_linkgroup">
<li>
<img src="images/jsfw.gif" alt="教师服务" title="教师服务" class="Singlecolumn_Singlelink_img">
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">教师网上综合系统</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">学院网上综合系统</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">教评结果查询</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">教师授课秩序登记</a>
</li>
</ul>
</div>
<div class="Student_services_all">
<ul id="Public_services" class="Singlecolumn_linkgroup">
<li>
<img src="images/ggfw.gif" alt="公共服务" title="公共服务" class="Singlecolumn_Singlelink_img">
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a" >最新下载</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">管理登录</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">成绩查询</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">办事指南</a>
</li>
</ul>
</div>
<div class="Student_services_all">
<ul id="quality_engineering" class="Singlecolumn_linkgroup" >
<li>
<img src="images/zlgc.gif" alt="质量工程" title="质量工程" class="Singlecolumn_Singlelink_img">
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a" >精品课程</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">创新高地</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">教学团队</a>
</li>
<li class="Singlecolumn_Singlelink">
<a href="#" class="fw_a">教学名师</a>
</li>
</ul>
</div>
<!-- </div>-->
</div>
</div>
<div class="link widtH80">
<div id="usual_link">
<a href="#" title="常用链接" id="usual_link_chars">常用链接</a>
</div>
<hr/>
<div style="height: 80px;">
<a title="公开课" href="#">
<img src="images/ad1.gif" alt="公开课">
</a>
<a title="在线云课堂" href="#" alt="在线云课堂">
<img src="images/ad2.gif">
</a>
<div id="usual_link_links">
<table id="table_xxx_teach">
<tr style="height: 30px">
<td class="xxx_teach"><a href="#" class="xxx_teach_link">xxx教学平台</a></td>
<td class="xxx_teach"><a href="#" class="xxx_teach_link">xxx教学平台</a></td>
<td class="xxx_teach"><a href="#" class="xxx_teach_link">xxx教学平台</a></td>
</tr>
<tr>
<td class="xxx_teach"><a href="#" class="xxx_teach_link">xxx教学平台</a></td>
<td class="xxx_teach"><a href="#" class="xxx_teach_link">xxx教学平台</a></td>
<td class="xxx_teach"><a href="#" class="xxx_teach_link">xxx教学平台</a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- footer-->
<div id="footer">
<table>
<tr>
<td style="row-span: 2">
<img src="images/blogo.gif">
</td>
<td id="footer_links">
<a href="#" title="加入收藏" class="footer_links_chars">加入收藏</a>
|
<a href="#" title="友情链接" class="footer_links_chars">友情链接</a>
|
<a href="#" title="联系方式" class="footer_links_chars">联系方式</a>
|
<a href="#" title="常用链接" class="footer_links_chars">常用链接</a>
|
<a href="#" title="管理入口" class="footer_links_chars">管理入口</a>
<br/>
<br/>
版权所有：石家庄经济学院教务处
<br/>
<br/>
Copyright@2008-2013 http://huihua.hebtu.edu.cn/ All Rights Reserved
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS部分
/*全局*/
/*去掉外边距、内边距、元素边框、列表前的小点*/
*{margin: 0; padding: 0; border: none; list-style-type: none;}
/*.hr{*/
/* height: 3px;*/
/* width: 100%;*/
/*}*/
/*规划伪类选择器*/
.hover:hover{
position: relative;
}
.hover-content{
display: none;
}
/*规划二级菜单*/
.link_menu_second{
color: darksalmon;
}
.hover:hover .hover-content{
color: #fff;
line-height: 3;
width: 160px;
/*height: 100px;*/
top: 50px;
background: #533B77;
position: absolute;
display: block;
}
.hover-content-font{
height: 50px;
}
.flex{
display: flex;
}
.bodyClass{
width: 100%;
background: #FFFFFF;
}
.menuClass{
background: #533B77;
}
.widtH80{
width: 80%;
margin: 0 auto;
}
/*主logo、搜索栏*/
.logo{
margin: auto;
width: 80%;
display: flex;
/*版面布局，使主logo与搜索框在容器两侧*/
justify-content: space-between;
}
.search_bar_left_logo{
float: left;
}
.search_bar_textarea{
width: 170px;
height:30px;
font-size: medium;
/*搜索栏文字域——实心边框*/
border: 2px solid #5C307D;
background-color: #F4F4F4;
background-size: 203px;
}
.search_bar_submit{
background-image: url("../images/ss.gif");
height: 35px;
width: 43px;
position: relative;
right: 1%;
bottom: 1px;
}
/*规划操场图片*/
.banner {
text-align: center;
background: #f5f5f5;
}
.banner img{
width: 80%;
}
#tab_box_hotnew{
justify-content: start;
flex-wrap: wrap;
}
#tab_menu_hotnew{
padding: 15px 0;
}
.font{
width: 80%;
}
.card{
width: 16%;
height: 80px;
background: #d3d3d3;
text-align: center;
}
.card-day{
font-size: 32px;
color: rebeccapurple;
}
.card-ym{
font-size: 12px;
color: rebeccapurple;
}
.hotnew-content{
width: 48%;
margin-bottom: 15px;
margin-right: 1.5%;
justify-content: space-between;
}
.tab_menu_moreinfo{
font-size: 16px;
}
.tab_box_hotnew_tittle{
font-size: 18px;
}
.font-content{
font-size: 14px;
text-indent: 28px;
}
.font-title{
line-height: 1.5;
padding-bottom: 5px;
}
/* 老代码*/
#mybody{
/*background-color: #312543;*/
/*background-size: cover;*/
}
#background_forall{
background-color: #533B77;
}
#background_banner{
/*background-color: #8a898e; */
background-color: #fff;
background-position-y: 200px;
}
body{font-size: 12px; color: #8a898e;}
.color3{
display: block;
/*width: 120px;*/
width: 130px;
height: 50px;
float: left;
text-align: center;
font-size: 15px;
}
.color3:hover{
background: #9982BC;
}
.color2{
color: #FFFFFF;
position: relative;
top: 14px;
}
#nav{
height:50px;
background-color: #533B77;
}
.mybody{margin:0 auto;width:100%}
/*.mybody{margin:0 auto;width:1000px} */
a{text-decoration:none; target: new;}
a:hover{text-decoration:underline;}
#search_bar{
/*width: 260px;*/
width: 335px;
height: 30px;
border-width: 1px;
margin-top: 26px;
/*float: right; */
}
#search_bar_left_logo{
/*float: left; */
}
#search_bar_textarea{
width: 83%;
/*width: 170px;*/
height:30px;
font-size: medium;
border: 2px solid #5C307D;
background-color: #F4F4F4;
background-size: 203px;
}
#search_bar_submit{
background-image: url("../images/ss.gif");
height: 35px;
width: 43px;
position: relative;
right: 1%;
bottom: 1px;
}
.table_news{
/*line-height: 40px;*/
}
.news{
/*float: left; */
width:67%;
/*width: 655px;*/
/*padding-top: 20px; */
padding-right: 10px;
}
#tab_menu_right{float: left; width: 350px; padding-top: 20px; padding-right: 10px;}
.tab_menu_moreinfo{
float: right;
color: #8a898e;
/*width: 350px;*/
}
#tab_menu{
height: 25px;
width: 350px;
}
/*#tab_menu_right{*/
/* */
/*}*/
.date{
color: #5D327A;
background-color: #EDEAF1;
text-align: center;
height: 55px;
width: 55px;
}
.date_day{
font-size: x-large;
}
.date_yearmonth{
font-size: medium;
}
.tab_box_hotnew_tittle{
/*font-size: medium; */
color: black;
font-weight: bold;
}
/*.tab_box_hotnew_text{*/
/* height: 40px;*/
/*}*/
.tab_box_notice_tittle{
font-size: 15px;
text-align: center;
color: black;
font-weight: bold;
width: 350px;
/*height: 22px;*/
/*padding-bottom: 5px;*/
}
.tab_box_notice_text{
/*height: 62px;*/
height: 70px;
/*padding-bottom: 5px;*/
}
.notice{
/*float: left; */
width: 33%;
/*width: 320px;*/
background-color: #edeaf1;
margin-left: 15px;
}
.fw{float: left;}
.Singlecolumn_linkgroup{float: left;}
.fw{
padding:0 5%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
text-align: center;
/*width: 1000px;*/
width: 100%;
height: 260px;
/*height: 190px;*/
background-color: #F3F3F3;
/*clear: both;*/
}
.fw_main{
/*position: relative;*/
/*left: 30px;*/
text-align: center;
}
.Student_services_all{
position: relative;
left: 10px;
}
.Singlecolumn_Singlelink{
text-align: center;
margin: 4px;
}
.Singlecolumn_Singlelink_img{
margin: 30px 35px 10px;
}
.fw_a{
color: black;
font-size: 12px;
}
#usual_link{
margin-top: 20px;
margin-bottom: 20px;
}
#usual_link_chars{
color: black;
font-size: 18px;
font-weight: bold;
position: relative;
top: 10px;
}
#usual_link_links{
float: right;
}
.xxx_teach{
height: 24px;
padding-right: 20px;
}
.xxx_teach_link{
color: #8a898e;
}
#table_xxx_teach{
position: relative;
right: 10%;
bottom: 10px;
}
#footer{
background-color: #312543;
padding: 30px 0;
}
#footer table{
margin-left: 10%;
}
.footer_links_chars{
color: #8a898e;
}
.footer_blogo{
/*width: 200px;*/
float: left;
}
#footer_links {
/*float: left;*/
color: #8a898e;
position: relative;
left: 100px;
}
至于文件夹的目录问题，自行更改即可！
3314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
