web前端-王者荣耀官网

目录

分享一下之前写的王者荣耀的官网页面

一、头部导航栏

我就按照截图一次和大家说一下，首先是顶部的导航栏部分，这一部分在我之前的博客中详细的说过，这里就不细说了

二、隐藏下拉框导航栏

下面这一部分是隐藏的导航栏区域，主要就是hover上面导航栏区域，出现这样一个隐藏的下拉框导航栏，隐藏的导航栏里面的布局也是通过ul，li去实现的 ，主要注意格式的设置即可

1、 效果展示

2、HTML部分代码

 

            

                

                    版本介绍
                    游戏介绍
                    英雄资料
                    爆料站
                    世界观体验站
                    游戏壁纸
                
                

                    攻略中心
                    开放素材库
                    内容共创平台
                
                

                    KPL
                    世界冠军杯
                    挑战者杯
                    全国大赛
                    女子公开赛
                    K甲联赛
                    高校联赛
                    全民赛
                    赛事数据
                
                

                    荣耀传承
                    王者文化站
                    万千世界
                    星光殿堂
                    IP共创计划
                    商户特权
                    龙翼王者卡
                
                

                    创意互动营
                    王者营地
                    微信圈子
                    官方微博
                    微信公众号
                    手Q订阅号
                
                

                    腾讯游戏防沉迷
                    成长守护平台
                    对局环境情报站
                    客服专区
                    礼包兑换
                    自动服务
                
                

                    王者荣耀世界
                    代号破晓
                    代号启程
                
            
        

3、 CSS部分代码

/* 二级隐藏下拉框导航栏 */
.second-nav{
  position: absolute;
  top: 83px;
  left: 0;
  width: 100%;
  background: #000;
  background: rgba(0,0,0,0.7);
  z-index: 3;
  transition: all .3s ease; /* ease快启动慢停止 */
  overflow: hidden;
  height: 0; 
  /* height: 285px; */
  box-sizing: border-box;
}
.second-nav>ul{
  width: 890px;
    height: 240px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 15px;
    padding-bottom: 30px;
    padding: 15px 0 30px 114px;
}
.second-nav>ul>li{
  float: left;
    display: inline;
    width: 110px;
    padding: 2px 2.5px 0;
    text-align: center;
    
}
.second-nav>ul>li>a{
  height: 30px;
    line-height: 30px;
    display: block;
    padding: 0;
    font-size: 14px;
    color: #c9c9dd;
}
/* 隐藏导航栏里的a标签hover时要出现的效果 */
.second-nav>ul>li>a:hover{
  color:rgb(243,194,88) ;
  text-decoration: underline;
}
/* hover时出现隐藏二级导航条 */
header:hover  >.second-nav{
  height: 285px;
}

三、设置a标签实现的一个跳转

  .ad{
    display: block;
    height: 450px;
    width: 1300px;
  
  }

四、轮播图及诸葛四图区域

轮播图的话我是用的插件去实现的，具体的用法大家可以去官网了解一下，右边的下载游戏等五个图是利用精灵图位置移动实现的，具体的精灵图可以在官网找到，下面的诸葛亮等四个图需要注意的一点是hover图片的时候，图片会放大，这里也是用到了:scale()

1、效果展示

2、HTML部分代码

    

      

        

          

          

          

          

          

        
        

        
        

        
      
      

        英雄羁绊短片
        夏季赛周更佳
        王者炸麦了
        荣耀大话王
        热门打法
      
    
    

      
      

        
热门
        
新闻
        
公告
        
活动
        
赛事
        ···
      
      
      

        

          
王者荣耀夏日直播节福利
          

            公告
            7月21日全服不停机更新公告
            07/20
          
          

            热门
            大神带你直击英雄调整关键点！
            07/20
          
          

            热门
            B站“征服者杯”主播对抗赛火热来袭！
            07/15
          
          

            热门
            大神带你直击英雄调整关键点！
            07/15
          
          

            热门
            互动小任务第15期-元歌皮肤设计大赛总决选语音奖励方案票选开启
            07/15
          
          

            热门
            大神带你直击英雄调整关键点！
            07/14
          
          

            热门
            互动小任务第15期-元歌皮肤设计大赛总决选语音奖励方案票选开启
            07/14
          
        
      
    
    

      
      
      
      
      
    
    
    

      

        

        

        

        

      
    
  

