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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>云农职互联网技术学院Internet Technology College of Yunnan Agricultural Polytechnic</title>
  6. <link rel="stylesheet" type="text/css" href="css/index.css"/>
  7. </head>
  8. <body>
  9. <!--01头部页眉-->
  10. <div id="top">
  11. <div id="top0">
  12. <!--01_1 logo-->
  13. <div id="top1"></div>
  14. </div>
  15. </div>
  16. <!--02 导航栏-->
  17. <div id="top2">
  18. <div id="top2_1">
  19. <ul>
  20. <li><a href="index.html">首页</a></li>
  21. <li><a href="yuanxiaojieshao.html">学院概况</a></li>
  22. <li><a href="zhuanye.html">专业设置</a></li>
  23. <li><a href="#">教学管理</a></li>
  24. <li><a href="#">学生天地</a></li>
  25. <li><a href="#">招生问答</a></li>
  26. <li><a href="#">就业实训</a></li>
  27. <li><a href="user.html">在线报名</a></li>
  28. <li><a href="#">联系我们</a></li>
  29. </ul>
  30. </div>
  31. </div>
  32. <!--03总体框架-->
  33. <div id="HTML">
  34. <!--001图片轮播滚动-->
  35. <div id="header">
  36. <img src="img/header/20191209100339382120.jpg" />
  37. <img src="img/header/gdt002.jpg" />
  38. <img src="img/header/gdt001.jpg" />
  39. </div>
  40. <!--002公告栏-->
  41. <div id="headerfoot">
  42. <div class="list-group-item reed">
  43. <marquee scrollamount="8" direction="left" align="center" style="font-weight: bold;line-height: 20px;font-size: 20px;color: white;">
  44. <img border="0" width="32" src="img/gonggao.gif">
  45. 欢迎来到云农职官方网站!</marquee>
  46. </div>
  47. </div>
  48. <!--003公告招生就业-->
  49. <div id="border_zhaosheng">
  50. <div id="border_zhaosheng1">
  51. <img src="img/tongzhizhongxin.png" />
  52. <table>
  53. <tr>
  54. <td>>> <a href="#">云南农业职业技术学院小哨校区教室改造教学设备购...</a> </td>
  55. <td class="nbsp_shuzi">2019.12.18</td>
  56. </tr>
  57. <tr>
  58. <td>>> <a href="#">云南农业职业技术学院经管学院采购会计学练训赛一...</a> </td>
  59. <td class="nbsp_shuzi">2019.12.09</td>
  60. </tr>
  61. <tr>
  62. <td>>> <a href="#">云南农业职业技术学院《云南农业》月刊及《云南农...</a> </td>
  63. <td class="nbsp_shuzi">2019.12.06</td>
  64. </tr>
  65. <tr>
  66. <td>>> <a href="#">云南农业职业技术学院购药品检测技术实训设备竞争...</a> </td>
  67. <td class="nbsp_shuzi">2019.12.05</td>
  68. </tr>
  69. <tr>
  70. <td>>> <a href="#">云南农业职业技术学院校园监控设备实施新装项目.....</a> </td>
  71. <td class="nbsp_shuzi">2019.12.03</td>
  72. </tr>
  73. <tr>
  74. <td></td>
  75. <td></td>
  76. </tr>
  77. </table>
  78. </div>
  79. <div id="border_zhaosheng2">
  80. <div id="border_zhangsheng2_1">
  81. <img class="border_zhangsheng2_img1" src="img/zhaoshengzixun.png" />
  82. <div class="border_zhangsheng2_1_t">
  83. <img class="border_zhangsheng2_img1_1" src="img/004zyjs.jpg" />
  84. <img class="border_zhangsheng2_img1_1" src="img/004ybmxt.jpg" />
  85. </div>
  86. <div class="border_zhangsheng2_1_b">
  87. <img class="border_zhangsheng2_img1_1" src="img/004crzs.jpg" />
  88. <img class="border_zhangsheng2_img1_1" src="img/004bkzl.jpg" />
  89. </div>
  90. </div>
  91. <div id="border_zhangsheng2_2">
  92. <img class="border_zhangsheng2_img1" src="img/jiuyezixun.png" />
  93. <div class="border_zhangsheng2_1_t">
  94. <img class="border_zhangsheng2_img1_1" src="img/005jyxxw.jpg" />
  95. <img class="border_zhangsheng2_img1_1" src="img/005jyzd.jpg" />
  96. </div>
  97. <div class="border_zhangsheng2_1_b">
  98. <img class="border_zhangsheng2_img1_1" src="img/005zsbbm.jpg" />
  99. <img class="border_zhangsheng2_img1_1" src="img/005zpxx.jpg" />
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <!--004校园风采-->
  105. <div id="xioayuanfc">
  106. <div id="xioayuanfc_t">
  107. <div id="xioayuanfc_t_span">校园风采</div><div id="xioayuanfc_t_xxxz">&nbsp;&nbsp;&nbsp;莘莘学子勤奋攻读、矢志成才的理想园地</div>
  108. </div>
  109. <div id="xioayuanfc_c">
  110. <!--<marquee scrollamount="10" direction="down" align="center">-->
  111. <img src="img/xiaoyuan/a1.jpg" />
  112. <img src="img/xiaoyuan/a2.jpg" />
  113. <img src="img/xiaoyuan/a3.jpg" />
  114. <img src="img/xiaoyuan/a4.jpg" />
  115. <img src="img/xiaoyuan/a5.jpg" />
  116. <img src="img/xiaoyuan/a6.jpg" />
  117. <!--<img src="img/xiaoyuan/a7.jpg" />-->
  118. <!--<img src="img/xiaoyuan/a8.jpg" />-->
  119. </div>
  120. </div>
  121. <!--005课程-->
  122. <div id="border_kecheng">
  123. <div id="border_kecheng_t">
  124. <div id="border_kecheng_t_gwkc">岗位课程</div><div id="border_kecheng_t_scdy">&nbsp;&nbsp;&nbsp;针对市场调研,总结多门热门课程体系,可以便捷的进行课程学习</div>
  125. </div>
  126. <div id="border_kecheng_f">
  127. <div id="border_kecheng_f_1">
  128. <img class="border_kecheng_f_t" src="img/kecheng/kc_JAVA.jpg" alt="JAVA工程师"/>
  129. <img class="border_kecheng_f_t" src="img/kecheng/kc_IOS.jpg" alt="" />
  130. <img src="img/kecheng/kc_PHP.jpg" alt="" />
  131. <img src="img/kecheng/kc_HTML.jpg" alt="前端工程师"/>
  132. <img src="img/kecheng/kc_Android.jpg" alt="Android工程师"/>
  133. </div>
  134. <div id="border_kecheng_f_2">
  135. <img src="img/kc_001.jpg" />
  136. </div>
  137. </div>
  138. </div>
  139. <!--006专业-->
  140. <div id="border_zhuanye">
  141. <div id="border_zhuanye_t">
  142. <div id="border_zhuanye_t_tszy">特色专业</div><div id="border_zhuanye_t_xthz">&nbsp;&nbsp;&nbsp;采用校企合作的教学模式,让学生学到更多知识,掌握前沿信息。</div>
  143. </div>
  144. <div id="border_zhuanye_f">
  145. <div>
  146. <img class="border_zhuanye_img" src="img/foot/foot_xxgk.jpg" />
  147. <img class="border_zhuanye_img" src="img/foot/foot_tsg.jpg" />
  148. <img class="border_zhuanye_img" src="img/foot/foot_xsgz.jpg" />
  149. <img class="border_zhuanye_img" src="img/foot/foot_xyfj.jpg" />
  150. </div>
  151. <div>
  152. <img class="border_zhuanye_img" src="img/foot/foot_jxzzgl.jpg" />
  153. <img class="border_zhuanye_img" src="img/foot/foot_kszx.jpg" />
  154. <img class="border_zhuanye_img" src="img/foot/foot_mooc.jpg" />
  155. <img class="border_zhuanye_img" src="img/foot/foot_xglj.jpg" />
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. <!--04尾部页脚-->
  161. <div id="foot">
  162. <div id="foot000">
  163. <div id="foot_t">
  164. <div id="foot_t_logo"><img src="img/ynave_logo.png" /></div>
  165. <div id="foot_t_dz">
  166. <p>茭菱校区地址:昆明市茭菱路128号 互联网技术学院</p><p>邮编:651701</p><p>电话:0871-65387155&nbsp;&nbsp;&nbsp;650031</p>
  167. </div>
  168. <div id="foot_t_weixin">
  169. <div id="foot_t_img1"><img src="img/foot/weibo.png" /></div> <div>官方微博</div>
  170. </div>
  171. <div id="foot_t_weibo">
  172. <div id="foot_t_img2"><img src="img/foot/weixin.png" /></div> <div>官方微信</div>
  173. </div>
  174. </div>
  175. </div>
  176. <div id="foot_f">
  177. <div id="foot_F_0">
  178. <section class="bq1"><spam>Copyright 2020 互联网技术学院 宣传部维护</span><span>|</span>地址:昆明市茭菱路128号<span>|</span><a href="#" target="_blank">滇ICP备13000536号-1<span>|</span></a>滇公网安备 53010202000542号
  179. </section>
  180. </div>
  181. </div>
  182. </div>
  183. </body>
  184. </html>

