web实验二
2024.12.19
<!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/base.css">
<link rel="stylesheet" href="./css/index.css">
<style>
.top {
display: flex;
height: 40px;
background: #000;
color: #FFF;
font-size: 14px;
}
.top1 {
line-height: 40px;
height: 40px;
width: 90px;
}
.time {
margin: 10px 0px;
}
.logo {
width: 358px;
height: 82px;
margin-top: 22px;
}
.up {
width: 100%;
height: 128px;
background: #90000a;
min-width: 1200px;
}
.menu {
display: flex;
text-align: center;
line-height: 43px;
height: 43px;
font-size: 15px;
color: #FFF;
/* background: #90000A; */
background-color: #6f020a
}
.submenu1 {
width: 100px;
background: #90000A;
}
.submenu2 {
width: 100px;
position: relative;
border-right: #000 solid 1px;
}
.submenu2:hover {
background-color: #90000A;
}
.submenu2:hover .subsubmenu2 {
display: block;
}
.subsubmenu2 {
display: none;
/*防止图片阻挡 */
position: absolute;
width: 150px;
margin-left: -25px;
background-color: #6f020a;
}
.subsubmenu2 li:hover {
background-color: #90000A;
}
.submenu {
width: 100px;
border-right: #000 solid 1px;
}
.submenu:hover {
background-color: #90000A;
}
/* END */
.body1 {
height: 386px;
color: #000;
margin-top: 30px;
}
/* .UP1 {
display: flex;
justify-content: space-between;
} */
.up1_l {
float: left;
width: 764px;
height: 46px;
background-color: #90000A;
margin: 0px 0px 10px;
}
.up1_r {
float: right;
width: 410px;
height: 46px;
background-color: #90000A;
margin: 0px 0px 10px;
}
.up_l {
float: left;
width: 121px;
color: #fff;
font-size: 24px;
text-align: right;
line-height: 46px;
}
.up_r {
float: right;
width: 70px;
line-height: 46px;
}
.up_r_a {
font-size: 14px;
height: 19px;
color: #FFF;
}
/* upnews */
.upnews {
width: 360px;
height: 300px;
color: #000;
font-size: 12px;
padding-bottom: 20px;
}
.UP_content img {
float: left;
}
.UP_content .upnews {
float: left;
}
.UP_content .upnews div {
width: 360px;
height: 46px;
color: #000;
font-size: 12px;
line-height: 46px;
}
hr {
border: rgb(229, 227, 227) solid 1px;
}
.UP_content .upnews h2 {
font-size: 14px;
font-weight: normal;
color: #333;
}
.UP_content .upnews a:hover {
color: #90000A;
}
.UP_content2 {
float: right;
width: 410px;
height: 300px;
color: #000;
font-size: 12px;
padding-bottom: 20px;
}
.UP_content2 div {
width: 330x;
line-height: 46px;
height: 46px;
}
.UP_content2 a {
float: left;
height: 19px;
font-size: 14px;
}
.UP_content2 h3 {
width: 50px;
height: 25px;
float: right;
font-size: 14px;
font-weight: normal;
color: #90000A;
}
/* END */
</style>
</head>
<body>
<div class="wrapper">
<!-- 顶部 -->
<div class="top">
<div class="top1">今日时间：</div>
<div class="time"></div>
</div>
<!-- Logo -->
<div class="up">
<img class="logo" src="https://www.qut.edu.cn/images/qd_06.jpg" alt="" title="青岛理工大学主站">
</div>
<!-- menu -->
<div class="control">
<div class="menu">
<div class="submenu1">首页</div>
<ul>
<li class="submenu2">校情总览
<ul class="subsubmenu2">
<li>学校概况</li>
<li>历史沿革</li>
<li>历任领导</li>
<li>现任领导</li>
<li>学校标志</li>
<li>临沂校区</li>
</ul>
</li>
</ul>
<div class="submenu">组织机构</div>
<div class="submenu">院部设置</div>
<div class="submenu">师资队伍</div>
<div class="submenu">教育教学</div>
<div class="submenu">科学研究</div>
<div class="submenu">招生就业</div>
<div class="submenu">国际交流</div>
<div class="submenu">公共服务</div>
<div class="submenu">校园生活</div>
<div class="submenu">理工新闻</div>
</div>
<!-- img -->
<div>
<img height="465" width="100%" src="https://www.qut.edu.cn/images/20240628115542.jpg" alt="">
</div>
</div>
<!-- body1 -->
<div class="body1">
<div class="UP1">
<div class="up1_l">
<div class="up_l">理工要闻</div>
<div class="up_r">
<a class="up_r_a" href="#">更多>></a>
</div>
</div>
<div class="up1_r">
<div class="up_l">学术动态</div>
<div class="up_r">
<a class="up_r_a" href="#">更多>></a>
</div>
</div>
</div>
<div class="UP_content">
<img src="https://www.qut.edu.cn/__local/C/FC/A5/4A3B9C26064EA97E586654B475E_EECB7361_2E9B9.png"
width="380" height="280" style="margin-right: 20px;" alt="">
<div class="upnews">
<div>
<h2><a href="https://www.qut.edu.cn/info/1051/31982.htm">我校首次获批国家自然学科基金数学天元基金项目</a></h2>
</div>
<hr>
<div>
<h2><a href="#">青岛西海岸新区副区长赵楠来校调研交流</a></h2>
<hr>
</div>
<div>
<h2><a href="">学校参加全国第二届城乡规划专业研究生教育年会“国...</a></h2>
<hr>
</div>
<div>
<h2><a href="">学校举行首届乔冰•菁华奖学金颁奖仪式</a></h2>
<hr>
</div>
<div>
<h2><a href="">学校第二十二届外语文化节闭幕</a></h2>
<hr>
</div>
<div>
<h2><a href="">临沂校区新当选“两委”委员赴时代楷模赵志全同志纪...</a></h2>
<hr>
</div>
</div>
</div>
<div class="UP_content2">
<div>
<a href="">学术预告|理学院析理行远大讲堂第47讲: 含天...</a>
<h3>12-16</h3><br>
<hr>
</div>
<div>
<a href="">党委常委、副校长陈连军带队参加2024中国煤...</a>
<h3>12-14</h3><br>
<hr>
</div>
<div>
<a href="">人文与外国语学院召开2025年度高水平科研成...</a>
<h3>12-13</h3><br>
<hr>
</div>
<div>
<a href="">学术预告|理学院析理行远大讲堂第46讲:Fault...</a>
<h3>12-10</h3><br>
<hr>
</div>
<div>
<a href="">科技处举办“礼贤科技大讲堂”活动</a>
<h3>12-09</h3><br>
<hr>
</div>
<div>
<a href="">艺术与设计学院举办高水平基金项目申报培育...</a>
<h3>12-09</h3><br>
<hr>
</div>
</div>
</div>
</div>
<script>
function updateTime() {
const date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let week = date.getDay()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
hour = hour < 10 ? '0' + hour : hour
minute = minute < 10 ? '0' + minute : minute
second = second < 10 ? '0' + second : second
// date.toLocaleDateString 简单写法
const dayOfWeek = ['日', '一', '二', '三', '四', '五', '六',]
return `${year}年${month}月${day}日星期${dayOfWeek[week]}${hour}:${minute}:${second}`
}
const timeDiv = document.querySelector('.time')
timeDiv.innerHTML = updateTime();
setInterval(function () {
timeDiv.innerHTML = updateTime()
}, 1000)
</script>
</body>
</html>