3、CSS部分代码

main{
    margin: 0 auto;
    width: 1200px;
  }
  .news>.left{
      position: relative;
      float: left; 
    width: 604px;
    height: 342px;
    background-color: lightblue;
  }
  .news>.left>.images{
    position: absolute;
width: 3050px;
  }
.news>.left>.images>a>img{
    height: 298px;
    width: 604px;
    float: left;
}
/*swiper css*/
.swiper{
    height: 298px;
    width: 604px;
}
.swiper{
    /* --swiper-theme-color: #ff6600;设置Swiper风格 */
    --swiper-navigation-color: rgba(30, 30, 30, 0.3);/* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;/* 设置按钮大小 */            
    overflow: hidden;
}
.swiper-wrapper img{
    height: 298px;
    width: 604px;
}
/* 轮播文字区域 */
.title{
    position: absolute;
    height: 44px;
    background-color: #000;
    width: 100%;
    bottom: 0px;
    /* display: flex; */
}
.title>a{
    display: inline-block;
    width: 19%;
    height:44px ;
    color: #b1b2be;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
}
/* .title>.active{
    background-color: rgba(255, 255, 255, 0.15);
    color: #f3c258;
} */
.title>a:hover{
    background-color: rgba(255, 255, 255, 0.15);
    color: #f3c258;
}
/* center区域 */
.center{
    float: left;
    width: 360px;
        height: 342px;
        background-color: rgba(30, 30, 30, 0.85);
        overflow: hidden;
}
/* 菜单区域 */
.center>.menu{
    color: #b8b9c5;
    border-bottom: 1px solid #000;
     padding: 0 20px;
    box-sizing: border-box;
    width: 325px;
    height: 49px;
    margin-left:17px ;/*让黑 *** order线向右移动居中 */
}
.center>.menu>div{
    float: left;
    text-align: center;
    line-height: 49px;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    height: 35px;
    width: 48px;
    cursor: pointer;
    padding-bottom: 10px;/*让黄 *** order线下移 */
}
.center>.menu>div:hover{
    color: #f3c258;
    border-bottom: 3px solid #f3c258;
}
.center>.menu>a {
    /* color: #f3c258; */
    display: inline-block;
    color: #b8b9c5;
    text-decoration: none;
    width: 45px;
    height: 35px;
    text-align: center;
    line-height: 30px;
     margin-top: 10px;/*把省略号下移 */
}
/* .qwer{
    background-color: aqua;
    position: absolute;
}
.all-list{
    width: 100%;
} */
/* 菜单下的列表信息 */
.center>.all-list{ 
    width: 100%;
    
}
.headline{
    width:307px ;
    height:38px ;
}
.center>.all-list>.news-list{
    width: 360px;
    padding: 0 20px;
    box-sizing: border-box;
}
.center>.all-list>.news-list>a{
    text-decoration: none;
    color: #f3c258;
}
.center>.all-list>.news-list>.headline{
    display: block;
    height: 36px;
    font-size: 18px;
    background-color: #555;
    line-height: 36px;
    padding-left: 15px;
    margin: 13px 0 13px 0;
    color: #f3c258;
}
.all-list>.news-list>.list{
    font-size: 13px;
    padding: 2px 0;
}
.all-list>.news-list>.list>.text-icon{
    height: 16px;
    line-height: 16px;
    margin-top: 4px;
    padding: 0 3px;
    font-size: 12px;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: middle;
}
 .all-list>.news-list>.list>.icon-hot {
   float: left;
    color: orange;
    border: 1px solid orange;
}
.all-list>.news-list>.list>.icon-notice {
  float: left;
    color: red;
    border: 1px solid red;
} 
.all-list>.news-list>.list>a {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    width: 240px;
    overflow: hidden;
    /* 单行省略号 */
   word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #b8b9c5;
    /* background-color: palevioletred; */
} 
.all-list>.news-list>.list>.date {
    float: right;
    height: 20px;
    line-height: 20px;
    text-align: right;
    color: #f3c258;
}  
/* right区域 */
.right{
    position: relative;
    float: left;
    width: 236px;
    height: 342px;
    /* background-color: blue; */
}
.right>a{
    display: block;
    background-image: url(../img/main.img/sprite.png);
    width: 100%;
}
.right>a:nth-child(1){
    height: 128px;
    background-position:-1px -219px; 
}
.right>a:nth-child(2){
    height: 107px;
    background-position: -1px -350px; 
}
.right>a:nth-child(3){
    height: 107px;
    background-position: -1px -461px; 
}
.right>a:nth-child(4){
    background-image: url(../img/main.img/shiling.png);
    position: absolute;
    width: 53px;
    height: 68px;
   right: -58px;
   top: 0;
}
.right>a:nth-child(5){
    background-image: url(../img/main.img/fanchenmi.png);
    position: absolute;
    width: 75px;
    height: 67px;
   right: -79px;
   top: 73px;
}
.content4 {
    height: 134px;
    margin: 28px 0 34px 0;
    float: left;
    /* overflow: hidden; */
    /* padding-bottom: 30px; */
}
.content4 ul li {
    float: left;
    overflow: hidden;
    margin-right: 12px;
    width: 291px;
    height: 134px;
}
.content4 ul li a {
    display: inline-block;
    width: 291px;
    height: 134px;
    transition: all 0.4s;
}
.content4 ul li a:hover {
    transform: scale(1.1)  /* scale缩放属性 */
}
.content4 ul li:nth-of-type(1) a {
    background: url(../img/main.img/zg.jpg);
}
.content4 ul li:nth-of-type(2) a {
    background: url(../img/main.img/lb.png);
}
.content4 ul li:nth-of-type(3) a {
    background: url(../img/main.img/jc.jpg);
}
.content4 ul li:last-of-type a {
    background: url(../img/main.img/ss.jpg);
}
.content4 ul li:last-of-type {
    margin-right: 0;
}

