1.CSSHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学校网站</title>
<link rel="stylesheet" href="../css/学校官方网站页面.css">
</head>
<body>
<div class="top">
<div class="logo">
<img src="img/image.png" alt="西安培华学院">
</div>
<div class="top-link">
<ul>
<li><a href="#">教育教学</a><span>丨</span></li>
<li><a href="#">走进培华</a><span>丨</span></li>
<li><a href="#">教师邮箱</a><span>丨</span></li>
<li><a href="#">学生邮箱</a><span>丨</span></li>
<li><a href="#">全景培华</a></li>
<li><a href="#"><img src="img/english.gif" alt="英语图标"></a></li>
</ul>
</div>
</div>
<div class="nav">
<ul>
<li><a href="#">教育教学</a>
<dl>
<dd><a href="#">教务管理系统</a></dd>
<dd><a href="#">学生信息</a></dd>
<dd><a href="#">审核评估网</a></dd>
<dd><a href="#">教师教学发展中心</a></dd>
</dl>
</li>
<li><a href="#">走进培华</a>
<dl>
<dd><a href="#">学校概况</a></dd>
<dd><a href="#">创始人</a></dd>
<dd><a href="#">理事长</a></dd>
<dd><a href="#">大事记</a></dd>
</dl>
</li>
<li><a href="#">科学研究</a>
<dl>
<dd><a href="#">科研管理中心</a></dd>
<dd><a href="#">社科普及</a></dd>
</dl>
</li>
<li><a href="#">创新创业</a>
<dl>
<dd><a href="#">盘古创新创业学院</a></dd>
</dl>
</li>
<li><a href="#">招生就业</a>
<dl class="aa">
<dd><a href="#">招生信息网</a></dd>
<dd><a href="#">云就业信息网</a></dd>
</dl>
</li>
<li><a href="#">党团建设</a>
<dl class="aa">
<dd><a href="#">党建网</a></dd>
<dd><a href="#">党委宣传部</a></dd>
<dd><a href="#">培华青年</a></dd>
<dd><a href="#">党委学工部</a></dd>
</dl>
</li>
</ul>
</div>
<div class="main">
<div class="dnews_left">
<div class="news_top">
<div class="top_left">
<span class="qt">新闻</span>动态
</div>
<div class="more">
<a href="#">更多>></a>
</div>
</div>
<div class="news_down">
<div class="down_left">
<a href="#"><img src="img/image1.png" alt="西安培华学院2024年招生简章"></a>
</div>
<div class="down_right">
<ul>
<li>
<span class="jjt"></span>
<a href="#">商丘学院程印学一行来校调研交流</a>
<span class="more1">2024-03-27</span>
</li>
<li>
<span class="jjt"></span>
<a href="#">组图 | 畅游培华·醉美春色</a>
<span class="more1">2024-03-27</span>
</li>
<li>
<span class="jjt"></span>
<a href="#">韩国驻西安总领事馆洪淳昌总领事一行莅临学校交流访问</a>
<span class="more1">2024-03-26</span>
</li>
<li>
<span class="jjt"></span>
<a href="#">学校参加陕西省2024届高校毕业生综合类春季联盟招聘会</a>
<span class="more1">2024-03-26</span>
</li>
<li>
<span class="jjt"></span>
<a href="#">仰恩大学狄俊安一行来校调研交流</a>
<span class="more1">2024-03-25</span>
</li>
<li>
<span class="jjt"></span>
<a href="#">学校举办“生命在于睡好”世界睡眠日专题讲座</a>
<span class="more1">2024-03-22</span>
</li>
<li>
<span class="jjt"></span>
<a href="#">电子科技大学成都学院来校调研交流</a>
<span class="more1">2024-03-22</span>
</li>
<li>
<span class="jjt"></span>
<a href="#">喜报:学校获陕西省高校校园文化建设优秀成果二等奖</a>
<span class="more1">2024-03-22</span>
</li>
</ul>
</div>
</div>
</div>
<div class="dnews_right">
<div class="news_top">
<div class="top_left">
<span class="qt">媒体</span>培华
</div>
<div class="more">
<a href="#">更多>></a>
</div>
</div>
<div class="news_down">
<ul>
<li><a href="#">西安培华学院:成立红色文化研究院 打造科研平台</a></li><span class="more">2024-03-22</span>
<li><a href="#">陕西省民办教育协会:西安培华学院“五心同筑”强化心理育人实效</a></li><span class="more">2024-03-21</span>
<li><a href="#">陕西省民办教育协会:西安培华学院:立足红色主题实践,提升学生思政课获得感</a></li><span class="more">2024-03-21</span>
<li><a href="#">三秦都市报:西安培华学院:以实践提升思政课获得感</a></li><span class="more">2024-03-21</span>
<li><a href="#">华人头条:西安培华学院“银龄”教师全国招聘公告</a></li><span class="more">2024-03-21</span>
<li><a href="#">国际在线:西安培华学院:思政课行走在田间地头 也活跃在宣讲舞台</a></li><span class="more">2024-03-21</span>
<li><a href="#">中国教育新闻网:西安培华学院:加强思政课教师队伍建设 提高思政课教学实效性</a></li><span class="more">2024-03-20</span>
</ul>
</div>
</div>
</div>
<div class="foot">
<div style="width: 21%; float: left; position: relative;">
<img src="img/image3.png" alt="图标">
<p class="bq_text" style="text-align: left;">版权所有©西安培华学院
<a href="#">陕ICP备09012325号-3</a>
</p>
</div>
<div class="frendslink">
<ul><span style="float: left;">友情链接:</span> <li><a href="#">中华人民共和国教育部</a> | </li>
<li><a href="#" >陕西省教育厅</a> | </li>
<li><a href="#" >中国大学生在线</a> | </li>
<li><a href="#" >学信网</a> </li>
</ul>
</div>
<div class="addrass">
<ul>
<li>
<p class="titadd"><span class="qt" style="line-height: 35px;">长安</span>校区</p>
<p class="addtext">地址:西安市长安区常宁大街888号<br>电话:029-85680000<br>邮编:710125</p>
</li>
<li style="margin-left: 20%;">
<p class="titadd"><span class="qt" style="line-height: 35px;">高新</span>校区</p>
<p class="addtext">地址:西安市高新区白沙路南段2号<br>电话:029-85680000<br>邮编:710065</p>
</li>
</ul>
</div>
</div>
</body>
</html>
2.CSS
*{
padding: 0;
margin: 0;
border: 0;
}
body{
width: 1280px;
height: 700px;
margin: 0 auto;
}
.top{
width: 1280px;
height: 60px;
}
.top .logo{
width: 205px;
height: 60px;
float: left;
}
.top .logo img{
width: 205px;
height: 60px;
float: left;
}
.top .top-link{
height: 60px;
float: left;
margin-left: 500px;
}
.top .top-link ul li{
float: left;
list-style: none;
}
.top .top-link ul li span{
margin: 0 5px;
}
.top .top-link ul li img{
margin-left: 8px;
}
.top .top-link ul li a{
line-height: 60px;
color: black;
text-decoration: none;
}
.nav{
width: 100%;
height: 50px;
background: #b81c22;
background-size: 1px 50px;
background-repeat: repeat-x;
}
.nav ul{
width: 1000px;
margin: 0 auto;
padding-left: 134px;
}
.nav ul li{
position: relative;
float: left;
list-style: none;
}
.nav ul li a{
font-family: "微软雅黑";
font-size: 18px;
text-decoration: none;
color: #FFF;
display: block;
height: 48.5px;
width: 140px;
line-height: 48.5px;
text-align: center;
}
.nav ul li a:hover{
color: #FF0;
border-bottom:2px solid #FFF ;
}
.nav ul li dl{
display: none;
position: absolute;
top: 30px;
left: 0px;
width: 600px;
padding-top: 12px;
}
.nav ul li .aa{
left: -100px;
}
.nav ul li dl dd{
float: left;
}
.nav ul li:hover dl{
display: block;
}
.nav ul li dl dd a{
color: #000;
display: block;
width: 150px;
font-size: 14px;
}
.nav ul li dl dd a:hover{
color: #785c18;
}
.main{
width: 1240px;
height: 400px;
margin-top: 20px;
background: url("img/image4.png") no-repeat;
background-size: cover;
padding: 0 20px;
}
.dnews_left{
float: left;
width: 65%;
}
.dnews_right{
float: right;
width: 31%;
}
.news_top{
line-height: 60px;
overflow:hidden;
border-bottom:1px solid #dcdada;
}
.news_top .top_left{
font-size: 24px;
color: #b81c22;
font-weight: bold;
float: left;
}
.qt{
border-bottom: 2px solid #b81c22;
line-height: 60px;
display: block;
float: left;
}
.news_top .more{
float: right;
color: #666666;
font-size: 14px;
}
.news_down{
margin-top: 25px;
}
.down_left{
width: 40%;
float: left;
}
.down_left img{
width: 100%;
max-height: 13em;
}
img {
vertical-align: middle;
}
.news_top .more a {
color: #666666;
text-decoration: none;
}
.down_right li{
margin-bottom: 10px;
overflow: hidden;
}
.down_right li a{
margin-bottom: 6px;
color: #333333;
font-size: 16px;
display: block;
overflow: hidden;
width: 75%;
float: left;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
}
.down_right li a:hover{
color: #b81c22;
}
.down_left p{
padding: 30px 30px 24px 30px;
color: #333333;
font-size: 16px;
position: relative;
line-height: 25px;
}
.down_right {
width: 55%;
float: right;
}
ul{
margin-top: 0;
margin-bottom: 10px;
list-style: none;
}
.more1{
font-size: 14px;
color: #666666;
float: right;
}
.more{
font-size: 14px;
color: #666666;
float: right;
margin-top: 8px;
}
.jjt {
display: block;
width: 8px;
height: 10px;
margin-top: 6px;
margin-right: 5px;
background: url("img/image2.png") no-repeat;
float: left;
}
.dnews_right li{
margin-bottom: 10px;
overflow: hidden;
width: 306px;
float: left;
}
.dnews_right li a{
color: #333333;
font-size: 16px;
display: block;
overflow: hidden;
width: 80%;
float: left;
text-overflow: ellipsis;
line-height: 30px;
white-space: nowrap;
text-decoration: none;
}
.dnews_right li a:hover{
color: #b81c22;
}
.dnews_right p{
padding: 30px 30px 24px 30px;
color: #333333;
font-size: 16px;
position: relative;
line-height: 25px;
}
.foot{
height: 280px;
background-color: #b81c22;;
}
.foot img{
margin-top: -17px;
}
.bq_text {
font-size: 14px;
line-height: 25px;
color: #fff;
position: absolute;
bottom: 20px;
left: 51px;
}
.foot a {
color: #eef4f9;
text-decoration: none;
margin-bottom: 20px;
}
.frendslink {
padding-left: 100px;
width: 70%;
float: right;
padding: 30px 0;
border-bottom: 1px solid #514949;
}
.frendslink ul span {
font-size: 16px;
color: #fff;
}
.frendslink li {
float: left;
color: #fff;
font-size: 14px;
}
.addrass {
padding-left: 100px;
width: 70%;
float: right;
margin-top: 40px;
line-height: 25px;
}
.titadd {
color: #fff;
line-height: 35px;
font-size: 16px !important;
margin-bottom: 25px;
}
.addrass li {
float: left;
}
.foot .qt {
border-bottom: 2px solid #b81c22;
line-height: 20px;
display: block;
float: left;
}
.addtext {
font-size: 14px;
color: #ffffff;
}
二.使用动画完成过渡+变换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡+变换效果</title>
<style>
body{
display: flex;
justify-content: left;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
width: 200px;
height: 200px;
border: 2px solid black;
position: relative;
animation: myFrame 3s infinite;
}
@keyframes myFrame{
0%{
transform: scale(1) translate(500px,0px) rotate(0deg);
background-color: red;
}
25%{
transform:scale(0.5) translate(500px,0px) rotate(90deg);
background-color: orange;
}
50%{
transform: scale(1.0) translate(500px,0px) rotate(180deg);
background-color: yellow;
}
75%{
transform: scale(1.5) translate(500px,0px) rotate(270deg);
background-color: greenyellow;
}
100%{
transform:scale(1) translate(500px,0px) rotate(360deg);
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>