官网学生页面"/>
【大前端】华农官网学生页面
一、运行结果：
二、HTML代码如下：
命名为：华农官网学生页面.html
<!-- 华中农业大学官网学生页面 Created by 怪& --> <!DOCTYPE html> <html> <head> <style type="text/css">@import"./华农官网学生页面.css";</style> </head><body><div class="header"><!-- 顶部第一导航 --><ul><div class="left"><li><a href="">电子邮箱</a></li><li><a href="">校务公开</a></li><li><a href="">信息门户</a></li><li><a href="">图书馆</a></li><li><a href="">博物馆</a></li></div><div class="right"><li><a href="">学生</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="">国际</a></li><li><a href="">搜索</a></li></div></ul></div><div class="header1"><!--顶部第二导航--><a href=""><img src="./header1图.jpeg" /></a> <div class="line"></div><ul><li><a href="">学校新闻</a></li><li><a href="">学校概况</a><div class="DrapdownWord"><a href="">学校简介</a><a href="">学校章程</a><a href="">历史沿革</a><a href="">院系设置</a><a href="">机构设置</a><a href="">现任领导</a><a href="">历任领导</a></div></li><li><a href="">院系设置</a></li><li><a href="">教育教学</a><div class="DrapdownWord"><a href="">本科生教育</a><a href="">研究生教育</a><a href="">国际生教育</a><a href="">继续教育</a></div></li><li><a href="">招生就业</a><div class="DrapdownWord"><a href="">本科生招生</a><a href="">研究生招生</a><a href="">留学生招生</a><a href="">继续教育</a><a href="">本科生就业</a><a href="">研究生就业</a></div></li><li><a href="">师资团队</a><div class="DrapdownWord"><a href="">概况</a><a href="">人才计划</a></div></li><li><a href="">人才招聘</a></li><li><a href="">学科科研</a><div class="DrapdownWord"><a href="">学科建设</a><a href="">科学研究</a><a href="">学术期刊</a><a href="">社会服务</a></div></li><li><a href="">合作交流</a></li><li><a href="">走进华农</a><div class="DrapdownWord"><a href="">校园风光</a><a href="">校园生活</a><a href="">使用信息</a></div></li></ul></div> <div class="content1"><!--content1即横长图设置--><img src="./1.jpg"/></div><div class="content2"><!--content2设置--><div class="left"><!--content2左部导航设置--><div class="title">用户通道</div><div class="word"><a href="">学生</a></div><div class="word"><a href="">教工</a></div><div class="word"><a href="">考生</a></div><div class="word"><a href="">校友</a></div><div class="word"><a href="">访客</a></div></div><div class="right"><!--content2右部设置--><div class="firstpart"><a href="">首页 </a>·<a href=""> 用户通道 </a>·<a href=""> 学生</a><div class="title">学生</div></div><div class="secondpart"><div class="title"><a href="">新生专栏</a></div><div class="column1"><div class="word"><a href="">校园地图</a></div><div class="word"><a href="">新生自助报道</a></div><div class="word"><a href="">学校历史</a></div><div class="word"><a href="">交通信息</a></div><div class="word"><a href="">校园卡</a></div></div><div class="title"><a href="">校园文化</a></div><div class="column2"><div class="word"><a href="">南湖新闻网</a></div></div><div class="title"><a href="">学生服务（本科生）</a></div><div class="column1"><div class="word"><a href="">图书馆</a></div><div class="word"><a href="">本科教务管理系统</a></div><div class="word"><a href="">学生工作管理系统</a></div><div class="word"><a href="">课程中心</div><div class="word"><a href="">精品课程</a></div><div class="word"><a href="">信息门户</a></div></div><div class="title"><a href="">学生服务（研究生）</a></div><div class="column2"><div class="word"><a href="">图书馆</a></div><div class="word"><a href="">研究生一体化管理系统</a></div></div><div class="title"><a href="">反馈渠道</a></div><div class="column1"><div class="word"><a href="">校长信箱</a></div><div class="word"><a href="">举报投诉</a></div><div class="word"><a href="">信息公开</a></div><div class="word"><a href="">价格服务</a></div></div><div class="title"><a href="">生活服务</a></div><div class="column1"><div class="word"><a href="">校园卡服务</a></div><div class="word"><a href="">邮件系统</a></div><div class="word"><a href="">宿管服务</a></div><div class="word"><a href="">学生活动场地审批</a></div><div class="word"><a href="">交通服务</a></div><div class="word"><a href="">学费收缴</a></div></div><div class="title"><a href="">合作交流</a></div><div class="column2"><div class="word"><a href="">出国成绩证明</a></div><div class="word"><a href="">留学项目</a></div></div><div class="title"><a href="">职业发展</a></div><div class="column2"><div class="word"><a href="">本科就业指导</a></div><div class="word"><a href="">创业服务</a></div><div class="word"><a href="">研究生就业指导</a></div></div><div class="title"><a href="">毕业生专区</a></div><div class="column1"><div class="word"><a href="">校研究生论文提交</a></div><div class="word"><a href="">本科生毕业离校系统</a></div><div class="word"><a href="">研究生毕业离校系统</a></div><div class="word"><a href="">校友会</a></div><div class="word"><a href="">档案查询申请</a></div></div></div></div></div><div class="footer1"><!--底部第一导航设置--><div class="total"><div class="part"><div class="title"><a href="">学校新闻</a></div></div><div class="part"><div class="title"><a href="">学校概况</a></div><div class="word"><a href="">学校简介</a></div><div class="word"><a href="">学校章程</a></div><div class="word"><a href="">历史沿革</a></div><div class="word"><a href="">院系设置</a></div><div class="word"><a href="">机构设置</a></div><div class="word"><a href="">现任领导</a></div><div class="word"><a href="">历任领导</a></div></div><div class="part"><div class="title"><a href="">院系设置</a></div></div><div class="part"><div class="title"><a href="">教育教学</a></div><div class="word"><a href="">本科生教育</a></div><div class="word"><a href="">研究生教育</a></div><div class="word"><a href="">国际生教育</a></div><div class="word"><a href="">继续教育</a></div></div><div class="part"><div class="title"><a href="">招生就业</a></div><div class="word"><a href="">本科生招生</a></div><div class="word"><a href="">研究生招生</a></div><div class="word"><a href="">留学生招生</a></div><div class="word"><a href="">继续教育</a></div><div class="word"><a href="">本科生就业</a></div><div class="word"><a href="">研究生就业</a></div></div><div class="part"><div class="title"><a href="">师资团队</a></div><div class="word"><a href="">概况</a></div><div class="word"><a href="">人才计划</a></div></div><div class="part"><div class="title"><a href="">人才招聘</a></div></div><div class="part"><div class="title"><a href="">学科科研</a></div><div class="word"><a href="">学科建设</a></div><div class="word"><a href="">科学研究</a></div><div class="word"><a href="">学术期刊</a></div><div class="word"><a href="">社会服务</a></div></div><div class="part"><div class="title"><a href="">合作交流</a></div></div><div class="part"><div class="title"><a href="">走进华农</a></div><div class="word"><a href="">校园风光</a></div><div class="word"><a href="">校园生活</a></div><div class="word"><a href="">实用信息</a></div></div></div></div><div class="footer2"><!--最底部信息备注--><div class="word"><p>地址：湖北省武汉市洪山区狮子山街1号 邮编：430070 电话：027-87282027 传真：027-87384670</p><p>CopyRight © 华中农业大学版权所有</p><a href="">鄂ICP备13013419-1号 </a><a href=""> 鄂公网安备 42011102000808号 </a></div></div> </body></html>
三、CSS代码如下：
命名为：华农官网学生页面.css
/* 华中农业大学官网 Created by 怪& */*{margin:0;/*外边距*/padding:0;/*内边距*/ }body{font-size:20px; /*body 文本默认大小*/ }/*---------------------------------------------- header：顶部导航栏 -------------------------------------------------*/ .header{/*顶部导航栏*/background-color: green;height:50px;width: 100%; }.header ul{/*列表*/list-style-type: none;margin: 0;padding: 0;overflow: hidden; }.header ul li{float:left; } .header ul a{display: block;color:white;text-align:center;font-size:15px;padding:14px 16px;text-decoration: none; }.header ul a:hover{background-color: tan; }.header ul .left{/*列表左部*/margin-left:200px;float:left; }.header ul .right{/*列表右部*/margin-right:200px;float:right; }/*---------------------------------------------- header1：顶部第二导航栏 -------------------------------------------------*/.header1{/*header容器设置*/background-color:white;height:150px;margin:auto;margin-left: 200px; }.header1 img{/*图片设置*/width:300px;height:100px; }.header1 .line{/*图片下边框线*/border-top:1px solid brown;width:1120px; }.header1 ul{/*列表*/list-style-type: none;margin: 0;padding: 0;overflow: hidden; }.header1 ul li{float:left; }.header1 ul a{display: block;height:15px; width: 60px;color:green;background-color: white;text-align:center;font-size:14px;padding:14px 16px; /*14 16*/margin-left:20px;text-decoration: none; }.header1 ul a:hover{color:white;background-color:green; }.header1 ul a:hover{color:white;background-color:green; }.header1 ul li .DrapdownWord{/*下拉菜单内容*/display: none;/*平时不显示*/position: absolute; }.header1 ul li:hover .DrapdownWord{/*鼠标放至li时，DrapdownWord以block展现*/display: block; }.header1 ul li .DrapdownWord a{display: block;height:15px; width: 60px;color:white;background-color: green;text-align:center;font-size:12px;padding:14px 16px;margin-left:20px;text-decoration: none; }.header1 ul li .DrapdownWord a:hover{color:green;background-color: tan; }.header1 ul li .DrapdownWord:hover .li{/*当鼠标放至DrapdownWord时，li的展现设置*/color:white;background-color: green; } /*---------------------------------------------- content1：横长图设置 -------------------------------------------------*/.content1{margin-top: 15px;margin-left: 60px;width:1400px;height:300px;background-color: white; }.content1 img{/*图片设置*/width:1400px;height:300px; }/*---------------------------------------------- content2设置 -------------------------------------------------*/.content2{/*content2容器盒子设置*/padding-top:10px;height: 1200px;width:100%;background-color: white; } /*------------------content2左部导航设置--------------------*/ .content2 .left{margin-left:190px;float: left;width:280px;height:320px;position: relative;background-color: black; }.content2 .left .title{/*大标题“用户通道”设置*/width:280px;height:95px;text-align:center;font-size:40px;padding-top: 30px;color:white;background-color:Tan;border-bottom: 2px solid white; }.content2 .left .word{width:260px;height:30px;font-size:15px;padding-top: 10px;padding-left: 20px;color:black;background-color:Beige;border-bottom: 2px solid white;border-left: 2px solid LightGrey; }.content2 .left .word:hover{cursor: pointer;border-left: 2px solid green; }.content2 .left .word:hover a{color:green; }.content2 .left .word a{text-decoration: none;color:black; }/*------------------content2右部设置--------------------*/ .content2 .right{float: left;margin-left:40px;width:850px;height:1100px;background-color: white; } .content2 .right .firstpart{/*content2右部横线分栏上部设置*/float: left;width:850px;height:100px;margin-bottom: 20px;background-color: white;border-bottom: 1px solid AntiqueWhite; }.content2 .right .firstpart .title{/*标题“title”设置*/font-size:35px;margin-top:15px;color:green; }.content2 .right .firstpart a{color:black;font-size:15px;text-decoration: none; }.content2 .right .firstpart a:hover{color:green; }.content2 .right .secondpart{/*content2右部横线分栏下部设置，容器盒子*/display: flex;flex-flow: column;margin-left: 40px;width:800px;height:1000px;background-color: white; }.content2 .right .secondpart .title{/*标题分栏设置*/width:800px;height:30px;font-size:15px;padding-top: 8px;padding-left: 8px;margin-left: 8px;color:ForestGreen;background-color: WhiteSmoke;margin-bottom: 5px;border-bottom: 1px solid Silver; }.content2 .right .secondpart .title a{text-decoration: none;color:LimeGreen; }.content2 .right .secondpart .title a:hover{color: ForestGreen; }.content2 .right .secondpart .column1{/*内容分栏设置（占两行）*/width:800px;height:70px;padding-left:5px;padding-top: 10px;margin-left: 8px;background-color: white;display:flex;flex-flow: row wrap; }.content2 .right .secondpart .column1 .word{/*文字设置*/width:200px;height:25px;font-size:15px;background-color: white;margin-right:60px ;margin-top:2px; }.content2 .right .secondpart .column1 .word a{text-decoration: none;color:Tan; }.content2 .right .secondpart .column1 .word a:hover{color:green; }.content2 .right .secondpart .column2{/*内容分栏设置（占一行）*/width:800px;height:40px;padding-left:5px;padding-top: 10px;margin-left: 8px;background-color: white;display:flex;flex-flow: row wrap; }.content2 .right .secondpart .column2 .word{/*文字设置*/width:200px;height:25px;font-size:15px;background-color: white;margin-right:60px ;margin-top:2px; }.content2 .right .secondpart .column2 .word a{text-decoration: none;color:Tan; }.content2 .right .secondpart .column2 .word a:hover{color:green; } /*---------------------------------------------- footer1：底部第一导航设置 -------------------------------------------------*/ .footer1{/*footer1*/background-color:Beige;height:315px;width:100%; }.footer1 .total{/*footer1 容器盒子设置*/margin-left: 200px;width:1100px;height:315px;display: flex;/*flex*/flex-flow:row nowrap;/*以行排列，不换行*/ }.footer1 .total .part{/*footer1容器盒子内part设置*/margin-left: 10px;margin-top: 60px;margin-right:10px;width:90px;height:255px;display: flex;/*flex*/flex-flow:column nowrap;/*以列排列，不换列*/ }.footer1 .total .part .title{/*part内标题设置*/font-size:15px;margin-bottom:20px;text-align: center; }.footer1 .total .part .title a{color:black;text-decoration: none; }.footer1 .total .part .title a:hover{color: LightSlateGray; }.footer1 .total .part .word{/*part内文字设置*/font-size:12px;margin-bottom:10px;text-align:center }.footer1 .total .part .word a{color: DimGray;text-decoration: none; }.footer1 .total .part .word a:hover{color: LightSlateGray; }/*---------------------------------------------- footer2：最底部信息备注 -------------------------------------------------*/ .footer2{background-color:green;height:120px;width:100%; }.footer2 .word{padding-top:14px;font-size:15px;text-align:center; }.footer2 .word p{color:white;line-height: 35px; }.footer2 a{color:white;line-height: 35px;text-decoration: none; }.footer2 a:hover{color:Bisque; }
四、图片保存
1、命名为“header1图 ”：
2、命名为“1”：
五、存储与执行
将“ 一 ”中的HTML代码、“ 二 ”中的CSS代码，“ 三 ”中的两个图片按各自要求命名，放至同一文件夹下，打开“ 华农官网学生页面.html ”与“ 华农官网学生页面.css ”，在html中运行。
更多推荐
【大前端】华农官网学生页面
发布评论