云南农业职业技术学院 / 互联网技术学院官网 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学院,网易云课堂,慕课网 ...
随机推荐
- Linux 设置时区
一.查看和修改Linux的时区 1. 查看当前时区命令 : "date -R" 2. 修改设置Linux服务器时区方法 A命令 : "tzselect" 方法 ...
- 转 onSaveInstanceState()和onRestoreInstanceState()使用详解
转 https://www.jianshu.com/p/27181e2e32d2 背景 如果系统由于系统约束(而不是正常的应用程序行为)而破坏了Activity,那么尽管实际 Activity实例已经 ...
- vim使用配置(转)
在终端下使用vim进行编辑时,默认情况下,编辑的界面上是没有行号的.语法高亮度显示.智能缩进等功能的. 为了更好的在vim下进行工作,需要手动配置一个配置文件: .vimrc 在启动vim时,当前用户 ...
- String.split()与StringUtils.split()的区别
import com.sun.deploy.util.StringUtils; String s =",1,,2,3,4,,"; String[] split1 = s.split ...
- 【Java】面向类与对象
一.面向对象 对象封装:私有变量+公共方法 方法与构造方法 this变量 Animal.java public class Animal { String name; int age; void mo ...
- 通过静态分析和持续集成 保证代码的质量 （Helix QAC）1
前言 现代软件开发团队面临着很多挑战,这些挑战包括:产品交付期限越来越紧,团队的分布越来越广,软件的复杂度越来越高,而且对软件的质量要求越来越高. 本文分为两个章节.第一章讨论持续集成的原理,持续集成 ...
- Python 字典是如何解决哈希冲突的
本文主要翻译自 so 上面的问题 Why can a Python dict have multiple keys with the same hash? 下 Praveen Gollakota 的答 ...
- BUUCFT pwn asis2016_b00ks
看师傅们wp的时候,我才知道这个道题是wiki上面的例题.我看了一些师傅的wp,发现大家都是一种做法,都是通过mmap堆地址,来找libc基地址的.而我试了一下fastbisn attack,发现也可 ...
- M语言中的引用（Power Query 之 M 语言）
名词 查询表 函数 行{}/列[] 单元格 表(Table) 列表(List) 记录(Record) 引用[查询表] =查询表表名 引用[应用的步骤] =步骤名 引用表中的[单元格](深化) =表{行 ...
- python2升级到python3 yum不可用解决方案
/usr/libexec/urlgrabber-ext-down /usr/bin/yum 这两个文件解释器 写 /usr/bin/python2