活力广东首页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了活力广东首页相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>活力广东</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="active.css"/>
</head>
<body>
<!-- 背景图 -->
<img id="bg" src="img/bg.png" >
<!-- 头部logo及标题 -->
<header>
<img src="img/logo.png" >
<h1>广东旅游欢迎您</h1>
</header>
<!-- 主体图及动画效果 -->
<section>
<div class="fl">
<img src="img/visit.png" >
<img src="img/contract.png" class="dh1">
<img src="img/admin.png" class="dh1">
<img src="img/guide.png" class="dh2">
<img src="img/expo.png" class="dh2">
<img src="img/axam.png" class="dh1">
</div>
<div class="fr clear">
<img src="img/sjzx.png" class="dh1">
<img src="img/sina.png" class="dh1">
<img src="img/hall.png" class="dh1">
<img src="img/tencent.png" class="dh1">
<img src="img/traval.png" class="dh2">
<img src="img/weico.png" class="dh2">
</div>
</section>
<!-- 尾部版权 -->
<footer>
<div>
<img src="img/serial.png" >
</div>
</footer>
</body>
</html>
*{
margin: 0 auto;
padding: 0 auto;
}
/*背景图响应式*/
@media screen and (min-width: 1400px) {
#bg{
width: 100%;
height: 100%;
position: fixed;
}
}
@media screen and (max-width: 1400px) and (min-width: 600px) {
#bg{
width: 100%;
height: 85%;
position: fixed;
}
}
@media screen and (max-width: 600px) {
#bg{
width: 100%;
height: 100%;
position: fixed;
}
}
/*整体内容响应式*/
@media screen and (max-width: 600px) {
header{
width: 80%;
position: relative;
padding-top: 60px;
}
header img{
width: 17%;
height: 45px;
position: relative;
}
header h1{
font-size: 2rem;
position: relative;
color: white;
top: -10px;
}
section{
width: 80%;
margin: 0 auto;
position: relative;
overflow: hidden;
top: 0;
}
section img{
height: 104px;
}
section .fl{
width: 100%;
float: left;
}
.fl img:nth-child(2n-1){
width: 62%;
}
.fl img:nth-child(2n){
width: 34%;
}
section .fr{
width: 100%;
float: right;
}
.fr img:nth-child(2n-1){
width: 34%;
}
.fr img:nth-child(2n){
width: 62%;
}
footer{
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
}
footer img{
width: 96%;
}
}
@media screen and (min-width: 600px) {
header{
width: 1092px;
padding-top: 100px;
position: relative;
margin: 0 auto;
height: 56px;
}
header h1{
position: relative;
color: white;
left: 107px;
top: -60px;
}
section{
width: 892px;
position: relative;
margin: auto;
margin-top: 56px;
overflow: hidden;
}
.fl{
width: 446px;
float: left;
}
.fr{
width: 446px;
float: right;
}
.fr img:nth-child(2n-1){
width: 162px;
height: 139px;
}
.fr img:nth-child(2n){
width: 278px;
height: 139px;
}
footer{
width: 464px;
margin: 0 auto;
position: relative;
top: 150px;
}
}
/*动画效果*/
section img:hover{
animation: wendy 0.6s linear;
}
@keyframes wendy{
0%{
transform: translateY(0);
}
25%{
transform: translateY(-40px);
}
50%{
transform: translateY(0);
}
75%{
transform: translateY(-20px);
}
100%{
transform: translateY(0px);
}
}
.dh1{
animation: d1 0.5s linear;
}
@keyframes d1{
0%{
transform: scale(1.1,1.1);
}
25%{
transform: scale(0.9,0.9);
}
50%{
transform: scale(1.1,1.1);
}
75%{
transform: scale(0.9,0.9);
}
100%{
transform: scale(1,1);
}
}
.dh2{
animation: d2 0.5s linear;
}
@keyframes d2{
0%{
transform: translateX(10px);
}
25%{
transform: translateX(-10px);
}
50%{
transform: translateX(10px);
}
75%{
transform: translateX(-10px);
}
100%{
transform: translateX(0px);
}
}
以上是关于活力广东首页的主要内容，如果未能解决你的问题，请参考以下文章