学校网页页面（简洁版）|学生作业_学校业务本内部首页设计-CSDN博客

本文链接：https://blog.csdn.net/m0_60200975/article/details/142134454

本章介绍的是简洁版学校主页面

下面是HTML的页面代码~~

HTML页面代码↓

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>school.html</title>
		<link rel="stylesheet" type="text/css" href="./css/school.css">
	</head>
	<body style="background-image: url(./img/background.jpg); background-size: 1000px auto;">
		<ul>
			<li>
				<a href="#"><b>-学校简介</b></a>
				<div class="box">
					<a href="#">沧州交通学院（Cangzhou Jiaotong College）位于河北省沧州市，是经教育部批准设立的全日制普通本科院校。学校前身是由北京交通大学于2008年举办的独立学院——北京交通大学海滨学院。</a>
				</div>
			</li>
			<li>
			    <a href="#"><b>-地址</b></a>
			    <div class="box dz">
					<a href="#">河北省沧州市黄骅市学院西路2009号</a>
				</div>
			</li>
			<li>
				<a href="#"><b>-开办院系</b></a>
				<div class="box kbyx">
					<a href="#">计算机与信息技术学院</a>
					<a href="#">机械与动力工程学院</a>
					<a href="#">轨道交通学院</a>
					<a href="#">土木建筑工程学院</a>
					<a href="#">电子与电气工程学院</a>
					<a href="#">艺术学院</a>
					<a href="#">外国语学院</a>
					<a href="#">化学与制药工程学院</a>
					<a href="#">通识教育学院</a>
				</div>
			</li>
			<li>
				<a href="#"><b>-学校特点</b></a>
				<div class="box yd">
						1. 师资力量： 学校师资力量雄厚，大部分教师来自北京交通大学，还有其他大学教授参与授课，教学质量有保障。
						2. 专业设置： 学校依托北京交通大学优势学科，开设有37个本科专业，以轨道交通类专业为特色，同时涵盖了工程类、信息技术类、管理类专业。
						4. 学习设备： 学校学习设备比较齐全，图书馆藏书丰富，为学生提供了良好的学习条件。
				</div>
				</li>
			</li>
			<li>
				<a href="#"><b>-学校网址</b></a>
				<div class="box wz">
					<a href="https://www.czjtu.edu.cn/">https://www.czjtu.edu.cn/</a>
				</div>
			</li>
		</ul>
		<a href="https://www.czjtu.edu.cn" class="logo">
			<img src="./img/logo.png" alt="沧州交通学院logo"/>
		</a>
	</body>
</html>

CSS页面代码↓

ul{
    height: 50px;
    list-style: none;
    line-height: 50px;
}
li{
    text-align: center;
    width: 150px; 
}
a{
    list-style-type:none;
    color: #555;
    display: block;
	text-decoration: none;
}
.box{
    background: linear-gradient(200deg,#e3c5eb, #a9c1ed);
    opacity: 0.9;
    height:0;
    overflow:hidden; 
    transition:all 1s;
}
a:hover{
    background-color: skyblue;
}
li:hover .box{
    height: 300px;
	width: 300px;
}
li:hover .dz{
    height: 50px;
	width: 300px;
}
li:hover .kbyx{
    height: 400px;
	width: 300px;
}
li:hover .yd{
    height: 300px;
	width: 450px;
}
li:hover .wz{
    height: 50px;
	width: 250px;
}
img{
	width: 500px;
	height: 0%;
	position: relative;
	top: 30%;
	left: 500px;
}
.logo{
	background-color: red;
	display: block ;
	width: 0px;
}

内容比较简洁，有需求或想法的同学可以联系我哦~~

实现效果↓