校园官网练习---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
原文地址：https://blog.csdn.net/W111115_/article/details/143633268
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！