校园官网练习---web

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>西安工商学院</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <header class="webtop">
        <div class="header-box " >
            <div class="header-logo">
                <a class="xags" href="#">
                    <img src="../imags/logo.png" style="width: 342px; height: 73px;">
                </a>
            </div>
            <div class="header-right " >
                <form method="post" action="#">
                    <input type="text" class="search" title="请输入全文检索关键词" name="sousuo" size="20px" placeholder="&nbsp;请输入">
                    <input type="button"  title="全文检索" class="box" value="检索">
                </form>
            </div>
        </div>
        <div class="header-nav">
            <div class="nav-box">
            <nav class="nav">
                <ul >
                    <li>
                        <a href="https://www.bxait.cn/">首页</a>
                    </li>
                    <li>
                        <a href="#">学校概况</a>
                            <div class="nav1 ">
                                <!-- <div class="photo"> -->
                                    <img src="../imags/nav1.png" style="width: 128px;height: 152px;">
                                <!-- </div> -->
                                 <div class="lists">
                                <ol class="list ">
                                    <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">学校简介</a></li>
                                    <li><a href="https://www.bxait.cn/xygk/xzjy/A480102index_1.htm">校长寄语</a></li>
                                    <li><a href="https://www.bxait.cn/xygk/xyld/A480103index_1.htm">学校领导</a></li>
                                    <li><a href="https://www.bxait.cn/xygk/xyfg/A480104index_1.htm">学校风光</a></li>
                                    <li><a href="https://www.bxait.cn/xygk/xxbs/A480105index_1.htm">学校标识</a></li>
                                </ol>
                            </div>
                        
                        </div>
                    </li>
                    <li>
                        <a href="#">组织机构</a>
                        <div class="nav1 ">
                            <!-- <div class="photo"> -->
                                <img src="../imags/nav1.png" style="width: 128px;height: 152px;">
                            <!-- </div> -->
                             <div class="lists">
                            <ol class="list ">
                                <li>
                                    <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm" class="dqjg">党群机构</a>
                                    <div class="dangqun">
                                        <ul class="dangqun-nav">
                                            <li class="dangqun-list"><a href="https://jiw.bxait.cn/">纪委</a></li>
                                            <li class="dangqun-list"><a href="https://gh.bxait.cn/">工会</a></li>
                                            <li class="dangqun-list"><a href="https://dwgzb.bxait.cn/">党委组织部</a></li>
                                            <li class="dangqun-list"><a href="#">党委宣传部</a></li>
                                            <li class="dangqun-list"><a href="https://dwjsgzb.bxait.cn/">党委教师工作部</a></li>
                                            <li class="dangqun-list"><a href="https://dwxsgzb.bxait.cn/">党委学生工作部</a></li>
                                            <li class="dangqun-list"><a href="https://twgz.bxait.cn/">校团委</a></li>
                                            <li class="dangqun-list"><a href="https://jgdzz.bxait.cn/">机关党组织</a></li>
                                            <li class="dangqun-list"><a href="https://xxgcxy.bxait.cn/dtgz/A4908index_1.htm">信息工程学院党组织</a></li>
                                            <li class="dangqun-list"><a href="https://jjglxy.bxait.cn/dtgz/A5008index_1.htm">经济与管理学院党组织</a></li>
                                            <li class="dangqun-list"><a href="https://ysycmxy.bxait.cn/dqjs/A5105index_1.htm">艺术与传媒学院党组织</a></li>
                                            <li class="dangqun-list"><a href="https://jdgcxy.bxait.cn/dtgz/C8105index_1.htm">机电工程学院党组织</a></li>
                                            <li class="dangqun-list"><a href="https://rwxy.bxait.cn/dtgz/A5207index_1.htm">人文学院党组织</a></li>
                                            <li class="dangqun-list"><a href="https://tsjyxy.bxait.cn/dtgz/A5706index_1.htm">通识教育学院党组织</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">行政部门</a>
                                    <div class="dangqun">
                                        <ul class="dangqun-nav">
                                            <li class="dangqun-list"><a href="https://xzbgs.bxait.cn/">校长办公室</a></li>
                                            <li class="dangqun-list"><a href="https://rsc.bxait.cn/">人事处</a></li>
                                            <li class="dangqun-list"><a href="#">财务处</a></li>
                                            <li class="dangqun-list"><a href="#">教务处</a></li>
                                            <li class="dangqun-list"><a href="#">学生处</a></li>
                                            <li class="dangqun-list"><a href="https://twxxzx.bxait.cn/">图文信息中心</a></li>
                                            <li class="dangqun-list"><a href="#">发展规划处</a></li>
                                            <li class="dangqun-list"><a href="https://jgdzz.bxait.cn/">招标与采购办公室</a></li>
                                            <li class="dangqun-list"><a href="https://hqbwc.bxait.cn/">后勤保卫处</a></li>
                                            <li class="dangqun-list"><a href="#">基建处</a></li>
                                            <li class="dangqun-list"><a href="https://jxzlbzzx.bxait.cn/">教学质量保证中心</a></li>
                        
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">二级学院</a>
                                    <div class="dangqun" >
                                        <ul class="dangqun-nav">
                                            <li class="dangqun-list"><a href="https://xxgcxy.bxait.cn/">信息工程学院</a></li>
                                            <li class="dangqun-list"><a href="https://jjglxy.bxait.cn/">经济与管理学院</a></li>
                                            <li class="dangqun-list"><a href="https://ysycmxy.bxait.cn/">艺术与传媒学院</a></li>
                                            <li class="dangqun-list"><a href="https://rwxy.bxait.cn/">人文学院</a></li>
                                            <li class="dangqun-list"><a href="https://gjjyxy.bxait.cn/">国际教育学院</a></li>
                                            <li class="dangqun-list"><a href="https://jxjyxy.bxait.cn/">继续教育学院</a></li>
                                            <li class="dangqun-list"><a href="https://xczxxy.bxait.cn/">创新创业学院(乡村振兴人才学院)</a></li>
                                            <li class="dangqun-list"><a href="https://mkszyxy.bxait.cn/">马克思主义学院</a></li>
                                            <li class="dangqun-list"><a href="https://tsjyxy.bxait.cn/">通识教育学院</a></li>
                                            <li class="dangqun-list"><a href="https://jdgcxy.bxait.cn/">机电工程学院</a></li>
                                    
                                        </ul>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    
                    </div>
                    </li>
                    <li>
                        <a href="#">教育教学</a>
                        <div class="nav1 ">
                            <!-- <div class="photo"> -->
                                <img src="../imags/nav1.png" style="width: 128px;height: 152px;">
                            <!-- </div> -->
                             <div class="lists">
                            <ol class="list ">
                                <li>
                                    <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">本科教育</a>
                                    <div class="jiaoyu">
                                        <ul class="jiaoyu-nav">
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/bkjy/gjylzy/B870101index_1.htm">国家一流专业</a></li>
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/bkjy/sjylzy/B870102index_1.htm">省级一流专业</a></li>
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/bkjy/bkzyml/B870103index_1.htm">本科专业目录</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">职业教育与继续教育</a>
                                    <div class="jiaoyu">
                                        <ul class="jiaoyu-nav">
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/zyjyyjxjy/gzzkzyml/B870201index_1.htm">高职(专科)专业目录</a></li>
                                            <li class="jiaoyu-list"><a href="https://jxjyxy.bxait.cn/">继续教育</a></li>
                                            <li class="jiaoyu-list"><a href="https://gjjyxy.bxait.cn/">国际教育</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">教研与科研</a>
                                    <div class="jiaoyu">
                                        <ul class="jiaoyu-nav">
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/jyky/cgyl/B870301index_1.htm">成果要览</a></li>
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/jyky/xkjs/B870302index_1.htm">学科竞赛</a></li>
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/jyky/cxcy/B870303index_1.htm">创新创业</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">教学动态</a>
                                    <div class="jiaoyu">
                                        <ul class="jiaoyu-nav">
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/jxdt/jyjxxw/B870401index_1.htm">教育教学新闻</a></li>
                                            <li class="jiaoyu-list"><a href="https://jyjx.bxait.cn/jxdt/tzgg/B870402index_1.htm">通知公告</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    
                    </div>
                    </li>
                    <li>
                        <a href="#">国际教育</a>
                        <div class="nav1 ">
                            <!-- <div class="photo"> -->
                                <img src="../imags/nav1.png" style="width: 128px;height: 152px;">
                            <!-- </div> -->
                             <div class="lists">
                            <ol class="list ">
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">国际教育学院</a></li>
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">本(专)硕直通</a></li>
                               
                            </ol>
                        </div>
                    
                    </div>
                    </li>
                    <li>
                        <a href="#">学生服务</a>
                        <div class="nav1 ">
                            <!-- <div class="photo"> -->
                                <img src="../imags/nav1.png" style="width: 128px;height: 152px;">
                            <!-- </div> -->
                             <div class="lists">
                            <ol class="list ">
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">学工动态</a></li>
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">学生会</a></li>
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">学生资助</a></li>
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">心理健康</a></li>
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">资料下载</a></li>
                            </ol>
                        </div>
                    
                    </div>
                    </li>
                    <li>
                        <a href="#">招生就业</a>
                        <div class="nav1 ">
                            <!-- <div class="photo"> -->
                                <img src="../imags/nav1.png" style="width: 128px;height: 152px;">
                            <!-- </div> -->
                             <div class="lists">
                            <ol class="list ">
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">招生网</a></li>
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">就业网</a></li>
                            </ol>
                        </div>
                    
                    </div>
                    </li>
                    <li>
                        <a href="#">人才招聘</a>
                        <div class="nav1 ">
                            <!-- <div class="photo"> -->
                                <img src="../imags/nav1.png" style="width: 128px;height: 152px;">
                            <!-- </div> -->
                             <div class="lists">
                            <ol class="list">
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">招聘公告</a></li>
                                <li><a href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm">联系我们</a></li>
        
                            </ol>
                        </div>
                    
                    </div>
                    </li>
                    <li>
                        <a href="https://xyh.bxait.cn/">校友会</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    </header>
    <!-- 头部结束 -->
    <div class="banner">
        <div class="banner-top">
            <div class="banner-photo">
                <a href="https://www.bxait.cn/lbt/webinfo/2024/03/1712606718547156.htm">
                    <img style="cursor:hand" borde="0"  src="../imags/1.jpg" title="图1" width="1693" height="952">
                </a>
            </div>
            <div class="banner-photo">

            </div>
            <div class="banner-photo">
                
            </div>
        </div>
    </div>
    <div class="container">
        <!-- 新闻动态 -->
         <div class="xinwen">
            <div class="wrap">
                <div class="title">
                    <div class="title-xinwen">
                        <img src="../imags/xinwenimg.png" style="width: 193px;height: 50px;">
                    </div>
                    <div class="subtitle" style="color: #fff;">忆往昔,桃李不言,自有风雨话沧桑;看今朝,鹿鸣于野,更续诗篇誉三秦!</div>
                </div>
                <div class="xinwen-box">
                    <div news-left>
                        <div class="left-box">
                            <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893779508451.htm" target="_self"></a>
                            <div class="tzym">
                                <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893779508451.htm" target="_self"></a>
                                <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893779508451.htm">
                                    <img style="cursor: hand;" src="../imags/laodong.png" title="【劳动实践】“育”见劳动之美 悦享劳动之实|鹿鸣餐厅·温情饺子" width="370px" height="470px">
                                </a>
                            </div>
                            <div class="text-news">
                                <div class="text">机电工程学院劳动实践教育的同学们,在鸣餐厅开展了一场别开生面的包饺子活动——“温情饺子宴”</div>
                                <div class="info-arrow">
                                    <img src="../imags/news-arrow.png">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div news-right>
                        <div class="blog_list ">
                            <ul>
                                <li>
                                    <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893779233356.htm" target="_blank">
                                        <span class="blog_more">
                                            <b>【教师培训】强化师德师风建设,提升教师队...</b>
                                            <span>西安工商学院教务处积极响应学校教职工作部的的号召,全面启动师德师风集中学习活动,刘处长对《西安工商学院教师师德失范行为负面清单及处理方法(试行)》以及《西安工商学院教师师德师风考核办法(修订)》等规章制度进行了深入解读。</span>
                                        </span>
                                        <span class="blog_time">
                                            <b>04</b>
                                            <em>2024-11</em>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893778889640.htm" target="_blank">
                                        <span class="blog_more">
                                            <b>【社会公益】西安工商学院信息工程学院团委...</b>
                                            <span>西安工商学院信息工程学院团委的优秀学生干部们积极响应国家关于节约粮食的号召,携手鹿祥社区共同举办了以“青春守护中国粮”为主题的公益护粮活动。</span>
                                        </span>
                                        <span class="blog_time">
                                            <b>04</b>
                                            <em>2024-11</em>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="blog_lists ">
                            <ul>
                                <li>
                                    <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893685677253.htm"target="_blank">
                                        <span class="blog_Rtime">
                                            <b>03</b>
                                            <em>2024-11</em>
                                        </span>
                                        <span class="blog_Rmore">
                                            <b>【教师座谈会】碰撞教育智慧,共促质量提升...</b>
                                            <span></span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893684149605.htm"target="_blank">
                                        <span class="blog_Rtime">
                                            <b>03</b>
                                            <em>2024-11</em>
                                        </span>
                                        <span class="blog_Rmore">
                                            <b>【安全培训】我校召开本学期实验室安全培训...</b>
                                            <span></span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.bxait.cn/xwdt/webinfo/2024/11/1731893683555084.htm"target="_blank">
                                        <span class="blog_Rtime">
                                            <b>03</b>
                                            <em>2024-11</em>
                                        </span>
                                        <span class="blog_Rmore">
                                            <b>【教师座谈会】人文学院顺利举办教师座谈会...</b>
                                            <span></span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ckgd">
                    <a href="https://www.bxait.cn/xwdt/A4811index_1.htm" target="_blank">查看更多</a>
                </div>
            </div>
         </div>
         <!-- 通知公告 -->
         <div class="tongzhi"></div>
         <!-- 专题栏目 -->
         <div class="zhuanti"></div>
         <!-- 魅力校园 -->
         <div class="xiaoyuan"></div>
         <!-- 学校概括 -->
         <div class="gaikuo">
            <div class="jianjie">
                <div class="title-jianjie">
                    <div class="title-h3">
                        <img src="../imags/jianjie.png" style="width: 193px;height: 50px; border: 0;">
                    </div>
                    <div class="subtitle-jianjie">忆往昔,桃李不言,自有风雨话沧桑;看今朝,鹿鸣于野,更续诗篇誉三秦!</div>
                </div>
                <div class="intro-box">
                    <div class="intro-left">
                        <div class="intro-info">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;西安工商学院(原西安工业大学北方信息工程学院)是经教育部批准设立具有学士学位授予权的本科层次民办普通高等学校。<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学校位于八水绕长安的渭水之滨西安市高陵区,学校周边商贸发达,交通便利,乘车四十余分钟即可到达西安市中心、咸阳国际机场和西安北站,即将建成开通的地铁十号线直达校区。学校坚持“高端化、全球化、个性化”发展战略,形成“躬行致曲、和而不同”校训,践行“以学生为中心、以文化育人、注重综合实践、突出创新创意”办学理念,经过十八年的建设与发展,取得了良好的办学成效。软件工程专业获批“双万计划”国家级一流本科专业建设点,机械设计制造及其自动化、财务管理、汉语言文学专业获批省级一流专业建设点。校园配套设施完善,教育教学成果丰硕,拥有一支业务精湛、经验丰富的师资队。
                        </div>
                        <div class="intro-btn">
                            <a  href="https://www.bxait.cn/xygk/xxjj/A480101index_1.htm" class="hoverBtn">
                                了解更多
                            </a>
                        </div>
                    </div>
                    <div class="intro-right">
                        <div class="r-left">
                            <div class="r-img">
                                <img src="../imags/gaikuo.png" style="border: 0;">
                            </div>
                            <em id="su02" class="play su02 spank" onclick="showsu02()"></em>
                            <div class="r-text">
                                <h5>学校风光</h5>
                            </div>
                        </div>
                        <a href="https://www.bxait.cn/xygk/xzjy/A480102index_1.htm">
                            <div class="r-right">
                                <div class="r-top">
                                    <div class="r-line">
                                        <img src="../imags/line.png" style="border: 0;">
                                    </div>
                                    <div class="r-h5">校长寄语</div>
                                    <div class="r-p">
                                        你们正值青春芳华,<br>
                                        你们憧憬着美好未来,<br>
                                        你们期盼着走进理想的大学...
                                    </div>
                                </div>
                                <div class="r-btm">
                                    <img  src="../imags/xzjj.png">
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
         </div>
         <!-- 各大学院 -->
         <div class="xueyuan"></div>
         <!-- 导肮 -->
         <div class="daohang"></div>

    </div>
    <footer>
        <div class="syfooter">
            <div class="logoleft">
                <img src="../imags/logo2.png" style="width: 342; height: 73px;">
            </div>
            <div class="yqlj">
                <h2>友情链接</h2>
                <div>
                    <a href="http://www.moe.gov.cn/" target="_blank">中华人民共和国教育部</a>
                </div>
                <div>
                    <a href="http://jyt.shaanxi.gov.cn/" target="_blank">陕西省教育厅</a>
                </div>
                <div>
                    <a href="http://www.xinhuanet.com/" target="_blank">新华网</a>
                </div>
                <div>
                    <a href="/szpt" target="_blank">数字化实习实训平台</a>
                </div>
            </div>
            <div class="right">
                <h2>地址</h2>
                <div>陕西省西安市高陵区鹿祥路1235号</div>
                <h2>电话</h2>
                <div>029-63609668</div>
                <h2>邮编</h2>
                <div>710200</div>
            </div>
        </div>
        <div class="footer-box">
            <div class="footer-wrap">
                <p class="footer-text">
                    <a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2024023100号</a>
                    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=61012602000071" target="_blank">陕公网安备61012602000071号</a>
                    <br class="mb">
                </p>
            </div>
        </div>
    </footer>
    
