校园官网练习---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 商城小程序在私域流…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...