教务系统界面

最新推荐文章于 2024-07-18 17:34:14 发布

不想飞翔的小鸟

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量541

点赞数 16

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_77300113/article/details/137175163

版权

HTML部分：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

</head>

<body>

<h1>西安工程大学教务系统</h1>

</div>

<ul>

<a href="">About</a>

<a href="#about">About</a>

<a href="#service">Services</a>

<a href="#contact">Contact</a>

</div></li>     

</ul>

</div>

<a class="title0" href="">教务处管理系统</a>

<a class="title0" href="">国家高等教育智慧教育平台</a>

<a class="title0" href="">实践教学管理平台</a>

<a class="title0" href="">在线教学平台</a>

<a class="title0" href="">在线课程中心</a>

<a class="title0" href="">中国工程教育专业认证协会</a>

<a href="">中国高等教育学生信息网</a>

</div>

<img

class="picture"

width="180px"

height="180px"

align="center"

src="../05.css布局/导航栏图片/image1.png"></a>

</div>

<img

class="picture"

width="180px"

height="180px"

align="center"

src="../05.css布局/导航栏图片/image2.png"></a>

</div>

<img

class="picture"

width="180px"

height="180px"

align="center"

src="../05.css布局/导航栏图片/image3.png"></a>

</div>

<img

class="picture"

width="180px"

height="180px"

align="center"

src="../05.css布局/导航栏图片/image4.png"></a>

</div>

<img

class="picture"

width="180px"

height="180px"

align="center"

src="../05.css布局/导航栏图片/image5.png"></a>

</div>

<img

class="picture"

width="180px"

height="180px"

align="center"

src="../05.css布局/导航栏图片/image5.png"></a>

<div class="text">该功能暂未开放</div>

</div>

<p>

关于我们<span> | </span>联系方式<span> | </span>给我留言<span> | </span>人才招聘

</p>

</div>

</body>

</html>

CSS部分：

/* 未开放的功能 */

.flex-item {

position: relative;

width: 50%;

}

.image {

display: block;

width: 100%;

height: auto;

}

.flex-item:hover .overlay {

bottom: 0;

height: 100%;

}

.text {

white-space: nowrap;

color: white;

font-size: 20px;

position: absolute;

overflow: hidden;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

}

.overlay {

position: absolute;

bottom: 100%;

left: 0;

right: 0;

background-color: #008CBA;

overflow: hidden;

width: 100%;

height: 0;

transition: .5s ease;

}

margin: 0;

}

.head{

background-color: rgb(55, 59, 58);

height: 220px;

}

.body{

background-color: rgb(107, 115, 218);

height: 440px;

}

.one{

width: 30%;

/* background-color: rgb(93, 135, 220); */

float: left;

height: 440px;

}

.two{

width: 70%;

background-color: rgb(251, 253, 251);

float: left;

height: 440px;

}

.foot{

background-color: rgb(13, 0, 6);

height: 120px;

text-align: center;

}

.top{

text-align: center;

height: 30%;

height: 120px;

background-image: url("../05.css布局/导航栏图片/image.png");

background-size:cover;

}

.bottom{

height: 70%;

background-color: rgb(109, 79, 172);

height: 100px;

}

/* 使标题文字居中 */

h1 {

position: absolute;

top: 5%;

width: 100%;

text-shadow: 0 0 3px #4738d0;

}

color: grey;

}

/* 导航栏 -------------------------------------------------*/

.bottom{

background-color:#2d354a;

width:100%;

height: 100%;

/* border-radius: 25px; */

box-shadow: 10px 10px 10px rgba(128,128,128,0.656);

}

.bottom ul {

width:100%;

height:64px;

text-align:center;

}

ul>li {

width:100px;

height:64px;

line-height:64px;

list-style: none;

display:inline-block;

}

ul li:hover{

background-color: aliceblue;

}

li a {

color: white;

font-size:25px;

text-decoration: none;

font-weight: 600;

text-shadow:10px 10px 8px rgba(214,190,190,0.42);

}

/* 导航栏 -------------------------------------------------*/

li{

list-style-type: none;

display:inline-block;

}

/* 鼠标悬停 */

[href]:hover{

color:white;

background-color: rgb(211, 236, 242);

background-size: 90px 45px;

}

color: aliceblue;

font-weight: bolder;

/* 11.文字阴影 */

text-shadow: 5px 5px 5px gainsboro;

/* 去除下划线 */

text-decoration:none;

}

.one > a{

font-size: 150%;

height: 40px;

background-color: aliceblue;

color: rgb(0, 5, 3);

font-weight: bolder;

display: block;

border: 11.5px solid rgb(50, 134, 190);

border-style: inset;

/* border-style: outset; */

}

.one > a:hover{

background-color: gray;

transition: 0.4s linear;

}

.two{

max-width: 975px;

height: 440px;

background-color: white;

/*1.定义弹性盒子 !!!*/

display:flex;

/*2.水平或垂直对齐 */

flex-direction:row;

/*3.多行处理 */

flex-wrap:wrap;

/*4.水平对齐 */

justify-content:center;

/*5.垂直对齐建议用它*/

align-items:center;

/*6.多行对齐 */

align-content:start;

}

.flex-item{

color: azure;

margin: 10px;

width: 300px;

height: 200px;

font-size: 20px;

background-color: rgb(254, 255, 255);

text-align:center ;

}

.picture:hover{

width: 200px;

height: 200px;

transition: linear;

box-shadow: 0px 0px 10px grey;

border-radius: 10px;

}

/* ----------------- ----------------------------------------*/

.navbar {

overflow: hidden;

background-color: #333;

}

/* 导航栏链接样式 */

.navbar a {

float:none;

font-size: 10px;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/* 设置下拉菜单样式 */

.dropdown {

float: left;

overflow: hidden;

}

/* 下拉菜单按钮样式 */

.dropdown .dropbtn {

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;

}

/* 下拉菜单内容样式 */

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 80px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

/* 下拉菜单链接样式 */

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

/* 鼠标悬停在下拉菜单上时修改样式 */

.dropdown-content a:hover {

background-color: #ddd;

}

/* 显示下拉菜单 */

.dropdown:hover .dropdown-content {

display: block;

}

/* ----------------- ------------------------------------*/

</style>

效果图：

不想飞翔的小鸟

关注

16
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
教务系统界面

<a class="title" href="">教学质量</a></li><li><a class="title" href="">艺术教育</a></li><li><a class="title" href="">教学研究</a>
复制链接

扫一扫

教务系统界面

“相关推荐”对你有帮助么？