校园官网练习---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=" 请输入"><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"> 西安工商学院(原西安工业大学北方信息工程学院)是经教育部批准设立具有学士学位授予权的本科层次民办普通高等学校。<br> 学校位于八水绕长安的渭水之滨西安市高陵区，学校周边商贸发达，交通便利，乘车四十余分钟即可到达西安市中心、咸阳国际机场和西安北站，即将建成开通的地铁十号线直达校区。学校坚持“高端化、全球化、个性化”发展战略，形成“躬行致曲、和而不同”校训，践行“以学生为中心、以文化育人、注重综合实践、突出创新创意”办学理念，经过十八年的建设与发展，取得了良好的办学成效。软件工程专业获批“双万计划”国家级一流本科专业建设点，机械设计制造及其自动化、财务管理、汉语言文学专业获批省级一流专业建设点。校园配套设施完善，教育教学成果丰硕，拥有一支业务精湛、经验丰富的师资队。</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
相关文章：
校园官网练习---web
HTML： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>西安工商学院</title><…...
MySQL中指定字段的某个值排在前面
一 需求 如果我们想讲表中指定的字段的某一个值排序在最前面应该如何处理？ 二 实现方式 方法 1、使用<>，xml中使用<![CDATA[跳过解析的特殊符号]]>或者<（小于符号）>（大于符号） ORDER …...
【51单片机】I2C总线详解 + AT24C02
学习使用的开发板：STC89C52RC/LE52RC 编程软件：Keil5 烧录软件：stc-isp 开发板实图： 文章目录 AT24C02介绍存储器 I2C总线介绍I2C时序结构数据帧AT24C02数据帧 编程实例 —— 按键控制数据大小&存储器写入读出 AT24C02介绍 …...
直接插入排序法
任务描述 本关任务：要求编写程序实现直接插入排序的功能。 相关知识 直接插入排序，是指将无序序列中的各元素依次插入到已经有序的数组中。 假设数组中前 i-1 元素已经有序，现在要将线性表中第 i 个元素插入到前面的有序子表中，…...
mysql中InnoDB索引与MyISAM索引
mysql索引 InnoDB 索引存储 主键索引（聚簇索引） 定义：主键索引是 InnoDB 存储引擎的聚簇索引，它决定了表中数据的物理存储顺序。每个 InnoDB 表都有一个且仅有一个聚簇索引。存储：主键索引的叶子节点直接包含表的数…...
Redis如何保证数据不丢失（可靠性）
本文主要以学习为主，详细参考：微信公众平台 Redis 保证数据不丢失的主要手段有两个： 持久化 多机部署 我们分别来看它们两的具体实现细节。 1.Redis 持久化 持久化是指将数据从内存中存储到持久化存储介质中（如硬盘…...
【计网】物理层学习笔记
【计网】物理层 物理层概述 物理层要实现的功能 在各种传输媒体上传输比特0和1，进而为上面的数据链路层提供透明传输比特流的作用。 物理层接口特性 物理层之下的传输媒体 传输媒体是计网设备之间的物理通路，也称为传输介质。 传输媒体并不包含在…...
vue链接跳转
在 Vue 3 的组合式 API 中，你可以使用 ref 和 setup 函数来实现外部链接跳转功能。 方法 1：使用 click 和 window.open（新标签页跳转） 这种方式在点击时会打开一个新标签页并跳转到外部链接。 <menu-item value"item2&…...
IP地址是电脑自带的吗？是根据什么而决定的
IP地址并非电脑自带，而是由网络运营商或网络服务提供商通过特定的协议和机制进行分配和管理的。要深入理解IP地址的来源和决定因素，我们需要从IP地址的基本概念、分配方式以及影响分配的因素等多个方面进行探讨。 IP地址，即互联网协议地址&am…...
JavaFX史上最全教程 - Shape - JavaFX矩形椭圆
avaFX Shape类定义了常见的形状，如线，矩形，圆，Arc，CubicCurve，Ellipse和QuadCurve。 在场景图上绘制矩形需要宽度，高度和左上角的（x，y）位置。 要在JavaFX中…...
SpringBoot实现的企业资产管理系统
2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统，它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等，非常…...
python-读写Excel：openpyxl-（4）下拉选项设置
使用openpyxl库的DataValidation对象方法可添加下拉选择列表。 DataValidation参数说明： type： 数据类型("whole", "decimal", "list", "date", "time", "textLength", "custom"…...
【C++】详解RAII思想与智能指针
🌈 个人主页：谁在夜里看海. 🔥 个人专栏：《C系列》《Linux系列》 ⛰️ 丢掉幻想，准备斗争 目录 引言 内存泄漏 内存泄漏的危害 内存泄漏的处理 一、RAII思想 二、智能指针 1.auto_ptr 实现原理 模拟实现 弊端…...
Qt 环境实现视频和音频播放
在这个示例中，我们将使用 FFmpeg 进行视频和音频的解码，并使用 Qt 的界面进行显示和控制。为了实现音频和视频的解码以及同步显示，我们需要使用 FFmpeg 的解码库进行视频和音频解码，使用 Qt 的 QLabel 显示解码后的视频帧…...
【人工智能训练师】7 大数据处理与应用
大数据处理与应用（Hive技术）(0/100分) 1.本地开发工具连接Hadoop集群 1.本次环境版本为Hadoop2.7.7，对应eclips插件存放于云主机master:/usr/package277/中。 2.本机映射名为hadoop000，云主机Hadoop/Hive的hosts文件中IP需要修改…...
nginx配置文件介绍及示例
一、nginx配置文件一共有main，http，server，location，upstream，stream，events7个块。 step 1: main 块 作用：main 块是 Nginx 配置文件的顶级块，用于设置一些全局的参数和配置&…...
如何在算家云搭建YOLOv5（物体检测）
一、YOLOv5简介 YOLOv5 模型是一种以实时物体检测闻名的计算机视觉模型，由 Ultralytics 开发，并于 2020 年年中发布。它是 YOLO 系列的升级版，继承了 YOLO 系列以实时物体检测能力而著称的特点。 二、模型搭建流程 1.选择模型实例 在应用…...
现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库
文章目录 一、概要二、整体架构流程1. 安装 MSYS2 环境2. 安装postgresql 三、技术名词解释1.MSYS22.postgresql 四、技术细节1. 创建主数据库2.添加从数据库复制权限3. 按需修改参数（1）WAL保留空间（2）监听地址 4. 启动主服务器5.…...
使用Element UI实现一个拖拽图片上传，并可以Ctrl + V获取图片实现文件上传
要在 Element UI 的拖拽上传组件中实现 Ctrl V 图片上传功能，可以通过监听键盘事件来捕获粘贴操作，并将粘贴的图片数据上传到服务器。 版本V1，实现获取粘贴板中的文件 注意，本案例需要再你已经安装了Element UI并在项目中正确配…...
私域流量圈层在新消费时代的机遇与挑战：兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用
摘要：本文剖析了私域流量圈层在新消费时代呈现出的独特温度与信任优势，阐述了从传统销售到新消费转型中用户心理的变化。同时，强调了内容对于私域流量的关键作用，并分析开源 AI 智能名片、2 1 链动模式、S2B2C 商城小程序在私域流…...
vxe-vxe-colgroup后端返回数据 对数据进行处理 动态合并分组表头(v-if控制表格渲染（数据请求完成后渲染）)
1.html vxe-colgroup循环合并数据；v-if控制表格渲染（数据请求完成后渲染） <template><vxe-table v-if"isTableReady" :data"tableData"><vxe-colgroup title"基本信息"><template v-for…...
ESLint 使用教程（五）：从输入 eslint 命令到最终代码被处理，ESLint 中间究竟做了什么工作
前言 ESLint 是现代 JavaScript 开发中不可或缺的代码质量工具。它能够帮助开发者找到并修复代码中的问题，提升代码的可维护性。但是，你可能会好奇：从我们在终端里输入 eslint 命令到最终代码被处理，ESLint 中间究竟做了什么工作…...
【安全测试】sqlmap工具（sql注入）学习
前言：sqimap是一个开源的渗透测试工具，它可以自动化检测和利用SQL注入缺陷以及接管数据库服务器的过程。它有一个强大的检测引擎，许多适合于终极渗透测试的小众特性和广泛的开关，从数据库指纹、从数据库获 取数据到访问底层文件系…...
YOLOv11融合CVPR[2023]空间和通道重建卷积ScConv模块及相关改进思路|YOLO改进最简教程
YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程 YOLOv11改进汇总贴：YOLOv11及自研模型更新汇总 《SCConv: Spatial and Channel Reconstruction Convolution for Feature Redundancy》 一、 模块介绍 论文链接：SCConv: Spatial and Cha…...
C++研发笔记13——C语言程序设计初阶学习笔记11
从今天开始我们开始第三模块《分支语句和循环语句》的学习，在本模块中我们将会涉及到以下9个内容：什么是语句、分支语句——if语言、分支语句——switch语句、循环语句——while循环、循环语句——for循环、循环语句——do while循环、折半查找算法、猜数…...
html5拖放
1、什么是拖放（Drag 和 Drop） 拖放，字面意思就是拖动，放置 在编程里面也是如此,拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。…...
卫导调零天线功率倒置算法原理及MATLAB仿真
卫导调零天线功率倒置算法原理及MATLAB仿真 文章目录 前言一、调零天线简介二、功率倒置自适应算法三、MATLAB仿真四、MATLAB代码总结 前言 \;\;\;\;\; 自适应调零抗干扰技术可以很大程度改善导航抗干扰性能，也是目前导航抗干扰技术中不可或缺的，其研究意…...
【划分型 DP】力扣139. 单词拆分
给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意：不要求字典中出现的单词全部都使用，并且字典中的单词可以重复使用。 示例 1： 输入: s “leetcode”, wordDic…...
Python学习从0到1 day26 第三阶段 Spark ④ 数据输出
半山腰太挤了，你该去山顶看看 —— 24.11.10 一、输出为python对象 1.collect算子 功能: 将RDD各个分区内的数据，统一收集到Driver中，形成一个List对象 语法： rdd.collect() 返回值是一个list列表 示例： from …...
AWTK fscript 中的 JSON 扩展函数
fscript 是 AWTK 内置的脚本引擎，开发者可以在 UI XML 文件中直接嵌入 fscript 脚本，提高开发效率。本文介绍一下 fscript 中的 ** JSON 扩展函数 ** 1.json_load 加载 json 数据。 原型 json_load(str) > object json_load(binary) > object js…...
产品结构设计网站/查看浏览过的历史记录百度
简介现在容器化已经是趋势，制作镜像也是我们的基础工作。镜像制作镜像越小，部署起来越方便。在这个方面，轻巧的Linux发行版本就是一个很好的选择，这里我们选择alpine linux 。目前最新版本是3.12.1。官方很友好的提供了minirootfs…...
做系统网站/宁波seo企业推广
Linux简介：Linux -百度百科centos简介：centos-百度百科在学习Linux之前，首先要对计算机有一个基本的了解，在这方面，博主推荐一本贼好贼好的书-《穿越计算机的迷雾》，这本书“《穿越计算机的迷雾》从最基本的…...
甘肃手机版建站系统信息/文案发布平台
1、这个小游戏对于初学者而言，就是为了让大家练习方法的定义，参数的设定和使用。同时在开始需求分析中得知，如果我们发现一些代码重复出现，我们就要开始想，要不要写个方法来解决。比如地图的绘制，地图的绘制…...
第一次做愛有网站吗/优化教程网
故障前提ElasticSearch 版本：5.2集群节点数：5索引主分片数：5索引分片副本数：1线上环境ES存储的数据量很大，当天由于存储故障，导致一时间 5个节点的 ES 集群，同时有两个节点离线，一个…...
企业官方网站建设的作用/站长工具在线免费
1、在码云新建创库，并且选择初始化README.md以启用svn服务。 2、在该项目的管理界面，勾上 [启用SVN访问] 3、在项目首页找到SVN的仓库地址，复制 4.在本地新建一个文件夹，名称随意 5.右键SVN检出，粘贴刚刚复制的地址&a…...
做网站 珠海/免费发布推广信息的b2b
这个intern()官方说法的作用是返回字符串对象的规范化表示... 然而不明觉厉... 用我通俗一点说法其实就是，拿到一个字符串，那它到字符串常量池中去执行equals方法，如果返回为true，就代表，有相同的则返回字符串常量池里…...