五、内容中心区域

这一部分的话，需要注意的点就是在hover图中的每张图片的时候，会出现一个黑色透明阴影部分，这个效果的实现需要定位一个和图片同样大小的黑 *** 域，只不过图片将其覆盖住了，我们在hover图片的时候，给图片设置一个透明，就可以实现我们所要的效果。

1、效果展示

2、HTML部分代码

   
  

    
    

      

        
        
内容中心更多
        
        

          
精品栏目
          
赛事精品
          
英雄攻略
        
        
        

          
最新
          
马菠萝奇闻录
          
狄仁杰封神榜
        
        
        

          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【马菠萝奇闻录】第49期:急!宫本学会了，阿通哪里领?!
            
          
          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【狄仁杰封神榜】第91期冷枪难躲冷箭难防快来调查子弹的真相
            
          
          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【狄仁杰封神榜】第90期锁定透视守护峡谷草丛!
            
          
          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【马菠萝奇闻录】第48期:职业和国服选手都在用的超神设置
            
          
          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【马菠萝奇闻录】第47期:我也不想出形昭啊，可他是老六误!
            
          
          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【狄仁杰封神榜】第89期锁定透视守护峡谷草丛!
            
          
          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【狄仁杰封神榜】第88期无视野锁定峡谷“爱你”科技版
            
          
          

            

              

              
            
            

              
              

                7840
                
2022-06-20
              
            
            【马菠萝奇闻录】第45期:英雄持性放大，他们原来还有不—样的
            
          
        
      
      

        
        
英雄/皮肤更多
        

          
最新英雄
          
最新皮肤
          
周免英雄
        
        

          
          
新英雄：戈娅
          上线时间：2022.06.23
        
        

          

            桑启
          
          
          

            霏
          
          
          

            金蝉
          
          
          

            云樱
          
          
        
      
    
  

3、CSS部分代码

