云南农业职业技术学院 / 互联网技术学院官网 HTML5+CSS3
2024-04-20 04:53:02
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
<!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;
}云南农业职业技术学院 / 互联网技术学院官网 HTML5+CSS3相关推荐
- 探索未来｜一文看懂小米年度技术峰会 · 互联网技术专场
小米年度技术峰会DAY4迎来了互联网专场,本专场涵盖了互联网行业最复杂.最广泛的技术领域. 互联网业务部副总经理兼政委王栋发表了开场致辞.王栋分享道,近三十几年来计算机和互联网技术的发展推动了知识革命 ...
- HTML5 +Java基础 大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业
第1题 [单选题][0.33分][概念理解] 关于java中的逻辑运算符,下列说法正确的是 逻辑运算符||.&&.!都是用于连接两个关系表达式</p> 当&&am ...
- python 数据分析入门教程(三)_Python数据分析入门教程(三)：数据选择——AIU人工智能学院-经管之家官网！...
https://p1.pstatp.com/large/pgc-image/a6743a84f13a4f07a7ec3e9405467c6a 在上面的代码中,iloc后的方括号中逗号之前的部分表示要获 ...
- html5 手机情人节,情人节演绎技术范 移动版百度首页推HTML5+CSS3特效
站长之家(Chinaz.com)2月14日报道:继农历新年"搜龙点睛"活动之后,百度移动在情人节当日再次推出情人节页面特效,借助HTML5技术成功演绎情人节浪漫的"技术范 ...
- ita服务器虚拟机,ITA1024互联网技术开放日第二期
[IT168资讯]由中国互联网技术联盟主办的互联网技术开放日活动,将在1月16日中关村海龙大厦17层举办第二期,本期主题为:<构建高可用云服务的核心技术实践>,联盟邀请核心成员企业,国内云 ...
- 内江求是中学计算机应用有哪些,内江市求是职业技术学校（内江市求是中学）官网/招生网2020网址...
内江市求是职业技术学校(内江市求是中学)最新招生动态及考试信息,请以内江市求是职业技术学校(内江市求是中学)官网公布为准,考生及家长可自行前往内江市求是职业技术学校(内江市求是中学)官网进行查阅! 内 ...
- （附源码）springboot中北创新创业官网 毕业设计 271443
Springboot中北创新创业官网 摘 要 进入21世纪以来,计算机有了迅速的发展.计算机应用.信息技术全面渗透到了人类社会的各个方面,信息化已成为世界经济和社会发展的大趋势.本文主要通过对中北创新 ...
- 仿Apple官网首页 HTML+CSS+JS
WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS 一.前言 静态页面,没有后端数据,只是单一的HTML 自写的APPLE.小米源码,严禁盗用 二.图片资源 这里用了一些iconfont ...
- 企业官网中的“农家老宅”和“精品房”区别在哪？
说到做企业官网,这个话题其实已经持续了二十年左右了,从国内第一批的企业官网到现在百花齐放的局面,中国的互联网史上官网的形态发生了很大的变化. 如果要打个比方的话:那过去老式.传统的旧官网就像是乡下的& ...
最新文章
- 网易有道CEO周枫：在线教育的冰山
- oracle windows 使用,Oracle在windows上的安装及使用
- 推荐系统：MovivLens20M数据集解析
- 文档排序--相似度模型--VSM
- Java面试知识点：File、IO流
- 程序员：要想成为一个伟大的程序员
- 教你在win10系统开启和使用语音识别
- Java开发工程师面试笔试试题，真题；
- 使用git进行word版本管理
- docker之部署一个不中毒的浏览器
- 基于树莓派SHT20温湿度采样
- Gmail使用别名和googlemail.com将邮箱变为多账号
- Java自动装箱与自动拆箱（包装类）以及Integer和Double的valueOf()源码分析
- 【Python】官方文档中文版
- 整合策划和跨界活动的方法
- 互联网日报 | 贾跃亭乐视网股票流拍；东航组建“三亚国际航空”；苹果线上WWDC大会22日举办...
- 结构化大数据分析平台设计
- 打印文件，打印机出error纸张
- EXCEL字符串截取技巧
- require与import的区别和使用