备案控制台
开发者社区 开发与运维 文章 正文

【大前端】华农官网页面

2022-08-26 128
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【大前端】华农官网页面

一、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号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            <a href=""> 鄂公网安备 42011102000808号  </a>
        </div>
    </div>
</body>
</html>
image.gif

二、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;
}
image.gif

三、图片保存

1、命名为“2021-05-8-17”：image.gif编辑

2、命名为“2021-08-11”：image.gif编辑

3、命名为“收藏图标”：image.gif编辑

4、命名为“五星图标”：image.gif编辑

5、命名为“header1图”：image.gif编辑

6、命名为“header11”：image.gif编辑

7、命名为“header12”：image.gif编辑

8、命名为“header13”：image.gif编辑

9、命名为“foot11”：image.gif编辑

10、命名为“foot12”：image.gif编辑

11、命名为“foot13”：image.gif编辑

四、存储与执行

将“ 一 ”中的HTML代码、“ 二 ”中的CSS代码，“ 三 ”中的11个图片按各自要求命名，放至同一文件夹下，打开“ 华中农业大学官网.html ”与“ 华中农业大学官网.css ”，在html中运行。

image.gif编辑

五、运行结果：

中间的长横图含轮播图，其他栏有鼠标悬浮显现隐藏栏的功能，可运行代码后自行查看。

image.gif编辑

文章标签：
前端开发
存储
关键词：
前端页面
前端官网
前端官网页面
怪&amp;
目录
相关文章
yma16
|
14天前
|
前端开发 数据可视化 JavaScript
前端vite+vue3——可视化页面性能耗时指标（fmp、fp）
前端vite+vue3——可视化页面性能耗时指标（fmp、fp）
yma16
38 6
游客avlxf7b6fdona
|
4月前
|
缓存 前端开发 JavaScript
如何优化前端页面性能
前端性能优化是网站开发中非常重要的一部分，它直接关系到用户体验和网站的流量以及排名。本文将介绍一些优化前端页面性能的方法，包括减少HTTP请求、压缩代码、使用CDN等。
游客avlxf7b6fdona
26 0
景天科技苑
|
11天前
|
机器学习/深度学习 前端开发 数据可视化
数据分析web可视化神器---streamlit框架，无需懂前端也能搭建出精美的web网站页面
数据分析web可视化神器---streamlit框架，无需懂前端也能搭建出精美的web网站页面
景天科技苑
20 0
cuicuicuic
|
24天前
|
存储 前端开发 API
对象存储OSS产品常见问题之获取文件结构并在前端页面展示如何解决
对象存储OSS是基于互联网的数据存储服务模式，让用户可以安全、可靠地存储大量非结构化数据，如图片、音频、视频、文档等任意类型文件，并通过简单的基于HTTP/HTTPS协议的RESTful API接口进行访问和管理。本帖梳理了用户在实际使用中可能遇到的各种常见问题，涵盖了基础操作、性能优化、安全设置、费用管理、数据备份与恢复、跨区域同步、API接口调用等多个方面。
cuicuicuic
26 0
遇事问春风乄
|
3月前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
遇事问春风乄
31 1
会敲代码的_TT
|
3月前
|
存储 前端开发 安全
无限连接：前端跨页面通信的实现与应用
在前端开发中，有时我们需要在不同的页面之间进行数据传递和交互。这种场景下，前端跨页面通信就显得尤为重要。前端跨页面通信是指在不同的页面之间传递数据、发送消息以及实现页面间的交互操作。本文将详细介绍前端跨页面通信的属性、应用场景以及实现方法，并提供一些代码示例和引用资料，帮助读者深入了解并应用这一重要的技术。
会敲代码的_TT
62 2
前端技术栈
|
4月前
|
数据采集 前端开发 安全
禁止别人调试自己的前端页面代码
禁止别人调试自己的前端页面代码
前端技术栈
26 1
陌陌谣
|
4月前
|
移动开发 监控 前端开发
HTML5与CSS3教学：美化员工行为监控软件前端页面的代码技巧
在当今信息时代，企业对员工行为的监控成为了一项必不可少的工作。而员工行为监控软件作为一种高效的管理工具，其前端页面的设计和美化显得尤为重要。本文将介绍如何利用HTML5和CSS3技术，优雅地美化员工行为监控软件前端页面的代码技巧。
陌陌谣
219 0
_揽
|
5月前
|
JSON 前端开发 Java
（简易详细）spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
（简易详细）spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
_揽
120 0
瑞崽崽崽
|
5月前
|
前端开发
前端知识笔记（十八）———页面首次滑动不可返回
前端知识笔记（十八）———页面首次滑动不可返回
瑞崽崽崽
20 0

热门文章

最新文章

  • 1
    构建高效响应式Web界面：现代前端框架的比较
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 3
    前端最常见的JS面试题大全
  • 4
    layui：从崛起到蜕变，前端框架的华丽篇章
  • 5
    使用机器学习优化前端用户体验
  • 6
    前端代码整洁与规范之CSS篇
  • 7
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
  • 8
    如何使用浏览器调试前端代码？
  • 9
    常见的前端加密方式有哪些？运用场景有哪些？
  • 10
    uniapp上传图片 前端以及java后端代码实现
  • 1
    前端发展趋势：WebAssembly、PWA 和响应式设计
    31
  • 2
    前端开发新趋势：Web3、区块链和虚拟现实
    42
  • 3
    架构的未来：微前端与微服务的融合
    68
  • 4
    前端模块规划
    14
  • 5
    调试前端时，在浏览器上修改参数并重新调用接口
    45
  • 6
    大屏前端技术要求
    26
  • 7
    优酷OTT互联网大屏前端技术实现
    18
  • 8
    性能工具之前端分析工Chrome Developer Tools性能标签
    36
  • 9
    2024年春招小红书前端实习面试题分享
    80
  • 10
    2024金三银四必看前端面试题！简答版精品！
    97

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 使用阿里云ECS搭建一套网页IDE
  • 1分钟SAE部署Web在线游戏
  • 搭建微信小程序
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）