.cen{
    width: 1215px;
    overflow: hidden;
}
.cenLeft {
    position: relative;
    height: 510px;
    width: 872px;
    float: left;
}
/* 内容前的小符号 */
.cenLeft>.i1{
    position: absolute;
    top: 12px;
    left:820px;
    width: 18px;
    height:18px;
    background: url(../img/main.img/sprite.png) -250px 3px;
    /* background-color: pink; */
}
/* 更多前的小符号 */
.cenLeft .i2{
    position: absolute;
    top: 3px;
    left:0px;
    width: 30px;
    height: 30px;
    background: url(../img/main.img/sprite.png) 0px -100px;
    /* background-color: pink; */
}
.cenLeft h4 {
    font-size: 22px;
    height: 45px;
    line-height: 45px;
    margin-left: 26px;
}
.cenLeft h4 span {
    float: right;
    color: #999;
    font-size: 14px;
}
/* 精品栏目 */
.cenLeftTop {
    width: 100%;
    overflow: hidden; /*这里可以解决li浮动后带来的ul高度塌陷问题，清除浮动 */
}
.cenLeftTop li {
    float: left;
    width: 290px;
    height: 35px;
    background-color: #f5f5f5;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #999;
    cursor: pointer;
}
.cenLeftTop>li+li{
    border-left: 1px solid #ccc; 
}
/* .cenLeftTop>li:first-child {
    border-bottom: 3px solid #f3c258;
    color: #333333;
} */
.cenLeftTop>li:hover{
    border-bottom: 3px solid #f3c258;
    color: #333333;
    height: 32px;
}
/* 最新 */
.cenLeftCen {
    height: 43px;
    /* position: relative; */
}
.cenLeftCen li {
    float: left;
    border: 1px solid #e5e5e5;
    padding: 3px 12px;
    border-radius: 10px;
    color: #333;
    font-size: 14px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: #f5f5f5;
    cursor: pointer;
}
.cenLeftCen>li:hover{
    background-color: #f3c258;
    color: #fff;
}
/* ? */
/* .cenLeftBot1{
    position: absolute;
    left: 0;
    top:40px;
    display: none;
}
.mk:hover+.cenLeftBot1{
    display: block;
}
.cenLeftBot1>li{
    margin: 0;
    padding: 0;
    background: none;
    border: none;
} */
/* 底部视频 */
.cenLeftBot>li {
    float: left;
    width: 209px;
    height: 175px;
    cursor: pointer;
    margin: 0 12px 30px 0;
    position: relative;
}
.cenLeftBot>li:nth-of-type(4n) {
    margin: 0 0 30px 0;
}
/* .cenLeftBot li:hover {
    background-color: #fff;
} */
.cenLeftBot li .ship {
    width: 209px;
    height: 125px;
    position: relative;
    transition: all 0.3s;
}
/* .cenLeftBot li img:hover .ship {
    background: url(./img/index.png) no-repeat;
    background-position: -192px -64px;
} */
/* 可以理解为图片下层的颜色，hover时透明度发生改变，不设置其的话，hover时透明度变化是白色的 */
.zhezhao {
    position: absolute;
    width: 209px;
    height: 125px;
    background-color: rgba(0, 0, 0, 1);
}
/* 图片上的播放按钮 */
.zhezhao1 {
    position: absolute;
    top: 40px;
    left: 85px;
    width: 45px;
    height: 45px;
    background: url(../img/main.img/sprite.png) -192px -64px;
    /* background-color: pink; */
    /* background-position: -192px -64px; */
}
/* hover到图片透明度变化 */
.cenLeftBot li .ship:hover {
    opacity: 0.3;
}
.cenLeftBot li .ship>img {
    width: 100%;
    height: 100%;
}
/* 包日期和播放量的盒子 */
.cenLeftBot li .ship>div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 188px;
    height: 22px;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    background-color: rgba(0, 0, 0, 0.6);
}
/* 播放量 */
.cenLeftBot li .ship>div>span {
    display: block;
    float: left;
    background: url(../img/main.img/sprite.png) -256px -59px no-repeat;
    /* background-position: -256px -59px; */
    padding-left: 15px;
}
/* 日期 */
.cenLeftBot li .ship>div>h4 {
    line-height: 22px;
    height: 22px;
    float: right;
    font-weight: 400;
    font-size: 12px;
}
/* 多少期的文字介绍 */
.cenLeftBot>li>span {
    display: block;
    font-weight: 400;
    font-size: 14px;
    width: 212px;
    height: 40px;
    padding-top: 10px;
    /* line-height: 40px; */
}
/* 英雄、皮肤右侧部分 */
.cenRight {
    position: relative;
    width: 295px;
    height: 528px;
    float: right;
} 
.cenRight .i3{
    position: absolute;
    top: 12px;
    left:0px;
    width: 30px;
    height:30px;
    background: url(../img/main.img/sprite.png) 0px -146px;
    /* background-color: pink; */
}
.cenRight .i4{
    position: absolute;
    top:12px;
    left:245px;
    width: 18px;
    height:18px;
    background: url(../img/main.img/sprite.png) -250px 3px;
    /* background-color: pink; */
}
.cenRight h4 {
    font-size: 22px;
    height: 45px;
    line-height: 45px;
    margin-left: 25px;
}
.cenRight h4 span {
    float: right;
    color: #999;
    font-size: 14px;
}
.hero {
    width: 101%;
    overflow: hidden;
    margin-bottom: 20px;
}
.hero li {
    float: left;
    width: 98px;
    height: 32px;
    background-color: #f5f5f5;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #999;
    cursor: pointer;
}
.hero>li+li {
    border-left: 1px solid #ccc;
}
/* .hero>li:first-child {
    border-bottom: 3px solid #f3c258;
    color: #333333;
} */
.hero>li:hover{
    border-bottom: 3px solid #f3c258;
    color: #333333;
    height: 29px;
}
.heroImg {
    width: 293px;
    height: 215px;
    border: 1px solid #ccc;
    border-radius: 2px;
} */
.heroImg img {
    display: block;
    /* float: left; */
     width: 294px;
    margin: -1px 0 0 -1px;
} 
.heroImg h4 {
    font-size: 18px;
    height: 27px;
    line-height: 27px;
    margin: 8px 0 0 10px;
}
.heroImg span {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
}
.heroImg2 {
    margin-top: 10px;
}
.heroImg2 img {
    position: relative;
    z-index: 66;
    float: left;
    margin-right: 7px;
    /* background-color: rgba(0, 0, 0, 1); */
}
.heroImg2 img:last-child {
    margin-right: 0;
}
.yy>span{
    position: absolute;
    top:40%;
    left:30% ;
    display: inline-block;
    color: #f3c258;
    text-align: center;
    font-size: 14px;
 }
 /* 黑色是被图片盖住了，所以hover时给图片加一个透明度，就能实现图中所示效果 */
