format code
This commit is contained in:
parent
26691ce656
commit
68a8fc52e5
@ -11,7 +11,7 @@
|
||||
<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>
|
||||
@ -24,7 +24,7 @@
|
||||
<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">-->
|
||||
@ -32,7 +32,7 @@
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<!--图片轮播实现-->
|
||||
<script src="../ts/slider.ts" defer></script>
|
||||
<!-- 轮播图容器 -->
|
||||
@ -46,7 +46,7 @@
|
||||
<div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
|
||||
<div id="sliderBtn"></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">
|
||||
@ -68,7 +68,7 @@
|
||||
<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">
|
||||
@ -84,7 +84,7 @@
|
||||
<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">
|
||||
@ -94,7 +94,7 @@
|
||||
</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">
|
||||
我渐渐的有些困，我问他这东西要搞多久
|
||||
@ -103,7 +103,7 @@
|
||||
<img class="h-16 w-32" src="../../img/picture.png" 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">
|
||||
他说要几个小时
|
||||
@ -112,7 +112,7 @@
|
||||
<img class="h-16 w-32" src="../../img/picture.png" 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">
|
||||
我给他倒了杯茶，就一个人去隔壁睡觉了
|
||||
@ -124,7 +124,7 @@
|
||||
</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">
|
||||
@ -149,7 +149,7 @@
|
||||
</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.png" alt=""/></li>
|
||||
@ -162,7 +162,7 @@
|
||||
<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>
|
||||
|
||||
@ -2,67 +2,67 @@
|
||||
|
||||
/* 设置页面背景色 */
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 设置页面内容区域的宽度和居中 */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 设置百度Logo的样式 */
|
||||
.logo {
|
||||
width: 320px;
|
||||
height: 120px;
|
||||
background-image: url("../../img/baidu.png");
|
||||
background-size: cover;
|
||||
margin: auto auto auto auto;
|
||||
width: 320px;
|
||||
height: 120px;
|
||||
background-image: url("../../img/baidu.png");
|
||||
background-size: cover;
|
||||
margin: auto auto auto auto;
|
||||
}
|
||||
|
||||
/* 设置搜索框的样式 */
|
||||
.search-box {
|
||||
width: 450px;
|
||||
height: 45px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
font-size: 16px;
|
||||
width: 450px;
|
||||
height: 45px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 设置搜索按钮的样式 */
|
||||
.search-button {
|
||||
background-color: #3385ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
font-size: 20px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
background-color: #3385ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
font-size: 20px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: #555;
|
||||
background-color: #555;
|
||||
}
|
||||
@ -3,93 +3,93 @@
|
||||
@tailwind utilities;
|
||||
|
||||
.li-img li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 25%; /*四列图片排列*/
|
||||
height: 175px;
|
||||
overflow: hidden;
|
||||
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%*/
|
||||
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;
|
||||
position: relative;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#carousel {
|
||||
@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
|
||||
@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
|
||||
}
|
||||
|
||||
#carousel img {
|
||||
position: absolute; /* 绝对定位 使图片堆叠 */
|
||||
width: auto; /* 设定大小 按比例缩放 */
|
||||
height: auto; /* 设定大小 按比例缩放 */
|
||||
transition: all .6s; /* 动画 */
|
||||
opacity: 0; /* 隐藏 */
|
||||
position: absolute; /* 绝对定位 使图片堆叠 */
|
||||
width: auto; /* 设定大小 按比例缩放 */
|
||||
height: auto; /* 设定大小 按比例缩放 */
|
||||
transition: all .6s; /* 动画 */
|
||||
opacity: 0; /* 隐藏 */
|
||||
}
|
||||
|
||||
.imgActive {
|
||||
opacity: 1 !important; /* 显示图片 最高优先级 */
|
||||
opacity: 1 !important; /* 显示图片 最高优先级 */
|
||||
}
|
||||
|
||||
/* 控制按钮的样式 */
|
||||
#leftArrow,
|
||||
#rightArrow {
|
||||
//position: absolute;
|
||||
//left: 5px;
|
||||
//top: 50%;
|
||||
//width: 25px;
|
||||
//height: 30px;
|
||||
//background-color: #eee;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
//align-items: center;
|
||||
//opacity: 0.7;
|
||||
//font-size: 20px;
|
||||
//cursor: pointer;
|
||||
//z-index: 1000;
|
||||
@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
|
||||
//position: absolute;
|
||||
//left: 5px;
|
||||
//top: 50%;
|
||||
//width: 25px;
|
||||
//height: 30px;
|
||||
//background-color: #eee;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
//align-items: center;
|
||||
//opacity: 0.7;
|
||||
//font-size: 20px;
|
||||
//cursor: pointer;
|
||||
//z-index: 1000;
|
||||
@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
|
||||
}
|
||||
|
||||
#rightArrow {
|
||||
//left: auto;
|
||||
//right: 5px;
|
||||
@apply left-auto right-5;
|
||||
//left: auto;
|
||||
//right: 5px;
|
||||
@apply left-auto right-5;
|
||||
}
|
||||
|
||||
#sliderBtn {
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
//bottom: 0;
|
||||
//display: flex;
|
||||
//justify-content: flex-end;
|
||||
//z-index: 1000;
|
||||
@apply absolute w-full bottom-0 flex justify-end z-10;
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
//bottom: 0;
|
||||
//display: flex;
|
||||
//justify-content: flex-end;
|
||||
//z-index: 1000;
|
||||
@apply absolute w-full bottom-0 flex justify-end z-10;
|
||||
}
|
||||
|
||||
.unitBtn {
|
||||
//width: 10px;
|
||||
//height: 10px;
|
||||
//background-color: #eee;
|
||||
//border-radius: 10px;
|
||||
//margin: 10px;
|
||||
//cursor: pointer;
|
||||
@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
|
||||
//width: 10px;
|
||||
//height: 10px;
|
||||
//background-color: #eee;
|
||||
//border-radius: 10px;
|
||||
//margin: 10px;
|
||||
//cursor: pointer;
|
||||
@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
|
||||
}
|
||||
|
||||
.btnActive {
|
||||
background-color: #4C98F7;
|
||||
background-color: #4C98F7;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user