【大前端】华农官网页面-阿里云开发者社区

一、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>

二、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”：编辑