云大官网页面完善
This commit is contained in:
parent
b444bff543
commit
ac52909ac3
@ -1,44 +1,197 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh" xmlns="">
|
||||||
<head>
|
<head>
|
||||||
<title>云南大学</title>
|
<meta charset="UTF-8"/>
|
||||||
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<link href="../scss/style_ynu.scss">
|
<link href="../scss/styleYnu.scss" rel="stylesheet"/>
|
||||||
|
<title>ynu of software</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<h1>云南大学</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">首页</a></li>
|
|
||||||
<li><a href="#">新闻</a></li>
|
|
||||||
<li><a href="#">教育</a></li>
|
|
||||||
<li><a href="#">科研</a></li>
|
|
||||||
<li><a href="#">校园生活</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<h2>欢迎来到云南大学！</h2>
|
|
||||||
<p>
|
|
||||||
云南大学是一所综合性大学，位于中国云南省昆明市呈贡区。学校成立于1937年，前身为国立西南联合大学。现有本科专业80个，涵盖文、理、工、农、医、管、法、教育等8个学科门类。</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
云南大学拥有一支高水平的教师队伍，现有教职工近3000人，其中教授近500人，副教授近1000人。学校设有多个研究机构和实验室，拥有良好的科研环境和条件。</p>
|
|
||||||
|
|
||||||
<p>如果您想了解更多关于云南大学的信息，请访问我们的官方网站：www.ynu.edu.cn。</p>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
<div class="w-full h-fit">
|
||||||
|
<img src="../../img/bg-top-combine.png" class="w-full" alt="top-blank-logo"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex bg-blue-600 text-white flex-row font-bold justify-around text-center items-center h-16 text-lg leading-16 overflow-hidden">
|
||||||
|
<div class="hover:text-red-300">首页</div>
|
||||||
|
<div class="hover:text-red-300">新闻公告</div>
|
||||||
|
<div class="hover:text-red-300">学校概况</div>
|
||||||
|
<div class="hover:text-red-300">师资队伍</div>
|
||||||
|
<div class="hover:text-red-300">人才培养</div>
|
||||||
|
<div class="hover:text-red-300">科学研究</div>
|
||||||
|
<div class="hover:text-red-300">合作交流</div>
|
||||||
|
<div class="hover:text-red-300">党群工作</div>
|
||||||
|
<div class="hover:text-red-300">学生工作</div>
|
||||||
|
<div class="hover:text-red-300">English</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="w-full h-fit mt-1 relative">
|
||||||
|
<div class="w-full h-screen relative flex z-0" id="slider-wrapper">
|
||||||
|
<img class="z-0 object-cover w-full" id="img1" src="../../img/anyuse0.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full flex">
|
||||||
|
<div class="flex w-3/5 flex-wrap">
|
||||||
|
<div class="m-4 shadow-lg w-full h-auto rounded-lg border-2">
|
||||||
|
<h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
|
||||||
|
学院新闻
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
|
||||||
|
<li class="hover:text-blue-400">很久以前，那还是我用win98的时候有次我系统崩溃了</li>
|
||||||
|
<li class="hover:text-blue-400">因为我是电脑白痴</li>
|
||||||
|
<li class="hover:text-blue-400">我朋友给我介绍了一个高手来帮我修电脑</li>
|
||||||
|
<li class="hover:text-blue-400">他看了一下电脑，问我有没有98的盘</li>
|
||||||
|
<li class="hover:text-blue-400">我说没有</li>
|
||||||
|
<li class="hover:text-blue-400">他想了一下，叫我把固定电话拿给他</li>
|
||||||
|
<li class="hover:text-blue-400">我想修电脑要电话干什么</li>
|
||||||
|
<li class="hover:text-blue-400">但人家是高手，我也不好说什么</li>
|
||||||
|
<li class="hover:text-blue-400">就把电话拔下来给他了</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-nowrap">
|
||||||
|
<div class="ml-4 mr-1 shadow-lg w-1/2 h-auto rounded-lg border-2">
|
||||||
|
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold">
|
||||||
|
学术动态
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<ul class="mx-3 pl-4 pr-0 pb-2 pt-2 text-sm leading-8 list-disc">
|
||||||
|
<li class="hover:text-blue-400">他把电话线空着的一头接在电脑的一个插孔内</li>
|
||||||
|
<li class="hover:text-blue-400">然后进入了dos</li>
|
||||||
|
<li class="hover:text-blue-400">然后就开始在电话上不停的按着键</li>
|
||||||
|
<li class="hover:text-blue-400">他按键的速度非常快，但是只按0，1两个键</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mr-4 shadow-lg w-1/2 h-auto rounded-lg border-2">
|
||||||
|
<div class="h-auto">
|
||||||
|
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold flex-nowrap">
|
||||||
|
历史学习
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||||
|
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||||
|
我渐渐的有些困，我问他这东西要搞多久
|
||||||
|
</div>
|
||||||
|
<div class="w-1/3 border-2">
|
||||||
|
<img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||||
|
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||||
|
他说要几个小时
|
||||||
|
</div>
|
||||||
|
<div class="w-1/3 border-2">
|
||||||
|
<img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
|
||||||
|
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
|
||||||
|
我给他倒了杯茶，就一个人去隔壁睡觉了
|
||||||
|
</div>
|
||||||
|
<div class="w-1/3 border-2">
|
||||||
|
<img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-2/5 flex-grow mb-4">
|
||||||
|
<div class="h-full my-4 mr-4 shadow-lg rounded-lg border-2">
|
||||||
|
<h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
|
||||||
|
信息公告
|
||||||
|
<span class="float-right text-lg text-gray-400 hover:text-red-400">
|
||||||
|
更多>>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
|
||||||
|
<li class="hover:text-blue-400">醒来的时候，一看已经过了4个多小时</li>
|
||||||
|
<li class="hover:text-blue-400">我起身到隔壁，看见他正在98里面调试</li>
|
||||||
|
<li class="hover:text-blue-400">过了一会儿，他说，你试试，我坐上椅子用了一下，真的好了</li>
|
||||||
|
<li class="hover:text-blue-400">我当时也不懂电脑</li>
|
||||||
|
<li class="hover:text-blue-400">谢过人家就走了</li>
|
||||||
|
<li class="hover:text-blue-400">后来我慢慢对电脑有了了解</li>
|
||||||
|
<li class="hover:text-blue-400">终于了解</li>
|
||||||
|
<li class="hover:text-blue-400">原来当时那位高手是用机器语言编了一个98系统</li>
|
||||||
|
<li class="hover:text-blue-400">我后来问我朋友那位高手的下落</li>
|
||||||
|
<li class="hover:text-blue-400">朋友说前几年去了美国之后</li>
|
||||||
|
<li class="hover:text-blue-400">杳无音讯……</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-fit flex flex-wrap m-4 border-2 justify-around rounded-lg shadow-lg bg-gradient-to-r from-cyan-300 to to-violet-300">
|
||||||
|
<ul class="li-img clearfix">
|
||||||
|
<li><img src="../../img/anyuse2.jpg" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse3.jpg" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse4.jpg" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse5.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse6.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse7.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse8.png" alt=""/></li>
|
||||||
|
<li><img src="../../img/anyuse9.png" alt=""/></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="mt-4 bg-gradient-to-r from-sky-500 to to-indigo-500 text-center p-4 text-white">
|
||||||
|
<p>云南大学软件学院 版权所有</p>
|
||||||
|
<p>地址：昆明市呈贡区大学城东外环南路云南大学呈贡校区软件学院楼</p>
|
||||||
|
<p>邮编：650504</p>
|
||||||
|
<p>Copyright@ 2002-2018 School of Software</p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<script>
|
||||||
<p>©2023 云南大学. All rights reserved.</p>
|
const sliderData = [
|
||||||
|
{url: "../../img/anuse0.png"},
|
||||||
|
{url: "../../img/anuse1.png"},
|
||||||
|
{url: "../../img/anuse2.png"},
|
||||||
|
{url: "../../img/anuse3.png"},
|
||||||
|
];
|
||||||
|
const img = document.getElementById("img");
|
||||||
|
const dot = document.getElementById("dot");
|
||||||
|
|
||||||
<p>联系我们：<a href="mailto:support@ynu.edu.cn">support@ynu.edu.cn</a></p>
|
let i = 0;
|
||||||
</footer>
|
|
||||||
|
setInterval(function () {
|
||||||
|
i++;
|
||||||
|
if (i > 3) {
|
||||||
|
i = 0;
|
||||||
|
}
|
||||||
|
img.src = sliderData[i].url;
|
||||||
|
for (let j = 0; j <= 3; j++) {
|
||||||
|
if (i === j) {
|
||||||
|
dot.children[j].style.backgroundColor = "white";
|
||||||
|
} else {
|
||||||
|
dot.children[j].style.backgroundColor = "inherit";
|
||||||
|
}
|
||||||
|
|
||||||
|
img.src = sliderData[i].url;
|
||||||
|
for (let j = 0; j <= 3; j++) {
|
||||||
|
if (i === j) {
|
||||||
|
dot.children[j].style.backgroundColor = "white";
|
||||||
|
} else {
|
||||||
|
dot.children[j].style.backgroundColor = "inherit";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
30
src/scss/styleYnu.scss
Normal file
30
src/scss/styleYnu.scss
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.li-img li {
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
width: 25%; /*四列图片排列*/
|
||||||
|
height: 175px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li-img li img {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
top: 50%; /*li高度的一半*/
|
||||||
|
transform: translateY(-50%); /*再向上移动自身的50%*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/*清除浮动*/
|
||||||
|
.clearfix:after {
|
||||||
|
position: relative;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
@ -1,94 +0,0 @@
|
|||||||
/*style.scss*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-bottom: 1px solid #cccccc;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 36px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
background-color: #333333;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav li {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #cccccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 24px;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #666666;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5em;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
margin-top: 0px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: #333333;
|
|
||||||
color: #ffffff;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: .5em;
|
|
||||||
padding-bottom: .5em;
|
|
||||||
margin-top: .5em;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -1em;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer p {
|
|
||||||
margin-bottom: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a:hover {
|
|
||||||
color: #cccccc;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user