index.css

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. /*div{
  6. border: 1px solid red;
  7. }*/
  8. /*01总头部*/
  9. #top{
  10. margin: 0 auto;
  11. width: 100%;
  12. height: 140px;
  13. background-color: #175eb8;
  14. }
  15. /*头部框架*/
  16. #top0{
  17. margin: 0 auto;
  18. width: 1200px;
  19. height: 140px;
  20. }
  21. /*logo*/
  22. #top1{
  23. width: 100%;
  24. height: 140px;
  25. background-repeat: no-repeat;
  26. background-image: url(../img/top1.png);
  27. }
  28. /*02导航栏*/
  29. #top2{
  30. margin: 0 auto;
  31. width: 100%;
  32. height: 40px;
  33. background-color: white;
  34. }
  35. #top2_1{
  36. margin: 0 auto;
  37. width: 1200px;
  38. height: 40px;
  39. }
  40. #top2 li{
  41. line-height: 40px;
  42. list-style: none;
  43. font-family: "微软雅黑";
  44. font-size: 20px;
  45. float: left;
  46. padding-left: 29.28px;
  47. padding-right: 28.5px;
  48. }
  49. #top2 a{
  50. color: black;
  51. text-decoration: none;
  52. }
  53. #top2 a:hover{
  54. color: white;
  55. }
  56. #top2 li:hover{
  57. color: red;
  58. background-color: #175eb8;
  59. display: block;
  60. }
  61. /*03内容框架*/
  62. #HTML{
  63. margin: 0 auto;
  64. width: 1900px;
  65. height: 2300px;
  66. background-image: url(../img/bgimg.png);
  67. /*background-color: blue;*/
  68. }
  69. /*001图片轮播滚动*/
  70. #header{
  71. width: 5700px;
  72. height: 550px;
  73. background-color: aquamarine;
  74. overflow: hidden;/*隐藏溢出内容*/
  75. animation: switch 10s ease-out infinite;
  76. }
  77. #header img{
  78. float: left;
  79. width: 1900px;
  80. height: 550px;
  81. }
  82. @keyframes switch {
  83. 0%, 25% {
  84. margin-left: 0;
  85. }
  86. 35%, 60% {
  87. margin-left: -1900px;
  88. }
  89. 70%, 100% {
  90. margin-left: -3800px;
  91. }
  92. }
  93. /*002公告栏*/
  94. #headerfoot{
  95. width: 100%;
  96. height: 80px;
  97. background-color: #6495ED;
  98. }
  99. /*003公告招生就业*/
  100. #border_zhaosheng{
  101. margin: 0 auto;
  102. width: 1200px;
  103. height: 400px;
  104. /*background-color: aliceblue;*/
  105. }
  106. /*招生通知中心*/
  107. #border_zhaosheng1{
  108. float: left;
  109. width: 550px;
  110. height: 400px;
  111. overflow: hidden;
  112. /*font-size: 15px;*/
  113. }
  114. #border_zhaosheng1 img{
  115. width: 550px;
  116. height: 70px;
  117. }
  118. #border_zhaosheng1 tr{
  119. line-height: 56px;
  120. }
  121. .nbsp_shuzi{
  122. padding-left: 35px;
  123. }
  124. #border_zhangsheng1 table tr td a{
  125. text-decoration: none;
  126. color: #000000;
  127. }
  128. /*招生咨询/就业咨询*/
  129. #border_zhaosheng2{
  130. float: right;
  131. width: 650px;
  132. height: 395px;
  133. /*background-color: #565658;*/
  134. }
  135. .border_zhangsheng2_img1{
  136. width: 325px;
  137. height: 70px;
  138. }
  139. #border_zhangsheng2_1{
  140. width: 50%;
  141. height: 395px;
  142. float: left;
  143. }
  144. .border_zhangsheng2_img1_1{
  145. width: 150px;
  146. height: 105px;
  147. }
  148. .border_zhangsheng2_1_t,.border_zhangsheng2_1_b{
  149. margin-top: 40PX;
  150. margin-left: 10px;
  151. }
  152. #border_zhangsheng2_2{
  153. width: 50%;
  154. height: 395px;
  155. float: right;
  156. }
  157. /*004校园风采*/
  158. #xioayuanfc{
  159. margin: 0 auto;
  160. width: 1900px;
  161. height: 300px;
  162. background-color: white;
  163. border:1px solid #6495ED;
  164. }
  165. #xioayuanfc_t{
  166. width: 1200px;
  167. height: 50px;
  168. line-height: 50px;
  169. }
  170. #xioayuanfc_t_span{
  171. margin-top: 5px;
  172. line-height: 40px;
  173. float: left;
  174. width: 100px;
  175. height: 40px;
  176. background-color: #6495ED;
  177. color: white;
  178. text-align: center;
  179. margin-left: 350px;
  180. border-radius: 10px;
  181. }
  182. #xioayuanfc_t_xxxz{
  183. color: #666666;
  184. }
  185. #xioayuanfc_c{
  186. /*margin: 0 auto;*/
  187. float: left;
  188. width: 1900px;
  189. height: 200px;
  190. }
  191. #xioayuanfc_c img{
  192. float: left;
  193. width: 300px;
  194. height: 200px;
  195. padding-left: 15px;
  196. }
  197. /*005课程*/
  198. /*课程总div*/
  199. #border_kecheng{
  200. margin: 0 auto;
  201. width: 1200px;
  202. height: 550px;
  203. background-color: #F5F5F5;
  204. }
  205. /*课程上部分*/
  206. #border_kecheng_t{
  207. line-height: 50px;
  208. background-color: white;
  209. }
  210. #border_kecheng_t_gwkc{
  211. margin-top: 5px;
  212. line-height: 40px;
  213. float: left;
  214. width: 100px;
  215. height: 40px;
  216. background-color: #6495ED;
  217. color: white;
  218. text-align: center;
  219. border-radius: 10px;
  220. }
  221. #border_kecheng_t_scdy{
  222. color: #666666;
  223. }
  224. /*课程下部分*/
  225. #border_kecheng_f{
  226. margin: 0 auto;
  227. padding-top: 30px;
  228. line-height: 90px;
  229. }
  230. #border_kecheng_f_1{
  231. margin-left: 30px;
  232. /*margin-left: 170px;*/
  233. }
  234. #border_kecheng_f_1 img{
  235. /*margin-left: 170px;*/
  236. width: 19%;
  237. height: 220px;
  238. }
  239. #border_kecheng_f_2 img{
  240. /*margin-left: 170px;*/
  241. width: 100%;
  242. height: 180px;
  243. }
  244. /*006专业*/
  245. #border_zhuanye{
  246. margin: 0 auto;
  247. width: 1200px;
  248. height: 400px;
  249. /*background-color: brown;*/
  250. }
  251. #border_zhuanye_t{
  252. height: 50px;
  253. background-color: white;
  254. }
  255. #border_zhuanye_t_tszy{
  256. margin-top: 5px;
  257. line-height: 40px;
  258. float: left;
  259. width: 100px;
  260. height: 40px;
  261. background-color: #6495ED;
  262. color: white;
  263. text-align: center;
  264. border-radius: 10px;
  265. }
  266. #border_zhuanye_t_xthz{
  267. color: #666666;
  268. line-height: 50px;
  269. }
  270. .border_zhuanye_img{
  271. margin-top: 20px;
  272. padding-left: 60px;
  273. width: 220px;
  274. height: 145px;
  275. }
  276. /*04尾部页脚*/
  277. #foot{
  278. margin: 0 auto;
  279. width: 100%;
  280. height: 150px;
  281. background-color: #175eb8;
  282. }
  283. #foot000{
  284. margin: 0 auto;
  285. width: 1200px;
  286. height: 110px;
  287. }
  288. #foot_t{
  289. width: 100%;
  290. height: 110px;
  291. /*background-color: #6495ED;*/
  292. }
  293. #foot_t_logo{
  294. float: left;
  295. }
  296. #foot_t img{
  297. margin-top: 25px;
  298. }
  299. #foot_t_dz{
  300. color: white;
  301. float: left;
  302. padding-top: 25px;
  303. padding-left: 80px;
  304. }
  305. #foot_t_weixin,#foot_t_weibo{
  306. width: 100px;
  307. height: 110px;
  308. float: right;
  309. /*background-color: #FF0000;*/
  310. color: white;
  311. }
  312. #foot_t_weixin:hover,#foot_t_weibo:hover{
  313. color: red;
  314. }
  315. #foot_t_img1,#foot_t_img2{
  316. margin-top: 10px;
  317. margin-left: 20px;
  318. }
  319. #foot_f{
  320. width: 100%;
  321. height: 40px;
  322. background-color: #000000;
  323. }
  324. #foot_F_0{
  325. overflow: hidden;
  326. width: 1200px;
  327. line-height: 40px;
  328. margin: 0 auto;
  329. }
  330. #foot_f section{
  331. color: white;
  332. margin-left: 50px;
  333. }
  334. #foot_f span{
  335. padding-left: 30px;
  336. padding-right: 30px;
  337. }
  338. #foot_f a{
  339. color: white;
  340. text-decoration: none;
  341. }
  342. #foot_f span:hover{
  343. color: #175eb8;
  344. }

