云南农业职业技术学院 / 互联网技术学院官网 HTML5+CSS3
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
index.css
一、效果图：
1、主页
2、登录页
3、学院概况
4、专业设置
二、实现代码
index.html
云农职互联网技术学院Internet Technology College of Yunnan Agricultural Polytechnic
>> 云南农业职业技术学院小哨校区教室改造教学设备购...
2019.12.18
>> 云南农业职业技术学院经管学院采购会计学练训赛一...
2019.12.09
>> 云南农业职业技术学院《云南农业》月刊及《云南农...
2019.12.06
>> 云南农业职业技术学院购药品检测技术实训设备竞争...
2019.12.05
>> 云南农业职业技术学院校园监控设备实施新装项目.....
2019.12.03
校园风采 莘莘学子勤奋攻读、矢志成才的理想园地
岗位课程 针对市场调研，总结多门热门课程体系，可以便捷的进行课程学习
特色专业 采用校企合作的教学模式，让学生学到更多知识，掌握前沿信息。
茭菱校区地址：昆明市茭菱路128号 互联网技术学院
邮编：651701
电话：0871－65387155 650031
官方微博
官方微信
Copyright © 2020 互联网技术学院 宣传部维护|地址：昆明市茭菱路128号|滇ICP备13000536号-1|滇公网安备 53010202000542号
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;
}