一、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> <div class="content1"><!--内容第一部分三图片轮播--> <div id="replay"> <div> <div><a href=""><img src="./header11.jpg"></a></div> <div><a href=""><img src="./header12.jpg"></a></div> <div><a href=""><img src="./header13.jpg"></a></div> </div> </div> </div> <div class="content2"><!--内容第二部分 1、left：新闻聚焦； 2、right1：活动预告； 3、right2：媒体华农--> <div class="left"><!--left:新闻聚焦--> <div class="title"> <div class="word"><p>新闻聚焦</p></div> <div class="english"><p>NEWS</p></div> <a href="">更多>></a> </div> <div class="total"> <div class="part"> <div class="time">2021-08-12</div> <div class="title1"><a href="">2021年秋季学期开学返校工作安排</a></div> <div class="word"><a href=""> 当前疫情防控形势依然严峻，国内多个城市还存在疫情点状爆发态势。为认真落实上级有关要求，切实做好秋季学期开学准备工作，经学校疫情防控指挥部研究，现对2021年秋季学期学生开学和返校工作作作出安排。</a></div> </div> <div class="part"> <div class="time">2021-08-17</div> <div class="title1"><a href="">《大学基础化学先修课程》：新高考下本科人才培养的新探索</a></div> <a href=""><img src="./2021-05-8-17.jpg"></a> </div> <div class="part"> <div class="time">2021-08-13</div> <div class="title1"><a href="">我校在肿瘤精准治疗研究中取得新进展</a></div> <div class="word"><a href="">近日，我校韩鹤友教授团队与新加坡南洋理工大学赵彦利教授、华中科技大学同济医学院附属协和医院副主任医师梁华庚合作，设计了一种原位纳米酶放大的近红外II肿瘤精准治疗平台，为肿瘤的精准治提供了新的方法。</a></div> </div> <div class="part"> <div class="time">2021-08-16</div> <div class="title1"><a href="">我校在线联合举办“碳达峰、碳中和——气候适应性设计下的风景园林”国际学术论坛</a></div> <div class="word"><a href="">8月12日，由我校和国际风景园林师联合会（IFLA）亚太气候工作组、湖北省风景园林学会联合主办，我校园艺林学学院承办的2021“碳达峰、碳中和——气候适应性设计下的风景园林”国际学术论坛在线召开。</a></div> </div> <div class="part"> <div class="time">2021-08-13</div> <div class="title1"><a href="">我校获批湖北省科技重大项目、重点研发计划项目8项</a></div> <div class="word"><a href="">湖北省科技厅近日公布省科技重大项目和重点研发计划（第一批）立项项目名单，我校获批重点研发计划项目7项，湖北洪山实验室获批重大项目1项。</a></div> </div> <div class="part"> <div class="time">2021-08-11</div> <div class="title1"><a href="">李召虎检查疫情防控及开学准备工作</a></div> <a href=""><img src="./2021-08-11.jpg"/></a> </div> </div> </div> <div class="right1"><!--right1:活动预告--> <div class="title"> <div class="word"><p>活动预告</p></div> <div class="english"><p>INFO</p></div> </div> <div class="box"> <div class="part"> <a href=""><img src="./收藏图标.jpeg"/></a> <div class="time">08-19</div> <div class="title2"><a href="">“信息-健康”学科交叉研讨会</a></div> </div> <div class="part"> <a href=""><img src="./收藏图标.jpeg"/></a> <div class="time">08-16</div> <div class="title2"><a href="">亚信智慧农业应用与发展研修班（第二期）</a></div> </div> <div class="part"> <a href=""><img src="./收藏图标.jpeg"/></a> <div class="time">08-15</div> <div class="title2"><a href="">2021年中国农林经济管理学术年会</a></div> </div> <div class="DrapPart"> <div class="DrapDown"> <a href=""><img src="./收藏图标.jpeg"/></a> <div class="time22">08-12</div> <div class="title22"><a href="">第一届林木生物技术前沿国际研讨会（线上）</a></div> </div> <div class="DrapDown"> <a href=""><img src="./收藏图标.jpeg"/></a> <div class="time22">08-12</div> <div class="title22"><a href="">肿瘤免疫治疗新技术主题学术沙龙</a></div> </div> <div class="DrapDown"> <a href=""><img src="./收藏图标.jpeg"/></a> <div class="time22">08-02</div> <div class="title22"><a href="">肠道营养与健康主题学术沙龙</a></div> </div> <div class="DrapDown"> <a href=""><img src="./收藏图标.jpeg"/></a> <div class="time22">07-29</div> <div class="title22"><a href="">第二届园艺与植物生物学国际研讨会（线上）</a></div> </div> <div class="word"><a href="">更多</a></div> </div> </div> </div> <div class="right2"><!--right2:媒体华农--> <div class="title"> <div class="word"><p>媒体华农</p></div> <div class="english"><p>MEDIA</p></div> <a href="">更多>></a> </div> <div class="part"> <img src="./五星图标.jpeg"/> <div class="webset">科学网</div> <div class="time">08-17</div> <div class="title2"><a href="">精准治疗平台可对乳腺癌实现化学和光热联合疗法</a></div> </div> <div class="part"> <img src="./五星图标.jpeg"/> <div class="webset">湖北日报</div> <div class="time">08-15</div> <div class="title2"><a href="">用好一朵油菜花</a></div> </div> <div class="part"> <img src="./五星图标.jpeg"/> <div class="webset">中国科学网</div> <div class="time">08-09</div> <div class="title2"><a href="">科学家搭建平台解析年龄相关免疫和基因表达变化</a></div> </div> <div class="part"> <img src="./五星图标.jpeg"/> <div class="webset">中国科学网</div> <div class="time">08-09</div> <div class="title2"><a href="">从异花授粉到自花授粉，花的形态经历了什么</a></div> </div> </div> </div> <div class="content3"><!--内容第三部分三幅图片--> <div class="total"> <div class="part"> <img src="./foot11.jpg"/> <div class="title"><a href=" ">高翅李召虎致广东校友的一封信</a></div> <div class="word">近期，广东部分地区聚集性疫情牵动人心，端午前夕，校党委书记高翅、校长李召虎给广东校友们发出慰问信。</div> <div class="border">详情</div> </div> <div class="part"> <img src="./foot12.jpg"/> <div class="title"><a href=" ">钢铁长龙”毕业巡游欢乐举行</a></div> <div class="word">6月20日，一场由现代农机装备组成的“钢铁长龙”毕业巡游在校园里欢乐举行。校领导与15个学院的师生们一起，共同欢庆2021届毕业生毕业。</div> <div class="border">详情</div> </div> <div class="part"> <img src="./foot13.jpg"/> <div class="title"><a href=" ">青春快闪：追寻生命的意义</a></div> <div class="word">党史学习教育如何走进心灵？5月27日，由我校文化办策划编创的文学艺术与情境式文献展“红岩”现场系列快闪《生长的红岩》在艺术馆上演。</div> <div class="border">详情</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{/*header左部列表*/ margin-left:200px; float:left; } .header ul .right{/*header右部列表*/ margin-right:200px; float:right; } /*---------------------------------------------- header1：顶部第二导航 -------------------------------------------------*/ .header1{ 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 li .DrapdownWord{/*列表下拉菜单内容*/ display: none;/*平时不显示*/ position: absolute; } .header1 ul li:hover .DrapdownWord{/*鼠标放至li时，DrapdownWord状态设置*/ 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{ height:450px; width:100%; } .content1 #replay{/*设置放映容器*/ margin-left:90px; width:100%; height:450px; overflow: hidden; } .content1 #replay>div{ width:300%;/*三个图，总300%*/ height:450px; animation: replay 6s infinite;/*循环放映*/ } .content1 #replay>div>div{ width:33.3%;/*此div占 “.content1 #replay>div”的33.3%*/ float:left; height:450px; } .content1 #replay>div>div>img{ width:100%; height:450px; } @keyframes replay{/*动画三等均分*/ 0%{ margin-left: 0; } 20%{ margin-left: 0; } 40%{ margin-left: -100%; } 60%{ margin-left: -100%; } 80%{ margin-left: calc(-100% * 2); } 100%{ margin-left: calc(-100% * 2); } } /*----------------- content2：内容第二部分 1、left：新闻聚焦； 2、right1：活动预告； 3、right2：媒体华农 --------------------*/ .content2{/*content总体设置*/ background-color:white; height:760px; width:100%; display: flex;/*flex布局*/ flex-direction: column;/*以列排列*/ flex-wrap: wrap; align-content: flex-start;/*与交叉轴的起点对齐（顶部对齐）；*/ } .content2 .title{/*content2 大标题统一设置 “新闻聚焦、活动预告、媒体华农” */ height:70px; border-bottom: 1px green solid ; } .content2 .title .word{/*title文字*/ float:left; color:green; font-size:25px; margin-top:30px; } .content2 .title .english{/*title旁英文*/ float:left; margin-left:5px; margin-top:40px; font-size:15px; color:brown; } .content2 .title a{ margin-top:40px; float:right; text-decoration: none; color:black; font-size:10px; } .content2 .title a:hover{ color:green; } /*---------------------------------------content2左部分-----------------------------------*/ .content2 .left{/*content 左部分*/ box-sizing: border-box; margin-left:200px; background-color:white; height: 760px; width:700px; } .content2 .left .total{/*设置除去大标题空间的容器盒子*/ box-sizing: border-box; background-color: white; display:flex;/*flex布局*/ flex-flow:row wrap;/*以行排列，穷尽换行*/ width:100%; height:680px; } .content2 .left .total .part{/*设置每一部分，共六部分*/ margin-left:10px; box-sizing: border-box; background-color:white ; width:48%; height:30%; } .content2 .left .total .part:hover{/*设置鼠标放至part时，背景颜色为白烟色*/ background-color: WhiteSmoke; } .content2 .left .total .time{/*每一部分的时间设置，例：“2021-08-18”*/ margin-top: 10px; color:tan; font-size:15px; } .content2 .left .total .part img{/*每一部分的图片设置*/ width:100%; height: 140px; } .content2 .left .total .title1{/*每一部分的标题设置*/ margin-top: 10px; } .content2 .left .total .title1 a{ color:black; font-size:15px; text-decoration: none; } .content2 .left .total .title1 a:hover{ color:green; } .content2 .left .total .word{/*每一部分的文字设置*/ margin-top:20px; } .content2 .left .total .word a{ color: DarkGray; font-size:13px; text-decoration: none; } .content2 .left .total .word a:hover{ color:tan; } /*---------------------------------------content2右上部分-----------------------------------*/ .content2 .right1 {/*content2 右上部分*/ box-sizing: border-box; margin-left:40px; background-color: white; height:325px; width:380px; display:flex; flex-flow:column nowrap; } .content2 .right1 .box{/*content2 除去“活动预告”标题空间的容器盒子*/ height:255px; width:380px; display: flex; flex-flow: column nowrap; } .content2 .right1 .box .part{/*content2 右上部分每一小part*/ box-sizing: border-box; margin-top: 0px; width:100%; height:81px;/*81*/ background-color: white; border-bottom:1px solid Gainsboro; } .content2 .right1 .box .part img{/*part的图片设置*/ width:40px; height:35px; float:left; } .content2 .right1 .box .part .time{/*part的时间设置*/ margin-top: 10px; margin-right: 10px; font-size: 15px; color:DarkGray; float: right; cursor:pointer;/*鼠标悬停呈现手状*/ } .content2 .right1 .box .part .title2{/*part标题设置*/ margin-top: 43px; margin-left: 10px; } .content2 .right1 .box .part .title2 a{ color:black; font-size:15px; text-decoration: none; } .content2 .right1 .box .part .title2 a:hover{ color:green; } .content2 .right1 .box .DrapPart{/*当鼠标放至box时，向下延伸隐藏盒子设置*/ box-sizing: border-box; height:400px; width:382px; margin-left: -1px; margin-top:255px;/*315*/ display: none; position: absolute; background-color: white; padding-top:0px; border-left: 1px solid DarkGray; border-right: 1px solid DarkGray; border-bottom: 1px solid DarkGray; } .content2 .right1 .box:hover{/*鼠标放至box时，为box加左右边框 注意right1和hover中间不能有空格*/ border-left: 1px solid DarkGray; border-right: 1px solid DarkGray; } .content2 .right1 .box:hover .DrapPart{/*鼠标放至box时，DrapPart以flex展示，竖列，不换列*/ display: flex; flex-flow: column nowrap; } .content2 .right1 .box .DrapPart .DrapDown{/*当鼠标放至box时，向下延伸隐藏盒子DrapPart每一隐藏部分DrapDown设置*/ box-sizing: border-box; width:100%; height:81px;/*26%*/ border-bottom:1px solid Gainsboro; } .content2 .right1 .box .DrapPart .DrapDown img{/*图片设置*/ width:40px; height:35px; float:left; } .content2 .right1 .box .DrapPart .DrapDown .time22{/*时间设置*/ margin-top: 10px; font-size: 15px; margin-right: 10px; color:DarkGray; float: right; cursor:pointer;/*鼠标悬停呈现手状*/ } .content2 .right1 .box .DrapPart .DrapDown .title22{/*标题设置*/ margin-top: 43px; margin-left: 10px; } .content2 .right1 .box .DrapPart .DrapDown .title22 a{ color:black; font-size:15px; text-decoration: none; } .content2 .right1 .box .DrapPart .DrapDown .title22 a:hover{ color:green; } .content2 .right1 .box .DrapPart .word{/*DrapPart最底部“ 更多 ”两字的特殊设置*/ margin-top: 20px; margin-right: 10px; background-color:white; } .content2 .right1 .box .DrapPart .word a{ color:black; float: right; text-decoration: none; font-size:15px; } .content2 .right1 .box .DrapPart .word a:hover{ color:green; } /*---------------------------------------content右下部分-----------------------------------*/ .content2 .right2{/*content 2 右下部分容器盒子*/ box-sizing: border-box; margin-left:40px; background-color: white; height:425px; width:380px; display:flex; flex-flow:column nowrap; } .content2 .right2 .part{/*content2 右下部分容器盒子内part设置*/ box-sizing: border-box; background-color: white; width:100%; height:22%; border-bottom:1px solid Gainsboro; } .content2 .right2 .part img{/*图片设置*/ width:40px; height:35px; float:left; } .content2 .right2 .part .webset{/*著明网址设置*/ font-size:15px; margin-top: 10px; float:left; color:tan; } .content2 .right2 .part .time{/*时间设置*/ margin-top: 10px; font-size: 15px; color:DarkGray; float: right; cursor:pointer;/*鼠标悬停呈现手状*/ } .content2 .right2 .part .title2{ margin-top: 35px; margin-left: 10px; } .content2 .right2 .part .title2 a{ color:black; font-size:17px; text-decoration: none; } .content2 .right2 .part .title2 a:hover{ color:green; } /*---------------------------------------------- content3：内容第三部分三幅图片 -------------------------------------------------*/ .content3{ background-color:green; height:430px; width:100%; } .content3 .total{/*盛放三图片容器盒子*/ margin-top:80px; margin-left: 220px; width:1080px; height:430px; background-color:green; display: flex; flex-flow:row nowrap;/*以行排列，不换行*/ } .content3 .total .part{/*每一部分设置*/ margin-top:50px; margin-left: 20px; margin-right: 20px; width:600px; height:330px ; background-color: white; } .content3 .total .part img{/*图片设置*/ margin-left:10px; margin-top:10px; width:300px; height: 150px; } .content3 .total .part img:hover{ opacity:0.4;/*图片透明度*/ } .content3 .total .part .title{/*标题设置*/ color:black; margin-left:10px; margin-top:10px; font-size: 15px; } .content3 .total .part a{ color:black; text-decoration: none; } .content3 .total .part a:hover{ color:green; } .content3 .total .part .word{/*内容简介设置*/ color:Gray; margin-left:10px; margin-top:30px; font-size: 14px; } .content3 .total .part .border{/*详情按钮设置*/ color:white; border-radius: 2px; background-color:BurlyWood; margin-left:5px; padding:3px 3px 3px 3px;/*上 右 下 左*/ width:25px; font-size: 10px; float: left; cursor: pointer; } /*---------------------------------------------- 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{/*footer容器内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{/*footer容器内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{/*footer容器内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、命名为“2021-05-8-17”：
2、命名为“2021-08-11”：
3、命名为“收藏图标”：
4、命名为“五星图标”：
5、命名为“header1图”：
6、命名为“header11”：
7、命名为“header12”：
8、命名为“header13”：
9、命名为“foot11”：
10、命名为“foot12”：
11、命名为“foot13”：
四、存储与执行
将“ 一 ”中的HTML代码、“ 二 ”中的CSS代码，“ 三 ”中的11个图片按各自要求命名，放至同一文件夹下，打开“ 华中农业大学官网.html ”与“ 华中农业大学官网.css ”，在html中运行。
五、运行结果：
中间的长横图含轮播图，其他栏有鼠标悬浮显现隐藏栏的功能，可运行代码后自行查看。