云南农业职业技术学院 / 互联网技术学院官网 HTML5+CSS3的更多相关文章

  1. 云南农业职业技术学院 - 互联网技术学院 - 美和易思《MYSQL 高级查询与编程》 综合机试试卷

    数据库及试题文档下载:https://download.csdn.net/download/weixin_44893902/14503097 目录 题目:电商平台 mysql 数据库系统管理 一. 语 ...

  2. Java+HTML5 试题 云南农业职业技术学院 - 互联网技术学院

    摸底测试 100题_共100.00分_及格60.00分  第1题 [单选题][1.00分][概念理解] 执行完下面程序片段后, ( )的结论是正确的. int a, b, c; a = 1; b = ...

  3. HTML5 +Java基础 大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业

     第1题 [单选题][0.33分][概念理解] 关于java中的逻辑运算符,下列说法正确的是 逻辑运算符||.&&.!都是用于连接两个关系表达式</p> 当&&am ...

  4. Java高级大一结业认证考试试题 - 云南农业职业技术学院 - 互联网技术学院 - 美和易思校企合作专业

     第1题 .关于XML的文档结构描述错误的是 一个基本的XML文档通常由序言和文档元素两部分组成 XML文档中的序言可以包括XML声明.处理指令和注释 XML文档中的元素以树形结构排列 XML文档的声 ...

  5. 麦子学院bootstrap实战项目官网,后台,jquery.singlePageNav.min.js ,wow.min.js,animate.css使用

    1.源码笔记 我的源码+笔记(很重要):链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2 感谢麦子学院项目相关视频:链接: https://pan.baidu ...

  6. 小米官网的css3导航菜单

    HTML代码: <div class="nav"> <ul> <li><a href="#">首页</a& ...

  7. 美和易思 · 「云农职互联网技术学院」HTML+CSS 做西普尼金表官网

    假期作业,好久没碰了,代码写得很烂......写博客纯属记录! 源代码下载地址:https://download.csdn.net/download/weixin_44893902/12805555 ...

  8. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  9. Python爬虫入门教程 19-100 51CTO学院IT技术课程抓取

    写在前面 从今天开始的几篇文章,我将就国内目前比较主流的一些在线学习平台数据进行抓取,如果时间充足的情况下,会对他们进行一些简单的分析,好了,平台大概有51CTO学院,CSDN学院,网易云课堂,慕课网 ...

