云南农业职业技术学院 / 互联网技术学院官网 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
<!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的更多相关文章
- 云南农业职业技术学院 - 互联网技术学院 - 美和易思《MYSQL 高级查询与编程》 综合机试试卷
数据库及试题文档下载:https://download.csdn.net/download/weixin_44893902/14503097 目录 题目:电商平台 mysql 数据库系统管理 一. 语 ...
- Java+HTML5 试题 云南农业职业技术学院 - 互联网技术学院
摸底测试 100题_共100.00分_及格60.00分 第1题 [单选题][1.00分][概念理解] 执行完下面程序片段后, ( )的结论是正确的. int a, b, c; a = 1; b = ...
- HTML5 +Java基础 大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业
第1题 [单选题][0.33分][概念理解] 关于java中的逻辑运算符,下列说法正确的是 逻辑运算符||.&&.!都是用于连接两个关系表达式</p> 当&&am ...
- Java高级大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业
第1题 .关于XML的文档结构描述错误的是 一个基本的XML文档通常由序言和文档元素两部分组成 XML文档中的序言可以包括XML声明.处理指令和注释 XML文档中的元素以树形结构排列 XML文档的声 ...
- 麦子学院bootstrap实战项目官网，后台，jquery.singlePageNav.min.js ，wow.min.js，animate.css使用
1.源码笔记 我的源码+笔记(很重要):链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2 感谢麦子学院项目相关视频:链接: https://pan.baidu ...
- 小米官网的css3导航菜单
HTML代码: <div class="nav"> <ul> <li><a href="#">首页</a& ...
- 美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网
假期作业,好久没碰了,代码写得很烂......写博客纯属记录! 源代码下载地址:https://download.csdn.net/download/weixin_44893902/12805555 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- Python爬虫入门教程 19-100 51CTO学院IT技术课程抓取
写在前面 从今天开始的几篇文章,我将就国内目前比较主流的一些在线学习平台数据进行抓取,如果时间充足的情况下,会对他们进行一些简单的分析,好了,平台大概有51CTO学院,CSDN学院,网易云课堂,慕课网 ...
随机推荐
- Oracle——创建存储过程
有个超级详细的关于存储过程的帖子:https://www.cnblogs.com/snowballed/p/6766867.html Oracle-存储过程(procedure.function.pa ...
- 图的存储（Java）以及遍历
// 深搜 private void dfs(int v) { visited[v] = true; System.out.print(v+" "); for (int i = 0 ...
- clickhouse 输入输出格式
TabSeparated.TabSeparatedRaw.TabSeparatedWithNames和TabSeparatedWithNamesAndTypes TabSeparated 默认格式,缩 ...
- 实时数据同步inotify+rsync
inotify inotify是一个实时监控服务,他能实时监控服务器中的目录的变化,发现目录中变化后,在配合rsync服务推送到备份服务器上 inotify要求内核要在2.6.13或之上,通过noti ...
- apply 和 call 的区别
相同点: 都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行 不同点: call方法从第二个参数开始可以接收任意个参数,每个参数会映射到相应位置的func的参 ...
- 图形学之Unity渲染管线流程
Unity中的渲染管线流程 下图是<Unity Shader 入门精要>一书中的渲染流程图: ApplicationStage阶段:准备场景信息(视景体,摄像机参数).粗粒度剔除.定义每个 ...
- 带你了解 Angular 与 Angular JS
Angular 是一个基于 TypeScript 的开源客户端框架,专为构建 Web 应用程序而设计. 另一方面,AngularJS 是 Angular 的第一个版本,用纯 JavaScript 编写 ...
- MySQL如何把varchar类型字段转换成int类型进行倒叙排序
SELECT * FROM sheet2 t1 WHERE t1.`金额`+'0' ORDER BY t1.`金额` DESC;
- 解决Tensorflow ValueError: Failed to convert a NumPy array to a Tensor (Unsupported object type numpy.ndarray)
问题描述 在将一个数组送入tensorflow训练时,报错如下: ValueError: Failed to convert a NumPy array to a Tensor (Unsupporte ...
- 文本处理的命令，三剑客之sed
文本处理的命令 1.sort命令 "用于将文件内容加以排序" 参数: -n :按照数值的大小排序 -r :以相反的顺序来排序 -k :以某列进行排序 -t :指定分隔符,默认是以空 ...