HTML学完后写了，有小组成员参与开发，我只写了主页，那就只贴主页的代码出来了。
作为初学者，代码写得不太好，写博客纯属记录！有问题望指导！
码云开源仓库地址：https://gitee.com/ynavc/www
源码打包下载地址：https://download.csdn.net/download/weixin_44893902/12833869
演示地址：http://ynavc.gitee.io/www
目录
一、效果图：
1、主页
2、登录页
3、学院概况
4、专业设置
二、实现代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>云农职互联网技术学院Internet Technology College of Yunnan Agricultural Polytechnic</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!--01头部页眉-->
<div id="top">
<div id="top0">
<!--01_1 logo-->
<div id="top1"></div>
</div>
</div>
<!--02 导航栏-->
<div id="top2">
<div id="top2_1">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="yuanxiaojieshao.html">学院概况</a></li>
<li><a href="zhuanye.html">专业设置</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="user.html">在线报名</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<!--03总体框架-->
<div id="HTML">
<!--001图片轮播滚动-->
<div id="header">
<img src="img/header/20191209100339382120.jpg" />
<img src="img/header/gdt002.jpg" />
<img src="img/header/gdt001.jpg" />
</div>
<!--002公告栏-->
<div id="headerfoot">
<div class="list-group-item reed">
<marquee scrollamount="8" direction="left" align="center" style="font-weight: bold;line-height: 20px;font-size: 20px;color: white;">
<img border="0" width="32" src="img/gonggao.gif">
欢迎来到云农职官方网站！</marquee>
</div>
</div>
<!--003公告招生就业-->
<div id="border_zhaosheng">
<div id="border_zhaosheng1">
<img src="img/tongzhizhongxin.png" />
<table>
<tr>
<td>>> <a href="#">云南农业职业技术学院小哨校区教室改造教学设备购...</a> </td>
<td class="nbsp_shuzi">2019.12.18</td>
</tr>
<tr>
<td>>> <a href="#">云南农业职业技术学院经管学院采购会计学练训赛一...</a> </td>
<td class="nbsp_shuzi">2019.12.09</td>
</tr>
<tr>
<td>>> <a href="#">云南农业职业技术学院《云南农业》月刊及《云南农...</a> </td>
<td class="nbsp_shuzi">2019.12.06</td>
</tr>
<tr>
<td>>> <a href="#">云南农业职业技术学院购药品检测技术实训设备竞争...</a> </td>
<td class="nbsp_shuzi">2019.12.05</td>
</tr>
<tr>
<td>>> <a href="#">云南农业职业技术学院校园监控设备实施新装项目.....</a> </td>
<td class="nbsp_shuzi">2019.12.03</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="border_zhaosheng2">
<div id="border_zhangsheng2_1">
<img class="border_zhangsheng2_img1" src="img/zhaoshengzixun.png" />
<div class="border_zhangsheng2_1_t">
<img class="border_zhangsheng2_img1_1" src="img/004zyjs.jpg" />
<img class="border_zhangsheng2_img1_1" src="img/004ybmxt.jpg" />
</div>
<div class="border_zhangsheng2_1_b">
<img class="border_zhangsheng2_img1_1" src="img/004crzs.jpg" />
<img class="border_zhangsheng2_img1_1" src="img/004bkzl.jpg" />
</div>
</div>
<div id="border_zhangsheng2_2">
<img class="border_zhangsheng2_img1" src="img/jiuyezixun.png" />
<div class="border_zhangsheng2_1_t">
<img class="border_zhangsheng2_img1_1" src="img/005jyxxw.jpg" />
<img class="border_zhangsheng2_img1_1" src="img/005jyzd.jpg" />
</div>
<div class="border_zhangsheng2_1_b">
<img class="border_zhangsheng2_img1_1" src="img/005zsbbm.jpg" />
<img class="border_zhangsheng2_img1_1" src="img/005zpxx.jpg" />
</div>
</div>
</div>
</div>
<!--004校园风采-->
<div id="xioayuanfc">
<div id="xioayuanfc_t">
<div id="xioayuanfc_t_span">校园风采</div><div id="xioayuanfc_t_xxxz"> 莘莘学子勤奋攻读、矢志成才的理想园地</div>
</div>
<div id="xioayuanfc_c">
<!--<marquee scrollamount="10" direction="down" align="center">-->
<img src="img/xiaoyuan/a1.jpg" />
<img src="img/xiaoyuan/a2.jpg" />
<img src="img/xiaoyuan/a3.jpg" />
<img src="img/xiaoyuan/a4.jpg" />
<img src="img/xiaoyuan/a5.jpg" />
<img src="img/xiaoyuan/a6.jpg" />
<!--<img src="img/xiaoyuan/a7.jpg" />-->
<!--<img src="img/xiaoyuan/a8.jpg" />-->
</div>
</div>
<!--005课程-->
<div id="border_kecheng">
<div id="border_kecheng_t">
<div id="border_kecheng_t_gwkc">岗位课程</div><div id="border_kecheng_t_scdy"> 针对市场调研，总结多门热门课程体系，可以便捷的进行课程学习</div>
</div>
<div id="border_kecheng_f">
<div id="border_kecheng_f_1">
<img class="border_kecheng_f_t" src="img/kecheng/kc_JAVA.jpg" alt="JAVA工程师"/>
<img class="border_kecheng_f_t" src="img/kecheng/kc_IOS.jpg" alt="" />
<img src="img/kecheng/kc_PHP.jpg" alt="" />
<img src="img/kecheng/kc_HTML.jpg" alt="前端工程师"/>
<img src="img/kecheng/kc_Android.jpg" alt="Android工程师"/>
</div>
<div id="border_kecheng_f_2">
<img src="img/kc_001.jpg" />
</div>
</div>
</div>
<!--006专业-->
<div id="border_zhuanye">
<div id="border_zhuanye_t">
<div id="border_zhuanye_t_tszy">特色专业</div><div id="border_zhuanye_t_xthz"> 采用校企合作的教学模式，让学生学到更多知识，掌握前沿信息。</div>
</div>
<div id="border_zhuanye_f">
<div>
<img class="border_zhuanye_img" src="img/foot/foot_xxgk.jpg" />
<img class="border_zhuanye_img" src="img/foot/foot_tsg.jpg" />
<img class="border_zhuanye_img" src="img/foot/foot_xsgz.jpg" />
<img class="border_zhuanye_img" src="img/foot/foot_xyfj.jpg" />
</div>
<div>
<img class="border_zhuanye_img" src="img/foot/foot_jxzzgl.jpg" />
<img class="border_zhuanye_img" src="img/foot/foot_kszx.jpg" />
<img class="border_zhuanye_img" src="img/foot/foot_mooc.jpg" />
<img class="border_zhuanye_img" src="img/foot/foot_xglj.jpg" />
</div>
</div>
</div>
</div>
<!--04尾部页脚-->
<div id="foot">
<div id="foot000">
<div id="foot_t">
<div id="foot_t_logo"><img src="img/ynave_logo.png" /></div>
<div id="foot_t_dz">
<p>茭菱校区地址：昆明市茭菱路128号 互联网技术学院</p><p>邮编：651701</p><p>电话：0871－65387155 650031</p>
</div>
<div id="foot_t_weixin">
<div id="foot_t_img1"><img src="img/foot/weibo.png" /></div> <div>官方微博</div>
</div>
<div id="foot_t_weibo">
<div id="foot_t_img2"><img src="img/foot/weixin.png" /></div> <div>官方微信</div>
</div>
</div>
</div>
<div id="foot_f">
<div id="foot_F_0">
<section class="bq1"><spam>Copyright © 2020 互联网技术学院 宣传部维护</span><span>|</span>地址：昆明市茭菱路128号<span>|</span><a href="#" target="_blank">滇ICP备13000536号-1<span>|</span></a>滇公网安备 53010202000542号
</section>
</div>
</div>
</div>
</body>
</html>index.css
*{
margin: 0;
padding: 0;
}
/*div{
border: 1px solid red;
}*/
/*01总头部*/
#top{
margin: 0 auto;
width: 100%;
height: 140px;
background-color: #175eb8;
}
/*头部框架*/
#top0{
margin: 0 auto;
width: 1200px;
height: 140px;
}
/*logo*/
#top1{
width: 100%;
height: 140px;
background-repeat: no-repeat;
background-image: url(../img/top1.png);
}
/*02导航栏*/
#top2{
margin: 0 auto;
width: 100%;
height: 40px;
background-color: white;
}
#top2_1{
margin: 0 auto;
width: 1200px;
height: 40px;
}
#top2 li{
line-height: 40px;
list-style: none;
font-family: "微软雅黑";
font-size: 20px;
float: left;
padding-left: 29.28px;
padding-right: 28.5px;
}
#top2 a{
color: black;
text-decoration: none;
}
#top2 a:hover{
color: white;
}
#top2 li:hover{
color: red;
background-color: #175eb8;
display: block;
}
/*03内容框架*/
#HTML{
margin: 0 auto;
width: 1900px;
height: 2300px;
background-image: url(../img/bgimg.png);
/*background-color: blue;*/
}
/*001图片轮播滚动*/
#header{
width: 5700px;
height: 550px;
background-color: aquamarine;
overflow: hidden;/*隐藏溢出内容*/
animation: switch 10s ease-out infinite;
}
#header img{
float: left;
width: 1900px;
height: 550px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -1900px;
}
70%, 100% {
margin-left: -3800px;
}
}
/*002公告栏*/
#headerfoot{
width: 100%;
height: 80px;
background-color: #6495ED;
}
/*003公告招生就业*/
#border_zhaosheng{
margin: 0 auto;
width: 1200px;
height: 400px;
/*background-color: aliceblue;*/
}
/*招生通知中心*/
#border_zhaosheng1{
float: left;
width: 550px;
height: 400px;
overflow: hidden;
/*font-size: 15px;*/
}
#border_zhaosheng1 img{
width: 550px;
height: 70px;
}
#border_zhaosheng1 tr{
line-height: 56px;
}
.nbsp_shuzi{
padding-left: 35px;
}
#border_zhangsheng1 table tr td a{
text-decoration: none;
color: #000000;
}
/*招生咨询/就业咨询*/
#border_zhaosheng2{
float: right;
width: 650px;
height: 395px;
/*background-color: #565658;*/
}
.border_zhangsheng2_img1{
width: 325px;
height: 70px;
}
#border_zhangsheng2_1{
width: 50%;
height: 395px;
float: left;
}
.border_zhangsheng2_img1_1{
width: 150px;
height: 105px;
}
.border_zhangsheng2_1_t,.border_zhangsheng2_1_b{
margin-top: 40PX;
margin-left: 10px;
}
#border_zhangsheng2_2{
width: 50%;
height: 395px;
float: right;
}
/*004校园风采*/
#xioayuanfc{
margin: 0 auto;
width: 1900px;
height: 300px;
background-color: white;
border:1px solid #6495ED;
}
#xioayuanfc_t{
width: 1200px;
height: 50px;
line-height: 50px;
}
#xioayuanfc_t_span{
margin-top: 5px;
line-height: 40px;
float: left;
width: 100px;
height: 40px;
background-color: #6495ED;
color: white;
text-align: center;
margin-left: 350px;
border-radius: 10px;
}
#xioayuanfc_t_xxxz{
color: #666666;
}
#xioayuanfc_c{
/*margin: 0 auto;*/
float: left;
width: 1900px;
height: 200px;
}
#xioayuanfc_c img{
float: left;
width: 300px;
height: 200px;
padding-left: 15px;
}
/*005课程*/
/*课程总div*/
#border_kecheng{
margin: 0 auto;
width: 1200px;
height: 550px;
background-color: #F5F5F5;
}
/*课程上部分*/
#border_kecheng_t{
line-height: 50px;
background-color: white;
}
#border_kecheng_t_gwkc{
margin-top: 5px;
line-height: 40px;
float: left;
width: 100px;
height: 40px;
background-color: #6495ED;
color: white;
text-align: center;
border-radius: 10px;
}
#border_kecheng_t_scdy{
color: #666666;
}
/*课程下部分*/
#border_kecheng_f{
margin: 0 auto;
padding-top: 30px;
line-height: 90px;
}
#border_kecheng_f_1{
margin-left: 30px;
/*margin-left: 170px;*/
}
#border_kecheng_f_1 img{
/*margin-left: 170px;*/
width: 19%;
height: 220px;
}
#border_kecheng_f_2 img{
/*margin-left: 170px;*/
width: 100%;
height: 180px;
}
/*006专业*/
#border_zhuanye{
margin: 0 auto;
width: 1200px;
height: 400px;
/*background-color: brown;*/
}
#border_zhuanye_t{
height: 50px;
background-color: white;
}
#border_zhuanye_t_tszy{
margin-top: 5px;
line-height: 40px;
float: left;
width: 100px;
height: 40px;
background-color: #6495ED;
color: white;
text-align: center;
border-radius: 10px;
}
#border_zhuanye_t_xthz{
color: #666666;
line-height: 50px;
}
.border_zhuanye_img{
margin-top: 20px;
padding-left: 60px;
width: 220px;
height: 145px;
}
/*04尾部页脚*/
#foot{
margin: 0 auto;
width: 100%;
height: 150px;
background-color: #175eb8;
}
#foot000{
margin: 0 auto;
width: 1200px;
height: 110px;
}
#foot_t{
width: 100%;
height: 110px;
/*background-color: #6495ED;*/
}
#foot_t_logo{
float: left;
}
#foot_t img{
margin-top: 25px;
}
#foot_t_dz{
color: white;
float: left;
padding-top: 25px;
padding-left: 80px;
}
#foot_t_weixin,#foot_t_weibo{
width: 100px;
height: 110px;
float: right;
/*background-color: #FF0000;*/
color: white;
}
#foot_t_weixin:hover,#foot_t_weibo:hover{
color: red;
}
#foot_t_img1,#foot_t_img2{
margin-top: 10px;
margin-left: 20px;
}
#foot_f{
width: 100%;
height: 40px;
background-color: #000000;
}
#foot_F_0{
overflow: hidden;
width: 1200px;
line-height: 40px;
margin: 0 auto;
}
#foot_f section{
color: white;
margin-left: 50px;
}
#foot_f span{
padding-left: 30px;
padding-right: 30px;
}
#foot_f a{
color: white;
text-decoration: none;
}
#foot_f span:hover{
color: #175eb8;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