随机推荐

  1. 设置linux下oracle开机自启动

    1.修改配置文件,vi /etc/oratab orcl:/u01/app/oracle/product/11.2.0/db_1:Y 2.创建启动文件,/etc/init.d/ #!/bin/sh # ...

  2. 理解JMX之介绍和简单使用

    JMX最常见的场景是监控Java程序的基本信息和运行情况,任何Java程序都可以开启JMX,然后使用JConsole或Visual VM进行预览.下图是使用Jconsle通过JMX查看Java程序的运 ...

  3. WPF 引用第三方库的控件在设计器加上设计时数据和属性

    本文告诉大家如何在 VisualStudio 2022 的 XAML 设计器中,在设计时给第三方控件加上设计用的属性和数据的方法 此功能要求使用不低于 VisualStudio 2019 的 16.8 ...

  4. 基于Web的质量和测试度量指标

    直观了解软件质量和测试的完整性 VectorCAST/Analytics可提供便于用户理解的web仪表盘视图来显示软件代码质量和测试完整性指标,让用户能够掌握单个代码库的趋势,或对比多个代码库的度量指 ...

  5. java的bio和nio写入及读取txt文件

    一.bio的写入及读取 1.采用bio之BufferedWriter 写入文件 public static void main(String[] args) throws IOException { ...

  6. Java oop 笔记

    摘要网址:http://note.youdao.com/noteshare?id=bbdc0b970721e40d327db983a2f96371

  7. 显示摘要任务(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 用熬肥的同学都知道,在熬肥的[文件]>[选项]设置中,[高级]才是最多选项设置的地方: 张同学亦如是说. 比如一个比 ...

  8. Java 自定义注解在登录验证的应用

    java注解 从 JDK 5开始,Java 增加了注解的新功能,注解其实是代码里面的特殊标记,这些标记可以在编译.类加载和运行时被读取,在不改变代码原有逻辑下,给源文件嵌入注解信息.再通过返回获取注解 ...

  9. mysql 连接数过多内存增长过快

    mysql连接允许长连接和短链接,但是本身建立连接会有很大开销所以一般连接mysql会使用长连接.但是全部是使用长连接后,可能会出现mysql有时占用内存涨的特别快,这是因为mysql在执行过程中临时 ...

  10. 如何把myeclipse的工程导入到svn服务器上

    如何把myeclipse的工程导入到svn服务器上,按照如下步骤便可