</body>
</html>

 CSS:

    * {
    font-family: "Microsoft YaHei", PingFang SC, "Heiti SC", PingFang-SC-Medium, Helvetica Neue, Arial, sans-serif;
    }
    body{
        display: block;
    }
    /* 头部stare */
    .webtop{
        background: #fff;
        width: 1693px;
        height: 73px;
        transition: all .5s;
        margin: 0 auto;
    }
    .header-box{
        background: #fff;
        width: 1250px;
        height: 73px;
        margin:  auto;
        transition: all .5s;
        position: relative;
        
    }
    .header-logo {
        width: 342px;
        height: 73px;
    }
    .header-right{
        background: #fff;
        width: 199.48px;
        height: 22px;
        font-size: 14px;
        margin-bottom: 0px;
        position: absolute;
        right: 0;
        top:23.5px
        
        
    }
    /* .header-right>form{
        width: 199px;
        height: 22px;
    } */
    .search{
        width: 163.33px;
        height: 22px;
        border: 1px solid #a7232d;
        
    }
    
    .box{
        width: 32px;
        height: 22px;
        border: 1px solid #b72834fe;
        color: #fff;
        font-size: 14px;
        float: inline-end;
        box-shadow: 0px 2px 6px #f45764;
        background-color: #b72834fe;
    }
    .header-nav {
        width: 100%;
        height: 70px;
        float: left;
    }
    .header-nav.nav-box{
        width: 1250px;
        height: 70px;
        margin: auto;
    }
    .nav>ul{
        width: 1250px;
        /* border: 1px solid #A7232D; */
        margin: auto;
        height: 70px;
        
    }
        
        .nav{
            height: 70px;
            background-color: #A7232D;
        }
        
        .nav>ul>li{
            width: 114px;
            float: left;
            height: 70px;
            text-align: center;
            cursor: pointer;
            line-height: 70px;
            padding: 0 15px;
            border-radius: 8px;
        }
        .nav>ul>li:first-child{
            width: 82px;
        }
        .nav>ul>li:last-child{
            width: 98px;
        }
        
        .nav a{
            text-decoration: none;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            transition: all 0.2s;
            display: block;
            
        }

        .nav > ul > li>a:hover{
            transform: scale(0.9);
            background-color: #fff; 
            border-radius: 3px;
            color: #A7232D;
        }
        .nav1{
            position: absolute;
            top: 145px;
            margin: auto;
            display: none;
            z-index: 200;
            padding: 12px;
            background: #fff;
            color: #222;
            min-width: 20rem;
            height: 11rem;
            box-shadow: darkgrey 0px 0px 5px 0px;
        } 
        .lists{
            width: 153.6px;
            height: 145px;
            display: flex;
            background-color: #fff;
            margin-left: 160px;
            margin-top: -149px;
        }
        
        .lists>ol>li>a{
            width: 153px;
            height: 30px;
            text-align: left;
            color: #000;
            cursor: pointer;
            line-height: 30px;
            font-size: 14px;
            position: relative;
            
        }
        
        
        nav.nav ol > li>a:hover  {
            color: #A7232D;
            
        }
        nav.nav  > ul > li:hover .nav1  {
            display: block;
        }
        nav.nav  ol>li{
            width: 153px;
            height: 30px;
            background-color: #fff;
            color: #A7232D;
            list-style-type: disc;
            line-height: 30px;
            margin-left: 18px;
        }
        .dangqun{
            width: 216px;
            height: 454px;
            display: none;
            position: absolute;
            background-color: #fff;
            box-shadow: darkgrey 5px 5px 5px -5px;
            left: 320px;  
            top: 0px;
        }
        .dangqun-nav{
            width: 168px;
            height: 406px;
            margin-top: 16px;
            margin-left: 15px;
        }
        .dangqun>ul li a{
            color: #000;
            font-size: 14px;
            text-align: left;
            line-height: 29px;
        }
        nav .nav .nav1 ul li a{
            list-style-type: none;
        }
        nav.nav .nav1 ol>li:hover .dangqun{
            display: block;
        }
        .dangqun>ul>li>a:hover{
            color: #A7232D;
        }
        .jiaoyu{
            width: 216px;
            height: 135px;
            display: none;
            position: absolute;
            background-color: #fff;
            box-shadow: darkgrey 5px 5px 5px -5px;
            left: 338px;  
            top: 0px;
        }
        .jiaoyu-nav{
            width: 168px;
            height: 87px;
            margin-top: 22px;
            margin-left: 40px;
        }
        .jiaoyu>ul li a{
            color: #000;
            font-size: 14px;
            text-align: left;
            line-height: 29px;
        }
       
        nav.nav .nav1 ol>li:hover .jiaoyu{
            display: block;
        }
        .jiaoyu>ul>li>a:hover{
            color: #A7232D;
        }
        /* 头部end */
        /* 版心stare */
        .banner{
            width: 1693px;
            height: auto;
            margin: 0 auto;
            margin-top: 70px;
            background-color: #F5F5F5;
            
        }
		.banneer-top{
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        .banner-photo>a>img{
            border: 0;
            width: 1693px;
            height: 952px;
            margin: 0 auto;
        }
        .container{
            width: 1693px;
            background-color: #F5F5F5;
            margin: 0 auto;
            display: block;
            
        }
        .xinwen{
            height: 819px;
            background: url(../imags/newsbgd.png) center center no-repeat;
            background-size: cover;
            position: relative;
            
        }
        .wrap{
            width: 1260px;
            margin: 0 auto;
        }
        .title{
            padding: 60px 0 40px;
            text-align: center;
            margin: auto;
        }
        .title-xinwen{
            position: absolute;
            left: 740px;
            top: 60px;
        }
        .subtitle{
            font-size: 14px;
            margin-top: 63px;
        }
        .xinwen-box{
            display: flex;
        }
        .left-box{
            width: 368px;
            height: 470px;
            position: relative;
            overflow: hidden;
        }
        .tzym{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .left-box a{
            text-decoration: none;
            color: #686868;
        }
        .tzym img{
            width: auto;
            height: 100%;
        }
        .text-news{
            width: 298px;
            height: 74px;
            background-color: #fff;
            opacity: .82;
            padding: 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            left: 13px;
            bottom: 13px;
            position: absolute;
        }
        .text{
            font-size: 16px;
            font-weight: 500;
            color: #222;
            line-height: 25px;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            width: 238px;
        }
        .info-arrow img{
            filter:grayscale(100%);
            opacity: 0.6;
        }
        .left-box:hover .text-news{
            background-color: #cf4342;
        }
        .left-box:hover .text{
            color:#fff;
        }
        .left-box:hover .info-arrow{  
            width: 30px;
            text-indent: -25px;  
            overflow: hidden;
        }
        .left-box:hover .info-arrow img{ 
            filter: drop-shadow(0px 0px #fff); 
        }
        .news-right{
            display: inline-block;
            position: relative;
        }
        .blog_list{
            width: 49.4%;
            float: left;
            margin-left: 20px;
        }
        .blog_list li{
            display: block;
            position: relative;
            height: 231px;
            background-color: #fff;
            margin-bottom: 8px;
            overflow: hidden;
            transition: all .3s;
        }
        .blog_list li:hover{
            box-shadow:0 6px 11px 0 rgba(0,0,0,.05);
            transform:scale(1.005);
            background:#cf4342;
        }
        .blog_list li:hover .blog_more {
            border-bottom: 1px solid #fff;
        }
        .blog_list li a{
            display: block;
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
            color: #666;
            text-decoration: none;
        }
        .blog_more{
            margin-top: 30px;
            overflow: hidden;
            display: block;
            border-bottom: 1px solid #eee;
        }
        .blog_more b{
            color: #222;
            display: block;
            height: auto;
            line-height: 22px;
            overflow: hidden;
            font-size: 16px;
            font-weight: 600;
        }
        .blog_list li :hover .blog_more b {
            color: #fff;
            transform:scale(1.005);
            
        }
        .blog_list li :hover .blog_more span {
            color: #fff;
            transform:scale(1.005);
            
        }



        .blog_more span{
            line-height: 20px;
            height: 40px;
            margin-top: 10px;
            margin-bottom: 26px;
            font-size: 14px;
            color: #666;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .blog_time{
            height: 66px;
            overflow: hidden;
            margin-top: 19px;
            text-align: left;
            background: url(../imags/i_bg5.png) 96% center no-repeat;
            display: block;
            transition: all .3s;
            
        }
        .blog_list li:hover .blog_time{
            background:url(../imags/i_bg5_hover.png) 99% center no-repeat;
        }
        .blog_time b{
            display: block;
            color: #cf4342;
            font-size: 28px;
            height: 37px;
            line-height: 37px;
            font-weight: 400;
            letter-spacing: 1px;
        }
        .blog_time em{
            font-style: normal;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            color: #cf4342;
        }
        .blog_list li:hover .blog_time b{
            color: #fff;
            transform:scale(1.005);
        }
        .blog_list li:hover .blog_time em{
            color: #fff;
            transform:scale(1.005);
        }
        .blog_lists{
            width: 49.4%;
            float: right;
            display: flexbox;
            margin-top: 0px;
            margin-right: -20px;
        }
        .blog_lists li{
            display: block;
            position: relative;
            height: 151px;
            background-color: #fff;
            margin-bottom: 8px;
            overflow: hidden;
            transition: all .3s;
        }
        .blog_lists li a{
            display: block;
            width: 90%;
            max-width: 368px;
            margin: 0 auto;
            overflow: hidden;
            color: #666;
            padding-top: 20px;
        }
        .blog_lists .blog_Rtime{
            height: 95px;
            width: 66px;
            float: left;
            overflow: hidden;
            margin-top: 18px;
            text-align: left;
        }
        .blog_Rtime b{
            display: block;
            color: #cf4342;
            font-size: 28px;
            height: 50px;
            line-height: 50px;
            font-weight: 400;
            letter-spacing: 2px;
            background: url(../imags/i_bg6.png) left bottom no-repeat;
        }
        .blog_lists li:hover .blog_Rtime b{
            background: url(../imags/i_bg6_hover.png) left bottom no-repeat;
        }
        .blog_Rtime em{
            font-style: normal;
            height: 42px;
            line-height: 42px;
            font-size: 15px;
            color: #cf4342;
        }
        .blog_lists .blog_Rmore {
            float: right;
            height: 114px;
            border-left: 1px solid #f5f5f5;
            padding-left: 30px;
            width: 234px;
            padding-top: 14px;
            overflow: hidden;
        }
        .blog_Rmore b {
            color: #222;
            line-height: 22px;
            font-size: 16px;
            font-weight: 600;
            max-width: 225px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .blog_Rmore span {
            display: block;
            line-height: 38px;
            height: 38px;
            overflow: hidden;
            margin-top: 15px;
            background: url(../imags/i_bg5.png) left center no-repeat;
            transition: all .3s;
        }
        .blog_lists li:hover {
            box-shadow:0 6px 11px 0 rgba(0,0,0,.05);
            transform:scale(1.005);
            background:#cf4342;
        }
        .blog_lists li:hover .blog_Rtime b{
            color: #fff;
            transform:scale(1.005);
        }
        .blog_lists li:hover .blog_Rtime em{
            color: #fff;
            transform:scale(1.005);
        }
        .blog_lists li:hover .blog_Rmore b{
            color: #fff;
            transform:scale(1.005);
        }
        
        .blog_lists li:hover .blog_Rmore span{
            background: url(../imags/i_bg5_hover.png) 8% center no-repeat;
        }
        .ckgd{
            text-align: center;
        }
        .ckgd a{
            display: block;
            width: 160px;
            height: 50px;
            text-align: center;
            overflow: hidden;
            font-size: 16px;
            display: inline-block;
            line-height: 50px;
            background-color: #cf4342;
            margin-top: 54px;
            color: #fff;
            transition: .2s;
        }
        .ckgd:hover a{
            font-weight: 500;
            transform:scale(1.005);
            font-weight: 400;
            box-shadow:0.5px 0.5px 1.5px #eee ;
        }


		/* .tongzhi{
            height: 761px;
            background: url(../imags/tongzhibg.png) center center no-repeat;
            background-size: cover;
        }
        .zhuanti{
            height: 761px;
            background: url(../imags/ztbj.png) center center no-repeat;
            background-size: cover;
        }
        .xiaoyuan{
            height: 1180px;
            background: url(../imags/xiaoyuan.png) center center no-repeat;
            
        } */
        .gaikuo{
            position: relative;
            height: 790px;
            background-color: #fff;
            position: relative;
        }
        .jianjie{
            width: 1250px;
            margin: 0 auto;
        }
        .title-jianjie {
            padding: 60px 0 40px;
            text-align: center;
        }
        .title-h3{
            position: absolute;
            left: 740px;
            top: 60px;
        }
        .subtitle-jianjie {
            font-size: 14px;
            color: #666;
            margin-top: 60px;
        }
        .intro-box {
            display: flex;
            justify-content: space-between;
        }
        .intro-left {
            width: 463px;
            margin-right: 30px;
            height: 512px;
        }
        .intro-right {
            display: flex;
        }
        .intro-info {
            font-size: 16px;
            color: #222;
            line-height: 32px;
        }
        .intro-btn {
            margin-top: 30px;
            position: relative;
            margin-left: 130px;
        }
        .intro-btn a {
            width: 160px;
            height: 34px;
            background: #cf4342;
            border-radius: 17px;
            font-size: 15px;
            color: #fff;
            line-height: 34px;
            text-align: center;
            display: inline-block;
            font-weight: 400;
        }
        .hoverBtn {
            transition: all .2s ease-in-out;
            position: relative;
            overflow: hidden;
        }
        .intro-btn :hover{
            transform:scale(0.95);
            font-size: 15px;
            font-weight: 400;
        }
        .r-left {
            width: 360px;
            height: 512px;
            position: relative;
            margin-right: 15px;
        }
        .r-img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .r-left .play{
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            margin: -37px 0px 0px -37px;
            width: 75px;
            height: 75px;
            background: url(../imags/playbtn.png) center center no-repeat;
            background-size: contain;
            cursor: pointer;
        }
        .r-text {
            position: absolute;
            left: 0;
            bottom: 30px;
            color: #fff;
            padding: 0 30px;
        }
        .r-text h5 {
            font-size: 26px;
            line-height: 37px;
        }
        .intro-right>a{
            display: block;
            background-color: #686868;
        }
        .r-right{
            display: flex;
            flex-direction: column;
        }
        .r-top {
            width: 272px;
            height: 214px;
            background: #fafafa;
            padding: 30px 30px 12px;
        }
        .r-line {
            margin-top: 23px;
            margin-bottom: 12px;
        }
        .r-h5{
            font-size: 30px;
            color: #222;
            line-height: 42px;
            margin-bottom: 10px;
        }
        .r-btm {
            position: relative;
            width: 332px;
            height: 256px;
        }
        .r-p{
            font-size: 16px;
            color: #444;
            line-height: 28px;
        }
        .r-btm{
            position: relative;
            width: 332px;
            height: 256px;
        }
        /* .xueyuan{
            height: 937px;
            background: url(../imags/xueyuanbg.png) center center no-repeat;
            background-size: cover;
            
        }
        .daohang{
            height: 765px;
            background: url(../imags/dh_bg.png) ;
            background-size: cover;
        } */

        .syfooter {
            width: 100%;
            height: 280px;
            overflow: hidden;
            background: #E7E7E9;
            position: relative;
        }
        .syfooter div {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
            margin: 10px 0;
        }
        .syfooter .logoleft {
            display: inline-block;
            width: 50%;
            position: absolute;
            top: 30%;
        }
        .syfooter .yqlj {
            display: inline-block;
            position: absolute;
            width: 20%;
            top: 15%;
            right: 30%;
        }
        .syfooter .right {
            display: inline-block;
            position: absolute;
            width: 20%;
            right: 15%;
            top: 15%;
        }
        .syfooter .logoleft img {
            width: auto;
            position: absolute;
            right: 10%;
        }
        .syfooter h2 {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
            line-height: 25px;
            margin-bottom: 10px;
        }
        .syfooter div a {
            color: #666666;
        }
        .syfooter h2 {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
            line-height: 25px;
            margin-bottom: 10px;
        }
        .footer-box {
            width: 100%;
            height: auto;
            background: #323232;
            text-align: center;
            padding: 20px 0;
        }
        .footer-wrap{
            width: 1250px;
            margin: 0 auto;
        }
        .footer-box p {
            color: #fff;
            font-size: 16px;
            margin: 16px 0;
        }
        .footer-box p a {
            color: #fff;
            font-size: 16px;
        }
        .syfg a {
            margin: 0 15px;
        }
        .mb {
            display: none;
        }
        

页面实现:

1.整体页面:

P1

P2

P3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912702.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构实战】从零开始打造你的专属链表

&#x1f3dd;️专栏&#xff1a;【数据结构实战篇】 &#x1f305;主页&#xff1a;f狐o狸x 目录 一、链表的概念及结构 二、链表的分类 2.1 单向的或双向的 2.2 带头的或不带头的 2.3 循环或非循环 三、链表的实现 3.1 打印和动态申请一个结点 3.2 尾插一个数 3.3 头插一个…

Axure PR 9 多级下拉选择器 设计交互

​ 大家好&#xff0c;我是大明同学。 Axure选择器是一种在交互设计中常用的组件&#xff0c;这期内容&#xff0c;我们来探讨Axure中多级下拉选择器设计与交互技巧。 下拉列表选择输入框元件 创建选择输入框所需的元件 1.在元件库中拖出一个矩形元件。 2.选中矩形元件&…

HiveSQL 中判断字段是否包含某个值的方法

HiveSQL 中判断字段是否包含某个值的方法 在 HiveSQL 中&#xff0c;有时我们需要判断一个字段是否包含某个特定的值。下面将介绍几种常用的方法来实现这个功能。 一、创建示例表并插入数据 首先&#xff0c;我们创建一个名为employee的表&#xff0c;并插入一些示例数据&am…

【日常问题排查小技巧-连载】

线上服务CPU飙高排查 先执行 top&#xff0c;找到CPU占用比较高的进程 id&#xff0c;&#xff08;比如 21448&#xff09; jstack 进程 id > show.txt&#xff08;jstack 21448 > show.txt&#xff09; 找到进程中CPU占用比较高的线程&#xff0c;线程 id 转换为 16 进…

jmeter常用配置元件介绍总结之jsr223执行python脚本

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之jsr223执行python脚本 1.安装jsr223执行python插件2.基础语法介绍2.1.log2.2.parameters向脚本传参与接参2.3.vars2.4.props2.5.prev 3.常用脚本3.1.MD5加密单个参数&#xff1a;3.2.MD5加密多个参数&#xff1a;3.3.URLe…

【数据结构】插入排序——直接插入排序 和 希尔排序

直接插入排序 和 希尔排序 一、直接插入排序二、直接插入排序的弊端三、希尔排序&#xff08;1&#xff09;对插入排序的联想&#xff08;2&#xff09;希尔排序的思路 四、直接插入排序和希尔排序效率对比1>随机生成10000个数2>我们随机生成100000个数3>我们随机生成…

基于Tkinter的深度学习图像处理界面开发(二)

现在很多搞算法的人&#xff0c;跑跑代码&#xff0c;比如训练和测试代码搞得飞溜&#xff0c;但想把算法代码打包成一个软件&#xff0c;比如给它包装一个界面&#xff0c;就不会了&#xff0c;有些人会推荐用qt做界面&#xff0c;但qt的上手难度还是比较高&#xff0c;如果我…

【设计模式】结构型模式(四):组合模式、享元模式

《设计模式之结构型模式》系列&#xff0c;共包含以下文章&#xff1a; 结构型模式&#xff08;一&#xff09;&#xff1a;适配器模式、装饰器模式结构型模式&#xff08;二&#xff09;&#xff1a;代理模式结构型模式&#xff08;三&#xff09;&#xff1a;桥接模式、外观…

Scala 中 set 的实战应用 :图书管理系统

1. 创建书籍集合 首先&#xff0c;我们创建一个可变的书籍集合&#xff0c;用于存储图书馆中的书籍信息。在Scala中&#xff0c;mutable.Set可以用来创建一个可变的集合。 val books mutable.Set("朝花惜拾", "活着") 2. 添加书籍 我们可以使用操作符…

Flink安装和Flink CDC实现数据同步

一&#xff0c;Flink 和Flink CDC 1&#xff0c; Flink Apache Flink是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算。 中文文档 Apache Flink Documentation | Apache Flink 官方文档 &#xff1a;https://flink.apache.org Flink 中文社区…

有什么初学算法的书籍推荐?

对于初学算法的读者&#xff0c;以下是一些值得推荐的书籍&#xff1a; 1、算法超简单&#xff1a;趣味游戏带你轻松入门与实践 作者&#xff1a;童晶 著 推荐理由&#xff1a;本书把趣味游戏应用于算法教学&#xff0c;提升读者的学习兴趣&#xff0c;并通过可视化的图解和动…

【数据结构】堆和二叉树(2)

文章目录 前言一、建堆和堆排序1.堆排序 二、二叉树链式结构的实现1.二叉树的遍历 三、链式二叉树的功能函数1.二叉树结点个数2.二叉树叶子结点个数3.二叉树的高度4.二叉树第k层结点个数5. 二叉树查找值为x的结点6.二叉树销毁 总结 前言 接着上一篇博客&#xff0c;我们继续分…

Ubuntu24.04网络异常与应对方案记录

PS: 参加过408改卷的ZJU ghsongzju.edu.cn 开启嘲讽: 你们知道408有多简单吗&#xff0c;操作系统真实水平自己知道就行&#xff5e;&#xff5e; Requested credits of master in UWSC30&#xff0c;in ZJU24&#xff0c;domestic master is too simple dmesg dmesg 是一个用…

就是这个样的粗爆,手搓一个计算器:弧长计算器

作为程序员&#xff0c;没有合适的工具&#xff0c;就得手搓一个&#xff0c;PC端&#xff0c;移动端均可适用。废话不多说&#xff0c;直接上代码。 HTML: <div class"calculator"><label for"radius">圆的半径 (r)&#xff1a;</label&…

ServletContext介绍

文章目录 1、ServletContext对象介绍1_方法介绍2_用例分析 2、ServletContainerInitializer1_整体结构2_工作原理3_使用案例 3、Spring案例源码分析1_注册DispatcherServlet2_注册配置类3_SpringServletContainerInitializer 4_总结 ServletContext 表示上下文对象&#xff0c;…

【论文复现】MSA+抑郁症模型总结(三)

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀MSA抑郁症模型 热门研究领域&#xff1a;情感计算的横向发展1. 概述2. 论文地址3. 研究背景4. 主要贡献5. 模型结构和代码6. 数据集介绍7. 性…

使用 Umami 部署博客分析工具

Umami 简介 Umami 是一款开源且注重隐私的网站分析工具&#xff0c;可替代 Google Analytics。它提供网站流量和用户行为等见解&#xff0c;但不使用 Cookie 或收集个人数据&#xff0c;符合隐私法规。Umami 轻巧易用&#xff0c;可自行托管。 如果你有自己的博客&#xff0c;…

JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习

先简单记录下简单使用跟测试&#xff0c;后续再补充具体&#xff0c;最近有用到&#xff0c;简单来说就是后端(服务端)编写个发射器&#xff0c;实现一次请求&#xff0c;一直向前端客户端发射数据&#xff0c;直到发射器执行完毕&#xff0c;模拟ai一句一句回复的效果 Respon…

在IntelliJ IDEA中创建带子模块的SpringBoot工程

前言 在项目开发中&#xff0c;一个工程往往有若干子工程或模块&#xff0c;所以主工程一般是一个容器&#xff0c;本文介绍在IntelliJ IDEA中创建带多模块的SpringBoot工程的详细步骤。 1、首先打开IntellJ IDEA&#xff08;以下简称IDEA&#xff09;,创建一个新项目。假定新…

【LeetCode】每日一题 2024_11_9 设计相邻元素求和服务(构造,哈希)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;设计相邻元素求和服务 近几天不知道力扣发什么疯&#xff0c;每日一题出的太抽象了&#xff0c;我题解是写不了一点了 . . . 今天稍微正常了些&#xff0c;就又来更新了~ 代码与解题思路…