仿QQTIM静态网页完整版

    

    

    QQTIM-完整版

    

    

    

        

        

            

  • 首页
  •             

  • 下载
  •             

  • 动态
  •         

            

            

                

                      

    • 登录
    •                 

    • qq安全
    •                 

    • qq会员
    •             

                当前在线人数:227,763,015

            

            注册

        

        

        

        

        

        

    I'm QQ,每一天,乐在沟通

        

        

        

        

        

    沟通,是跨越
    千山万水的亲切声音

            

    无论何时何地,你都能自由享受QQ在各类
    终端上带来的高清通话,与好友一起想聊多久就聊多久

        

        

        

        

        

    沟通,是随时随地
    爽快收发

            

    通过QQ电脑和手机上的文件都能收发自如,
    更有手机在线查询,轻松你的工作和生活

        

        

        

        

    沟通,志同道合
    的他们放肆青春

            

    即使世界很大,你也不会孤单,在兴趣部落
    有和你一样的人,期待着和你一起发现精彩

     

            

        

        

            

                QQ 手机版

                QQ PC版

                QQ Mac版

                QQ Pad版

            

            

    Copyright @ 1998-2020  Tencent .All Rights Reserved


            

    腾讯公司 版权所有

        

    index.css

    /* reset  css */

    *{

        padding: 0;

        margin: 0;

    }

    body{

        font-size: 14px;

        font-family: "Microsoft YaHei",sans-serif;

    }

    ul{

        list-style: none;

    }

    a{

        color: #333;

        text-decoration: none;

    }

    /* model  css */

    /* .nav-class{

        /* 语义化标签的作用 */

        /* 1.1从开发角度考虑,是提高代码的可维护性,可读性 */

        /* 1.2从用户的角度去看,层次感的界面,提高用户感受 */

        /* 网站的发布者:seo  搜索引擎优化 */

        /* 轻松分析我们网站遇到的问题 */

        /* 语义化标签的兼容问题 */

        /* 1.1  IE9以下,不支持h5标签 */

     

    .qq-nav{

       height: 150px;

       background:url("../images/nav_bg.png");

       background-repeat: repeat-x;

       position: absolute;

       left: 0;

       top: 0;

       width: 100%;

    }

    .qq-nav .wrapper{

     width: 1080px;

     height: 75px;

     margin: 0 auto;

    }

    .qq-nav .wrapper .logo{

        width: 100px;

        height: 75px;

        background: url("..//images/nav_brand.png") no-repeat center;

        float: left;

    }


     

    .qq-nav .wrapper .nav{

        float: left;

    }

    .qq-nav .wrapper .nav li{

        float: left;

        font-size: 15px;

        line-height: 75px;

        margin-left: 20px;

    }

    .qq-nav .wrapper .nav li a{

        display: block;

        padding:0 20px;

    }

    .qq-nav .wrapper .nav li a.actice,

    .qq-nav .wrapper .nav li a:hover{

       background: #12b7f5;

    }

    .qq-nav .wrapper .register{

        float: right;

        height: 36px;

        width: 96px;

        text-align: center;

        line-height: 36px;

        font-size: 16px;

        background: #12b7f5;

        color:white;

        border-radius: 18px;

        margin-top: 22px;

    }

    .qq-nav .wrapper .other{

        float: right;

        width: 150px;

        height: 75px;

    }

    .qq-nav .wrapper .other ul{

        width: 250px;

    }

    .qq-nav .wrapper .other ul li{

        float: right;

        margin-left: 40px;

        margin-top: 14px;

    }

    .qq-nav .wrapper .other ul li a{

        font-size: 15px;

        text-shadow: 0 0 2px #333;

        height: 50px;

        line-height: 50px;

    }

    .qq-nav .wrapper .other span{

       text-shadow: 0 0 2px red;

        width: 200px;

        float: right;

    }

    .qq-banner{

       height: 880px;

       background:url("../images/banner-bg.jpg");

       padding-top: 150px;

    }

    .qq-banner img{

        display: block;

        margin:20px auto  0;

    }

    .qq-banner img:last-child{

        width:100%;

        /* 自适应,等比例缩放 图片有这个特殊效果 */

    }

    .qq-sound{

     

    }

    .qq-sound h1{

        display: block;

        margin-left: 150px;

        height: 300px;

        background-image: url("../images/sound-text.png");

        font-size: 0;

    }

    .qq-sound .bg{

        height: 500px;

        background-image: url("../images/sound-bg.jpg");

    }

    .qq-sound .content{

        height: 500px;

        width: 980px;

        margin:0 auto;

        position: relative;

    }

    .qq-sound .content .iphone{

        position: absolute;

        width: 700px;

        left:0px;

        top:-200px;

        height: 700px;

        background-image: url("../images/sound-phone.png");

        background-repeat: no-repeat;

     

    }

    .qq-sound  .content h2{

        float: right;

        padding-top: 100px;

        width: 500px;

        text-align: right;

        font-size:40px;

    }

    .qq-sound  .content p{

        float: right;

        font-size: 20px;

        width: 500px;

        text-shadow: 0 1px 1px #333;

        text-align: right;

    }

     

    .qq-file{}

    .qq-file .bg{

        height: 500px;

        background-image: url("../images/file-bg.jpg");

        background-repeat: no-repeat;

    }

    .qq-file .content{

        height:500px;

        width: 980px;

        margin: 0 auto;

        position: relative;

    }

    .qq-file .content .mac{

        width: 600px;

        height: 340px;

        background-image: url("../images/file-mac.png");

        background-repeat: no-repeat center/cover;

        position: absolute;

     

        right: -150px;

        top: 100px;

    }

    .qq-file .content h2{

        float: left;

        padding-top: 100px;

        width: 500px;

        text-align: left;

        font-size:40px;

    }

    .qq-file .content p{

        float: left;

        font-size: 20px;

        width: 500px;

        text-shadow: 0 1px 1px #333;

        text-align: left;

    }

    }

     

    .qq-interset{}

    .qq-interset .bg{

        height: 500px;

        background-image: url("../images/interest-bg.jpg");

    }

    .qq-interset .content{

        height: 300px;

        width: 980px;

        margin:0 auto;

        position: relative;

    }

    .qq-interset .content .phone{

        position: absolute;

        width: 350px;

        left:0px;

        top:0px;

        height: 500px;

        background: url("../images/interest-phone.png");

        background-repeat: no-repeat;

     

    }

    .qq-interset  .content h2{

        float: right;

        padding-top: 100px;

        width: 500px;

        text-align: right;

        font-size:40px;

    }

    .qq-interset .content p{

        float: right;

        font-size: 20px;

        width: 500px;

        text-shadow: 0 1px 1px #333;

        text-align: right;

    }

    .qq-footer{

        height: 300px;

        position: relative;

        left: 0;

        top: 220px;

        background-color: #666;

    }

    .qq-footer .content{

        position: absolute;

        left:450px;

        top:80px;

        width:1000px;

        color:#666;

    }

    .plats{

        position: absolute;

        left:120px;

        top:10px;

        width: 900px;

        height: 80px;

        margin: 0 auto;

        display: block;

        background-image: url("../images/footer.png");

        background-repeat: no-repeat;

        background-size: auto;

     

    }

    .plats a{

        float: left;

        text-align: center;

        font-size: 12px;

        color:white;

        padding-top: 100px;

        width: 80px;

        padding-left: 15px;

        margin:0 20px 0px -10px;

        /* margin:0 60px; */

    }

    .plats a:hover{

        color:#12b7f5;

    }

    .plats .plmb{

        background-position: -20px 0;

    }

    .qq-footer .content p{

        position: relative;

        left:150px;

        top:180px;

        color:white;

    }

    .qq-footer .content p:last-child{

        position: absolute;

        left:250px;

        top:200px;

        color:white;

    }

    demo地址http://www.lcycyos.cn/

    你可能感兴趣的:(仿QQTIM静态网页完整版)