web前端（三）

最新推荐文章于 2024-06-14 11:01:38 发布

晚风替我看朝夕

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量129

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/2301_78305580/article/details/138199640

版权

1.完成学校官方网站页面制作

<!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;">版权所有©西安培华学院&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
            <a href="#">陕ICP备09012325号-3</a>
            </p>
            
        </div>
        <div class="frendslink">
            <ul><span style="float: left;">友情链接：</span>  <li><a href="#">中华人民共和国教育部</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#" >陕西省教育厅</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#" >中国大学生在线</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#" >学信网</a>&nbsp;&nbsp;</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>

*{
    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;
}

2.使用动画完成过渡+变换效果

<!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>