.yy {
    position: absolute;
    width: 68px;
    height: 173px;
    background-color: rgba(0, 0, 0, 1);
}
.yy2{
    left:75px ;
}
.yy2>span{
    left: 40%;
}
.yy3{
    left:150px ;
}
.yy4{
    left:225px ;
}
.heroImg2 .yy+img:hover {
    opacity: 0.2;
    cursor: pointer;
    transition: opacity 0.5s;
}

六、小妲己区域

这里主要用到的知识点就是固定定位和精灵图的使用，css部分主要就是定位及精灵图的使用，还有伪元素hover的使用。还是挺需要耐心的，要注意的是在鼠标移入王者营地及下面同类型三张小图时，精灵图的位置要发生变化，王者营地的图要变成另一张金色的而且左方会出现一个框，框里放有二维码及文字

1、效果展示

2、HTML部分代码

    

        扫一扫，立刻下载游戏~
    
    

        

            
        
        

            

                
                

                    扫码
                    关注官方微博
                    

                    获取
                    一手爆料及福利
                
            
        
        

            

                
                

                    扫码
                    关注官方微博
                    

                    获取
                    一手爆料及福利
                
            
        
        

            

                
                

                    扫码
                    关注官方微博
                    

                    获取
                    一手爆料及福利
                
            
        
        

            

                
                

                    扫码
                    关注官方微博
                    

                    获取
                    一手爆料及福利
                
            
        
    

