<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<style>
a{
text-decoration: none; /* 设置文本下划线 */
}
* {
padding: 0;
margin: 0;
}
a:visited {
color: black; /* 设置选中文本颜色为黑色 */
}
a:hover{
color:#F00;
}
/* 顶部的CSS样式 */
.top-wrap {
background: #024089;
height: 156px;
}
.top {
text-align: center;
padding-top: 33px;
}
.common {
width: 1280px;
margin: 0px auto;
}
.top img {
width: auto;
margin: 0 auto;
}
.top img {
width: auto;
margin: 0 auto;
}
img {
border: none;
}
img {
border: 0px;
vertical-align: bottom;
}
/*导航栏的CSS样式*/
.1{
width: 100%;
background-color:#009;
display: flex;
justify-content: center;
align-items: center;
}
.menu{
width:100%;
height:60px;
border:1px black soild;
margin:0 auto;
background-color:#024089;
margin-left: 0 auto;
margin-right: 0 auto;
display: flex;
justify-content: center;
margin-top:0 auto;
z-index: 2;
}
li{
list-style-type:none;
width:110px;
}
.menu li{
float:left;
}
.menu li a{
display:block;
height:50px;
text-align:center;
line-height:50px;
color:#FFF;
text-decoration:none;
font-weight:bold;
}
.menu li ul li{
background-color:#00f;
height:40px;
visibility:hidden;
position: relative;
z-index: 2;
}
}
.menu ul li a{
font-weight:normal;
font-size:14px;
}
.menu>li:hover>a{
background-color:#006;
color:red;
}
.menu>li:hover ul li{
visibility:visible;
}
.menu ul li a:hover{
color:#df4136;
background-color:#2a40bd;
}
/*这里是轮播图的CSS样式*/
.carousel-container {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-slide {
display: flex;
width: 300%;
transition: transform 0.5s ease-in-out;
}
.carousel-slide img {
width: 33.33%;
}
.arrow-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.arrow {
width: 100px;
height: 435px;
opacity: 0.5;
pointer-events: auto;
}
.left-arrow {
position: absolute;
top: 0;
left: 0;
background: url("箭头左.png") center/contain no-repeat;
background-size:50px 50px;
}
.right-arrow {
position: absolute;
top: 0;
right: 0;
background: url("箭头右.png") center/contain no-repeat;
background-size:50px 50px;
}
/*这里是主体部分的CSS样式*/
.main{
margin: 0 auto;
width: calc(1280px + 40px);
height: 547.44px;
display:flex;
justify-content: center;
align-items: center;
}
.left-area{
flex:60%;
width:auto;
height:auto;
}
.right-area{
flex:40%;
width:auto;
height:auto;
margin-left: 18px;
}
.ltop-box{
width:820px;
height:23.44px;
font-size:20px;
}
.content{
width:820px;
height:469px;
}
.left-content{
float:left;
height:469px;
width:400px;
}
.right-content{
float:right;
height:469px;
width:400px;
}
.rtop-box{
width:480px;
height:23.44px;
}
.list{
width:480px;
height:484px;
}
.gengduoanniu2{
float:right;
}
.square2 {
width: 60px;
height: 60px;
background-color: #024089;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
}
.seelevollerei{
display: flex;
align-items: center;
}
.wo{
color:#30F;
font-weight:bolder;
font-size:25px;
}
.xiangqing{
color:#33F;
margin-top:10px;
margin-left:320px;
}
.ziti{
font-size:10px;
color:#999;
}
.gaisi {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 35.9px;
}
.gaisi span {
margin-right: 10px;
}
/*这里是水平滚动图的CSS样式*/
.scroll-container {
position: relative;
width: 1310px;
height: 232.53px; /* 修改：整个盒子的高度调整为 232.53px */
margin: 0 auto;
overflow: hidden;
right: 10px; /* 添加：将整个盒子向左移动 10px */
}
.scroll-wrapper {
position: absolute;
top: 50px; /* 修改：滚动图盒子的垂直位置调整为 50px */
width: fit-content;
height: 161px; /* 修改：每个图片的高度调整为 161px */
display: flex;
animation: scrollAnimation 20s linear infinite;
}
.scroll-image {
width: 328px;
height: 161px; /* 修改：每个图片的高度调整为 161px */
margin-right: 10px;
}
.scroll-image:last-child {
margin-right: 0;
}
.scroll-top {
height: 21.53px; /* 修改：顶端盒子的高度调整为 21.53px */
}
.xiaobiaoti{
font-size:20px;
}
/*链接区域的css样式*/
.链接{
display:inline-block;
font-size: 14px;
overflow: hidden;
line-height: 34px;
height: 70px;
width: 300px;
vertical-align: top; /* 垂直对齐方式 */
}
.links {
width: 1310px;
height: 400px;
margin: 40px auto; /* 使用 auto 来实现水平居中 */
display: flex;
justify-content: center; /* 在 flex 布局中水平居中 */
transform: translateX(-10px); /* 向左移动10px */
}
.左链接总区 {
width: 397px;
height: 400px;
margin-right: 60px;
}
.中间链接总区 {
width: 397px;
height: 400px;
margin-right: 60px;
}
.右链接总区 {
width: 397px;
height: 400px;
}
.zuo-top-box,
.middle-top-box,
.right-top-box {
width: 397px;
height: 22.94px;
margin-bottom: 25px;
}
.zuo-内容 {
width: 397px;
height: 320px;
}
.上,
.中,
.下 {
width: 397px;
height: 70px;
margin-bottom: 30px;
border-bottom: 1px dashed;
padding-bottom: 18px;
}
.日期 {
display:inline-block;
vertical-align: top; /* 垂直对齐方式 */
width: 68px;
height: 53px;
background-color: #edf2f8;
color: #024089;
padding-top: 15px;
text-align: center;
line-height: 1;
margin-right:20px;
}
.月份 {
color: #024089;
width: 68px;
height: 24px;
font-size: 24px;
display: block;
margin-bottom: 2px;
}
.日 {
width: 26.98px;
height: 16px;
margin:auto;
font-size: 10px;
text-align: center;
}
.链接:hover {
color: red;
}
.中间链接区链表 {
width: 397px;
height: 321.58px;
}
.中间区列表项 {
width: 397px;
height: 19.198px;
margin-top: 24px;
}
/*这里是页足footer的CSS*/
.footer {
width: 100%;
height: 102.87px;
background-color: #024089;
margin-top:10px;
}
.footer-section1,
.footer-section2,
.footer-section3 {
display: inline-block;
vertical-align: center;
text-align: center;
}
.footer-section1 {
width: 284.15px;
height: 38px;
color: white;
margin-right: 200px;
margin-left: 200px;
font-size:9px;
margin-top:40px;
transform: translateY(-5px);
}
.footer-section2 {
width: 270px;
height: 31px;
transform: translateY(-5px);
}
.footer-section2 .search-form {
display: flex;
align-items: center;
justify-content: center;
}
.footer-section2 input[type="text"] {
width: 240px;
height: 31px;
background-color: white;
color: gray;
padding-left: 5px;
}
.footer-section2 input[type="text"]:focus,
.footer-section2 input[type="text"]:valid {
color: black;
}
.footer-section3{
width:430px;
height:60;
margin-left:100px;
transform: translateY(10px);
}
.列表项{
width:100px;
height:15px;
margin-left:30px;
margin-top:20px;
text-align:center;
}
.列表项第二段{
width:100px;
height:15px;
margin-left:30px;
margin-bottom:10px;
margin-top:10px;
text-align:center;
}
.gaisidedongxi{
margin-top:14px;
}
span a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
</style>
</head>
<body>
<!--头部logo-->
<header>
<div class="top-wrap">
<div class="top common">
<img src="logo.png" width=100% height="89" border="0">
</div>
</div>
</header>
<!--导航栏内容-->
<div class="1">
<ul class="menu">
<li>
<a href="">学校首页</a>
</li>
<li>
<a href="">学院概况</a>
</li>
<li>
<a href="">教学科研</a>
<ul>
<li>
<a href="">教学动态</a>
</li>
<li>
<a href="">科研动态</a>
</li>
<li>
<a href="">下载中心</a>
</li>
</ul>
</li>
<li>
<a href="">师资队伍</a>
<ul>
<li><a href="">不好说</a></li>
<li><a href="">不好说</a></li>
</ul></li>
<li>
<a href="">教育教学</a>
<ul>
<li><a href="">本科生教育</a></li>
<li><a href="">研究生教育</a></li>
<li><a href="">继续教育</a></li>
</ul></li>
<li>
<a href="">科学研究</a>
<ul>
<li><a href="">自然学科</a></li>
<li><a href="">人文学科</a></li>
<li><a href="">重点学科</a></li>
</ul></li>
<li>
<a href="">招生就业</a>
<ul>
<li><a href="">本科生招生</a></li>
<li><a href="">研究生招生</a></li>
<li><a href="1">国际生招生</a></li>
<li><a href="">继续教育招生</a></li>
</ul></li>
<li>
<a href="l">人才找平</a>
<ul>
<li><a href="">人事处</a></li>
<li><a href="">人事文件</a></li>
<li><a href="">人才招聘</a></li>
</ul></li>
<li>
<a href="">合作交流</a>
<ul>
<li><a href="">合作办学</a></li>
<li><a href="">对外合作</a></li>
</ul></li>
<li>
<a href="l">教务系统</a>
<ul>
<li><a href="">河科大新闻</a></li>
<li><a href="">河科大通知</a></li>
<li><a href="">河科大文件</a></li>
</ul></li>
</ul>
</div>
<!-- 水平轮播图内容 -->
<!--这里是轮播图deHTML和JS-->
<div class="carousel-container">
<div class="carousel-slide">
<img src="5.jpg" alt="Image 1">
<img src="2.jpg" alt="Image 2">
<img src="5.jpg" alt="Image 3">
</div>
<div class="arrow-container">
<div class="arrow left-arrow"><a href="#"></a></div>
<div class="arrow right-arrow"><a href="#"></a></div>
</div>
</div>
<script>
function $(selector) {
return document.querySelector(selector);
}
document.addEventListener("DOMContentLoaded", function () {
var carouselSlide = $(".carousel-slide");
var images = document.querySelectorAll(".carousel-slide img");
var slideWidth = images[0].clientWidth; /* 修改：使用clientWidth获取图片宽度 */
carouselSlide.appendChild(images[0].cloneNode(true));
carouselSlide.appendChild(images[1].cloneNode(true));
carouselSlide.appendChild(images[2].cloneNode(true));
var currentIndex = 0;
var totalSlides = images.length;
function slide() {
carouselSlide.style.transition = "transform 0.5s ease-in-out";
carouselSlide.style.transform = "translateX(-" + (currentIndex + 1) * slideWidth + "px)";
}
function nextSlide() {
if (currentIndex >= totalSlides - 1) {
carouselSlide.style.transition = "none";
currentIndex = -1;
setTimeout(slide, 0);
}
currentIndex++;
slide();
}
function prevSlide() {
if (currentIndex <= 0) {
carouselSlide.style.transition = "none";
currentIndex = totalSlides;
setTimeout(slide, 0);
}
currentIndex--;
slide();
}
$(".left-arrow").addEventListener("click", function () {
prevSlide();
});
$(".right-arrow").addEventListener("click", function () {
nextSlide();
});
setInterval(nextSlide, 2000);
});
</script>
<!--这里是轮播图deHTML和JS-->
<br>
<!--这里是主体区域-->
<div class="main">
<div class="left-area"> <!-- 整个左半区域盒子 -->
<div class="ltop-box"><!-- 左半盒子的顶端盒子 -->
<!-- 左区域顶部盒子内容 -->
<img src="img01.png">
<span><b>校园要闻</b></span>
<!-- 左区域顶部盒子内容 -->
</div>
<br><br>
<div class="content"><!-- 顶端盒子下方的两个盒子的整体盒子 -->
<div class="left-content">
<!-- 顶端盒子下左区域左侧内容 -->
<div class="seelevollerei">
<p class="square2">日期</p><p class="wo"> 好难啊啊啊啊！</p>
</div>
<br/><br/>
<img src="图.jpg" style="max-width: 90%; max-height: 90%; width: auto; height: auto;" >
<br><br>
<p class="ziti">我是文本我是文本本我是文本我是文本我是文本</p>
<p class="ziti">我是文本我是文本本我是文本我是文本我是文本我是文本字</p>
<p class="ziti">我是文本我是文本我是文本我是文本我是文本</p>
<a href="#">
<span class="xiangqing">详情></span>
</a>
</div>
<div class="right-content">
<!-- 顶端盒子下左区域右侧内容 -->
<div class="seelevollerei">
<p class="square2">日期</p><p class="wo"> 好难啊啊啊啊！！！</p>
</div>
<br/><br/>
<img src="6A455D35BB888A8C4C824A2A204_BC0E29FB_196F8.png" style="max-width: 90%; max-height: 90%; width: auto; height: auto;">
<br><br>
<p class="ziti">我是文本我是文本我是文本我是文本我文本我是文本我是文本我是文本</p>
<p class="ziti">我是文本我是文本我是文本我是文本我是文
<p class="ziti">我是文本我是文本我是文本我是文本</p>
<a href="#">
<span class="xiangqing">详情></span>
</a>
</div>
</div><!-- 顶端盒子下方的两个盒子的整体盒子 -->
</div><!-- 整个左半区域盒子 -->
<div class="right-area"><!-- 整个右半区域盒子 -->
<div class="rtop-box">
<!-- 右区域顶部盒子内容 -->
<div class="gengduoanniu2"><a href=""><img src="icon_more.jpg"></a></div>
</div>
<div class="list">
<!-- 右区域列表内容 -->
<br><br>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="gaisi">
<a href="#"><span style="font-size: 16px; letter-spacing: 2px;">文本文本文</span></a>
<span style="font-size: 9px;">2023-1-1</span>
</li>
</div>
</div><!-- 整个右半区域盒子 -->
</div><!--整个主体区域-->
<!--水平滚动图区域-->
<div class="scroll-container">
<div class="scroll-top">
<img src="img02.png">
<span class="xiaobiaoti"><b>校园风光</b></span>
</div>
<div class="scroll-wrapper">
<img class="scroll-image" src="yishujie.jpg" alt="Image 1">
<img class="scroll-image" src="IMG_20140426_090426.jpg" alt="Image 2">
<img class="scroll-image" src="tianecheng.jpg" alt="Image 3">
<img class="scroll-image" src="DSC_0644.jpg" alt="Image 4">
<img class="scroll-image" src="201462316213165375468.jpg" alt="Image 5">
<img class="scroll-image" src="2015638492743153246.jpg" alt="Image 6">
<img class="scroll-image" src="haohan.jpg" alt="Image 7">
</div>
</div>
<script>
var scrollWrapper = document.querySelector('.scroll-wrapper');
var images = document.querySelectorAll('.scroll-image');
var scrollWidth = scrollWrapper.offsetWidth;
var clonedImages = Array.from(images).map(function (image) {
var clone = image.cloneNode(true);
scrollWrapper.appendChild(clone);
return clone;
});
var currentPosition = 0;
var scrollInterval;
function startScroll() {
scrollInterval = setInterval(scrollImages, 20);
}
function stopScroll() {
clearInterval(scrollInterval);
}
function scrollImages() {
currentPosition -= 1;
scrollWrapper.style.transform = 'translateX(' + currentPosition + 'px)';
if (currentPosition <= -scrollWidth) {
currentPosition = 0;
}
}
scrollWrapper.addEventListener('mouseenter', stopScroll);
scrollWrapper.addEventListener('mouseleave', startScroll);
startScroll();
</script>
<!--水平滚动图区域结束-->
<!--总链接区-->
<div class="links">
<div class="左链接总区">
<div class="zuo-top-box">
<!-- 左链接区域顶端盒子内容 -->
<img src="img03.png">
<span class="xiaobiaoti"><b>通知公告</b></span>
<div class="gengduoanniu2"><a href=""><img src="icon_more.jpg"></a></div>
</div>
<div class="zuo-内容">
<!--左链接区域内容区域-->
<div class="上">
<div class="日期">
<span class="月份">02</span>
<span class="日">07日</span>
</div>
<a class="链接" title="河南科技大学应用工程学院 关于2023年录取新生学籍及毕业证发放问题的统一回复" href="info/1038/2820.htm" target="_blank">河南科技大学应用工程学院 关于2023年录取新生学籍及毕业证发放问题的统一回复
</a>
</div>
<div class="中">
<div class="日期">
<span class="月份">02</span>
<span class="日">07日</span>
</div>
<a class="链接" title="河南科技大学应用工程学院 关于2023年录取新生学籍及毕业证发放问题的统一回复" href="info/1038/2820.htm" target="_blank">河南科技大学应用工程学院 关于2023年录取新生学籍及毕业证发放问题的统一回复
</a>
</div>
<div class="下">
<div class="日期">
<span class="月份">02</span>
<span class="日">07日</span>
</div>
<a class="链接" title="河南科技大学应用工程学院 关于2023年录取新生学籍及毕业证发放问题的统一回复" href="info/1038/2820.htm" target="_blank">河南科技大学应用工程学院 关于2023年录取新生学籍及毕业证发放问题的统一回复
</a>
</div>
</div> <!--左区域内容区结束-->
</div> <!--左链接总区结束-->
<div class="中间链接总区">
<div class="middle-top-box">
<!-- 中间链接区域顶端盒子内容 -->
<img src="img04.png">
<span class="xiaobiaoti"><b>专题新闻</b></span>
<div class="gengduoanniu2"><a href=""><img src="icon_more.jpg"></a></div>
</div>
<div class="中间链接区链表">
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
</div><!--中间链接链表结束-->
</div><!--中间链接总区结束-->
<div class="右链接总区">
<div class="right-top-box">
<!-- 右链接区域顶端盒子内容 -->
<img src="img05.png">
<span class="xiaobiaoti"><b>党建工作</b></span>
<div class="gengduoanniu2"><a href=""><img src="icon_more.jpg"></a></div>
</div>
<div class="中间链接区链表">
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
<li class="中间区列表项">
<a href="#">
<span style="font-size: 16px; letter-spacing: 2px;">振翅五清空</span>
</a>
<!--空格区域-->
<span style="font-size: 9px;">2023-1-1</span>
</li>
</div>
</div><!--右间链接总区域结束-->
</div><!--总连接区域结束-->
<!--最后的页足区！-->
<div class="footer">
<div class="footer-section1">
<p>版权所有2016-2022 河南科技大学应用工程学院</p>
</div>
<div class="footer-section2">
<form class="search-form">
<input type="text" name="search" placeholder="全文搜索">
<input type="image" src="top_so_b.png" alt="Submit" width="21" height="21">
</form>
</div>
<div class="footer-section3">
<ul class="gaisidedongxi">
<span class="列表项"><a href="" style="color:#fff; font-size:14px">学校教务处</a></span>
<span class="列表项"><a href="" style="color:#fff; font-size:14px">学校图书馆</a></span>
<span class="列表项"><a href="" style="color:#fff; font-size:14px">阶梯英语教育网</a></span>
</ul>
<ul class="gaisidedongxi">
<span class="列表项第二段"><a href="" style="color:#fff; font-size:14px">北京外国语大学</a></span>
<span class="列表项第二段"><a href="" style="color:#fff; font-size:14px">上海外国语大学</a></span>
</ul>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
