活力广东首页

<!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);
    }
}

时间: 2024-10-05 13:28:38

活力广东首页的相关文章

首页关键词排名如何进入百度第一页-首页“九大金律”

从图中可以看到网站设计者将呼和浩特二手房版块内容放到了呼和浩特租房的最前面,而且整个版块位于首页的最上面,从中突出该版块辅助呼和浩特二手房这个主关键词,[呼和浩特子墨SEO]按照F型网站布局,右边的第一栏或者第二栏做一个热门二手房小版块最佳 4.网站首页的结构布局可以按照2:1的版块设置,将2的部分用来放与参加排名的目标目标关键词相关的内容.余下部分按关键词的主次程度依次依据从左到右,从上到下放相关内容哪里找富婆包养 哪里找富婆包养 哪里找富婆包养 哪里找富婆包养 哪里找富婆包养 哪里找富婆包养

白话(粤语)发音手机,广东话手机,白话手机,粤语手机

白话(粤语)发音手机,广东话手机,白话手机,粤语手机 一元秒杀手机 新手机上市 手机以旧换新 全网通4g手机 手机选号 新手机 手机最新款 苹果新手机 oppo手机怎么样 全网通双4g手机 手机影院 oppo新款智能手机 手机应用 红米手机1s 6s手机 卖手机 手机app制作 苹果手机6plus多少钱 手机性能排行榜 努比亚手机 乐视超级手机1s 1000元智能手机 乐视超级手机 全智能手表手机 华为手机怎么样 一元抢购手机 女性手机 修手机 200元智能手机 可弯曲手机 0首付买手机 手机哪

广东伊丽汇青创社区的开放成长记

11月4日晚上8点,丰收街创新创业社区的北大青少年创客教育中心,几位小朋友认真听着讲解员的介绍,在这里的无人机展厅,访客可以一览国内目前最先进的工业无人机和模型:不远处,则是多位来自佛山九小等学校的老师们,正以圆桌形式接受创客导师的专题培训. 与此同时,丰收街1号楼的中开院佛山孵化中心,一间办公室的灯还亮着,创业者张巍和4位来自深.莞的小伙伴们,争分夺秒解决白天拜访客户时遇到的问题.今年6月,他的团队落户丰收街并正式成立佛山道辰科技有限公司,专注于都市停车解决方案和室内导航解决方案研发. 这是丰

微信小程序UI------实现携程首页顶部的界面(弹性布局)

今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多. 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下: 主要是携程首页的四个模块: 代码: <view class="page"> <view class="page__bd"> <view class="section__nav"> <view class="left bor

Android实际开发中的首页框架搭建(二、首页框架实现)

本来这一篇是前两天就要写的,奈何事多缠身,推到今日,为自己的拖延感到愧疚... 上一篇大概把项目的结构完成了,下一步就是实现首页切换功能了 首先在activity目录下新建一个HomeActivity,作为承载多个fragment的容器 代码如下 1 /* 2 * * 3 * * ******************************************************* 4 * * 5 * * @文件名称:HomeActivity.java 6 * * @文件作者:ouyan

ectouch手机商城首页调用指定分类下的商品

ECTouch是国内市面上唯一开源的ECSHOP移动商城系统,为广大电商以最低的成本快速搭建移动商城.最近最一商城实例,手机版首页需要调用指定分类下的商品,ECtouch商城默认好像没有此调用方式,只能自己动手添加了. 方法如下: 1.打开mobile\include\apps\default\model\IndexModel.class.php 在最下面 } 之前添加以下代码 /**      * 获得指定分类下的商品      */      function assign_cat_good

网易首页模仿心得---导航栏CSS篇

不仅是CSS方面学习到很多技法,而且由于自己也懂一些SEO,对网易的一些CSS+SEO优化方法,也收获颇多!(本人也是平面设计师,很喜欢网易这类简约型的网页) 好了,在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器,之前用的editplus,感觉前者真的非常强大,很多插件会让网页开发的速度快很多,很多!! 我首先看了网易的重置CSS样式表和mata标签,其中mata标签中有一行 <meta name="robots" content="index,

安卓市场--首页2

在<首页1>这篇文章中,我们讲述了在首页中加入一个自定义的广告栏,下面我们将继续完成首页内容的添加. 在我们在想法中就是在广告栏下面是一个ListView用于显示比较新的或者是下载量比较高的app.下面我们就来做这一项工作. 1:首先,我们需要在activity_home.xml文件中添加如一个ListView作为显示列表.该ListView的布局就是在广告栏的下面即可. 我们来看一下代码: <RelativeLayout android:id="@+id/rl_apps&qu

dede 首页的常用标签

dede 首页的常用标签!1.织梦标签学习方法1)不要深究织梦的标签是织梦的开发者提供给我们的,我们只要使用就好了,不要深究,这超出我们学习使用织梦的范畴了,我们本课程不是搞二次开发!2)复制很重要使用dede 不要去背那些提供给我们的标签,我们只要会复制粘贴,对某个标签有疑问直接粘贴到模板里看看能得到什么结果就可以了!2.标签分类1)单标签{dede:标签名属性="值" ..../}{dede:include filename="head.htm"/}2)双标签{