3、CSS部分代码

/* 妲己右边fixed */
.rfix {
    position: fixed;
    width: 254px;
    height: 494px;
    /* background-color: skyblue; */
    top: 0;
    right: 0;
    z-index: 1;
}
.rfix .huli {
    position: absolute;
     top: 187px;
     left: 25px;
    z-index: 2;
    width: 165px;
    height: 145px;
    background: url(../img/daji.img/huli.png);
    cursor: pointer;
}
.rfix .huli span {
    display: block;
    position: absolute;
    top: 37px;
    left: 12px;
    width: 88px;
    height: 36px;
    font-size: 14px;
    text-indent: 2px;
    font-weight: bold;
    line-height: 18px;
    color: #62401b;
    overflow: hidden;
}
.rfix .r_zong {
    width: 117px;
    height: 233px;
    position: absolute;
    top: 332px;
    left: 86px;
}
.rfix .ma {
    width: 111px;
    height: 123px;
    background: url(../img/daji.img/r_all精灵图.png) no-repeat -242px -2px;
    padding: 3px;
}
.rfix .ma img {
    display: block;
    width: 111px;
    height: 110px;
}
.yd,
.wb,
.wx,
.sp {
    width: 117px;
    height: 38px;
    cursor: pointer;
    margin-top: 1px;
    position: relative;
}
.rfix .yd {
    background: url(../img/daji.img/r_all精灵图.png) -242px -134px;
}
.rfix .yd:hover {
    background: url(../img/daji.img/r_all精灵图.png) -242px -172px;
}
.rfix .wb {
    background: url(../img/daji.img/r_all精灵图.png) -122px -120px;
}
.rfix .wb:hover {
    background: url(../img/daji.img/r_all精灵图.png) -122px -240px;
}
.rfix .yd:hover .move_in,
.rfix .wb:hover .move_in,
.rfix .wx:hover .move_in,
.rfix .sp:hover .move_in {
    display: block;
}
.rfix .wx {
    background: url(../img/daji.img/r_all精灵图.png) -122px -160px;
}
.rfix .wx:hover {
    background: url(../img/daji.img/r_all精灵图.png) -122px -200px;
}
.rfix .sp {
    background: url(../img/daji.img/r_all精灵图.png) -122px 0;
}
.rfix .sp:hover {
    background: url(../img/daji.img/r_all精灵图.png) -122px -42px;
}
.move_in {
    position: absolute;
    width: 115px;
    height: 147px;
    background: url(../img/daji.img/r_all精灵图.png) no-repeat 0 -416px;
    /* background-color: pink; */
    padding-top: 7px;
    top: -66px;
    left: -116px;
    border: 1px solid #d9ad50;
    border-radius: 5px;
    display: none;
}
.move_in img {
    margin:0 0 6px 7px;
    /* display: block; */
    width: 101px;
    height: 100px;
}
.move_in p {
    width: 100%;
    height: 34px;
    line-height: 17px;
    color: #dcdcdc;
    font-size: 12px;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}
.move_in p span {
    color: #d9ad50;
}

七、底部区域

这一部分的话主要就是一些字体样式的设置以图片的引用

1、效果展示

2、HTML部分代码

3、CSS部分代码

footer {
    width: 100%;
    height: 362px;
    background: url(../img/footer.img/bg_footer.jpg);
    color: #666;
}
footer>.w2{
    margin: 0 auto;
    width: 1200px;  
}
footer .f-T {
    height: 80px;
    padding-top: 90px;
    border-bottom: 1px solid #ccc; 
}
footer .f-T>.footTop {
    height: 64px;
    background: url(../img/footer.img/spr.png) no-repeat ;
    cursor: pointer;
}
.footLeft {
    width: 508px;
    height: 86px;
    float: left;
}
footer .footRight {
    margin-top: 10px;
    float: right;
    width: 650px;
    height: 106px;
    font-size: 12px;
}

八、关于源码

有需要源码的朋友，私信