一、运行结果：
编辑
二、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中运行。
编辑
