QQ首页案例

一、知识点

①background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。scroll默认值。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分滚动时，背景图像不会移动。

②视觉插件stellar

视差滚动指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同速度移动，从而创造出3D效果。利用background-attachment属性实现。stellar.js是一个jQuery插件，能很容易地给网站添加视差滚动效果
引入js包

<script src="path/to/jquery/jquery.min.js"></script>

<script src="path/to/jquery.stellar.min.js"></script>

引用HTML和css样式

<div class="content" id="content1">

    <p>TEXT HERE</p>

</div>

<div class="content" id="content2">

    <p>TEXT HERE</p>

</div>

<div class="content" id="content3" data-stellar-background-ratio="0.5">

    <p>TEXT HERE</p>

</div>

<div class="content" id="content4" data-stellar-background-ratio="0.5">

    <p>TEXT HERE</p>

</div>

<div class="content" id="content5" data-stellar-background-ratio="0.5">

    <p>TEXT HERE</p>

</div>

<div class="content" id="content6" data-stellar-background-ratio="0.5">

    <p>TEXT HERE</p>

</div>

//css样式中设置content背景等

js 调用函数

$.stellar({

    horizontalScrolling: false,

    responsive: true

});

详细参数

二、思路

①页面基础结构

②导航部分

③展示部分

④语音部分、文件部分、兴趣部分

⑤底部部分

⑥使用插件stellar

⑦文件目录结构

三、代码实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>QQ首页</title>

    <link rel="stylesheet" href="css/index.css">

    <!-- [if lte IE 8] -->

        <script src="js/html5shiv.js"></script>

    <!-- endif -->

</head>

<body>

    <!-- 导航 -->

    <nav class="qq_nav">

        <div class="wrapper">

            <a href="#" class="logo"></a>

            <ul class="nav">

                <li><a href="#">首页</a></li>

                <li><a href="#">下载</a></li>

                <li><a href="#">动态</a></li>

            </ul>

            <a href="#" class="register">注册</a>

            <div class="other">

                <ul>

                    <li><a href="#">QQ安全</a></li>

                    <li><a href="#">QQ会员</a></li>

                    <li><a href="#">登录</a></li>

                </ul>

                <span>当前在线人数：288,597,005</span>

            </div>

        </div>

    </nav>

    <!-- 展示 -->

    <section class="qq_banner">

        <img src="data:images/banner-logo.png" alt="">

        <img src="data:images/banner-dowload.png" alt="">

        <img src="data:images/banner-list.png" alt="">

        <img src="data:images/banner-produst.png" alt="">

    </section>

    <!-- 语音 -->

    <section class="qq_sound">

        <h1>I'm QQ - 每一天，乐在沟通</h1>

        <div class="bg" data-stellar-background-ratio="0.3"></div>

        <div class="content">

            <div class="ipone"></div>

            <h2>沟通，是跨越<br>千山万水的亲切声音</h2>

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

        </div>

    </section>

    <!-- 文件 -->

    <section class="qq_file">

        <div class="bg" data-stellar-background-ratio="0.3"></div>

        <div class="content">

            <div class="mac"></div>

            <h2>沟通，是随时随地<br>爽快收发</h2>

            <p>通过QQ,电脑和手机上的文件都能收发自如，<br>更有手机在线查阅，轻松你的工作和生活。</p>

        </div>

    </section>

    <!-- 兴趣 -->

    <section class="qq_interest">

        <div class="bg" data-stellar-background-ratio="0.3"></div>

        <div class="content">

            <div class="phone"></div>

            <h2>沟通，是志同道合<br>的他们放肆青春</h2>

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

        </div>

    </section>

    <!--S footer-->

    <footer class="qq_footer">

        <img src="data:images/foot.png" alt="">

    </footer>

    <script src="js/jquery.min.js"></script>

    <script src="js/jquery.stellar.js"></script>

    <script src="js/index.js"></script>

</body>

</html>

html

/* =============reset css============== */

*{

    /*通配符选择器,案例特殊处理,实际开发少用  */

    margin: 0;

    padding: 0;

}

body{

    font-size: 14px;

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

    color: #333;

}

ul{

    list-style: none;

}

a{

    color: #333;

    text-decoration: none;

}

/* =============moudle css============= */

/* nav start */

.qq_nav{

    height: 150px;

    background: url("../images/nav-bg.png") repeat-x;

}

.qq_nav .wrapper{

    width: 1080px;

    height: 75px;

    margin: 0 auto;

}

.qq_nav .wrapper .logo{

    width: 100px;

    height: 75px;

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

    float: left;

}

.qq_nav .wrapper .nav{

    float: left;

}

.qq_nav .wrapper .nav li{

    float: left;

    font-size: 18px;

    line-height: 75px;

    margin-left: 20px;

}

.qq_nav .wrapper .nav a{

    display: block;

    padding: 0 20px;

}

.qq_nav .wrapper .nav a:hover{

    background: #12b7f5;

}

.qq_nav .wrapper .register{

    float: left;

    height: 36px;

    width: 96px;

    text-align: center;

    line-height: 36px;

    font-size: 16px;

    background: #12b7f5;

    color: #fff;

    border-radius: 18px;

    margin: 19px 0 0 200px;

}

.qq_nav .wrapper .other{

    float: left;

    width: 250px;

    height: 75px;

}

.qq_nav .wrapper .other ul{

    width: 250px;

}

.qq_nav .wrapper .other li{

    float: left;

    margin-left: 40px;

}

.qq_nav .wrapper .other a{

    font-size: 14px;

    text-shadow: 0 0 2px #333;

    height: 50px;

    line-height: 50px;

}

.qq_nav .wrapper .other span{

    float: right;

}

/* banner start */

.qq_banner{

    height: 1100px;

    background: url("../images/banner-bg.jpg") no-repeat center top;

    padding-top: 150px;

}

.qq_banner img{

    display: block;

    margin: 20px auto 0;

}

.qq_banner img:last-child{

    width: 100%;/* 自适应,等比例缩放 */

}

/* qq_sound Start */

.qq_sound h1{

    height: 300px;

    background:url("../images/sound-text.png") no-repeat center/cover;

    font-size: 0;

}

.qq_sound .bg{

    height: 500px;

    background: url("../images/sound-bg.jpg") no-repeat center/cover;

}

.qq_sound .content{

    height: 500px;

    width: 980px;

    margin: 0 auto;

    position: relative;

}

.qq_sound .content .ipone{

    position: absolute;

    left: 0;

    top: -200px;

    width: 700px;

    height: 700px;

    background: url("../images/sound-phone.png") no-repeat center top/cover;

}

.qq_sound .content h2{

    float: right;

    padding-top: 100px;

    width: 500px;

    text-align: center;

    font-size: 40px;

}

.qq_sound .content p{

    padding-top: 50px;

    float: right;

    width: 500px;

    text-align: center;

    font-size: 18px;

    text-shadow: 0 0 2px #333;

}

/* qq_file start */

.qq_file .bg{

    height: 500px;

    background: url("../images/file-bg.jpg") no-repeat center/cover;

}

.qq_file .content{

    height: 500px;

    width: 980px;

    margin: 0 auto;

    position: relative;

}

.qq_file .content .mac{

    position: absolute;

    right: -60px;

    top: 100px;

    width: 600px;

    height: 340px;

    background: url("../images/file-mac.png") no-repeat center top/cover;

}

.qq_file .content h2{

    float: left;

    padding-top: 100px;

    width: 500px;

    text-align: center;

    font-size: 40px;

}

.qq_file .content p{

    padding-top: 50px;

    float: left;

    width: 500px;

    text-align: center;

    font-size: 18px;

    text-shadow: 0 0 2px #333;

}

/* qq_interest start  */

.qq_interest .bg{

    height: 500px;

    background: url("../images/in-bg.jpg") no-repeat center/cover;

}

.qq_interest .content{

    height: 500px;

    width: 980px;

    margin: 0 auto;

    position: relative;

}

.qq_interest .content .phone{

    position: absolute;

    left: 0px;

    top: 0px;

    width: 344px;

    height: 500px;

    background: url("../images/in-phone.png") no-repeat center top/cover;

}

.qq_interest .content h2{

    float: right;

    padding-top: 100px;

    width: 500px;

    text-align: center;

    font-size: 40px;

}

.qq_interest .content p{

    padding-top: 50px;

    float: right;

    width: 500px;

    text-align: center;

    font-size: 18px;

    text-shadow: 0 0 2px #333;

}

/*footer 图片代替省略*/

/* 插件 */

.qq_sound .bg,.qq_file .bg, .qq_interest.bg{

    background-attachment: fixed;

}

css

$(function(){

    /**

     * 1.引入

     * 2.结构data-stellar-background-ratio="0.3"

     * 3.样式bg 需要background-attachment: fixed;

     * 4.初始化插件

     */

    $.stellar({

       horizontalScrolling: false,

       responsive: true

    });

});

四、效果展示

QQ首页案例的更多相关文章

Android（java）学习笔记213：开源框架post和get方式提交数据（qq登录案例）
1.前面提到Http的get/post方式 . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2.Android应用会经常使用http协议进行传输,网上会有很完善 ...
Android（java）学习笔记212：中文乱码的问题处理（qq登录案例）
1.我们在之前的笔记中LoginServlet.java中,我们Tomcat服务器回复给客户端的数据是英文的"Login Success","Login Failed&q ...
Android（java）学习笔记156：开源框架post和get方式提交数据（qq登录案例）
1. 前面提到Http的get/post方式 . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2. Android应用会经常使用http协议进行传输,网上会有很 ...
Android（java）学习笔记155：中文乱码的问题处理（qq登录案例）
1. 我们在之前的笔记中LoginServlet.java中,我们Tomcat服务器回复给客户端的数据是英文的"Login Success","Login Failed& ...
Android 仿QQ首页的消息和电话的切换，首页的头部(完全用布局控制)
Android 仿QQ首页的消息和电话的切换,首页的头部(完全用布局控制) 首先贴上七个控制布局代码 1.title_text_sel.xml 字体颜色的切换放到color文件夹下面 <?xm ...
【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
Android（java）学习笔记211：采用httpclient提交数据（qq登录案例）
1.Apache -Httpclient HttpClient 是 Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包 ...
Android（java）学习笔记210：采用post请求提交数据到服务器（qq登录案例）
1.POST请求: 数据是以流的方式写给服务器优点:(1)比较安全 (2)长度不限制缺点:编写代码比较麻烦 2.我们首先在电脑模拟下POST请求访问服务器的场景: 我们修改之前编写的logi ...
Android（java）学习笔记209：采用get请求提交数据到服务器（qq登录案例）
1.GET请求: 组拼url的路径,把提交的数据拼装url的后面,提交给服务器. 缺点:(1)安全性(Android下提交数据组拼隐藏在代码中,不存在安全问题) (2)长度有限不能超过4K(h ...

随机推荐

1. Spark SQL概述
1.1 什么是Spark SQL Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用它是将Hive SQL转换成 ...
python threading模块的Lock和RLock区别
首先了解这两者是什么. 以下说明参考自python官网 Lock:Lock被称为①原始锁,原始锁是一个②在锁定时不属于特定线程的同步基元组件,它是能用的最低级的同步基元组件.原始锁处于 "锁 ...
关于python、pip、anaconda安装的一些记录
写这篇博客是因为自己这段时间总是倒腾python的环境,其间倒腾崩了好几次.....无奈之下还是梳理一下. PYTHON 首在安装python3.6的之后,我安装了anaconda3,这样我的电脑上p ...
物流管理系统(SSM+vue+shiro)【前后台】
一.简单介绍项目该项目是属于毕业设计项目之一,有前台的用户下单.有司机进行接单.有管理员进行操作后台,直接进入主题毕设.定制开发联系QQ:761273133 登录主页: 手机号码+验证码登录或 ...
js的for循环中出现异步函数，回调引用的循环值始终是最后的值
一.问题今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { ...
MySQL5.7.16安装及配置
一.下载下载页面http://dev.mysql.com/downloads/mysql/ 选择系统平台后,点击download(根据系统选择64或32位) 二.配置 1.下载成功后,解压安装包到要 ...
C++线程同步与互斥之互斥体
抢红包练习第一步:在第一个文本框中输入一个值,比如1000: 第二步:点击抢红包,同时创建3个线程,每个线程循环进行抢红包的操作,每次抢50; 第三步:使用Mutex进行线程控制,当第一个文本框中的 ...
nginx 高并发配置参数
一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu ...
十七、存储过程&自定义函数详解
代码中被[]包含的表示可选,|符号分开的表示可选其一. 需求背景介绍线上程序有时候出现问题导致数据错误的时候,如果比较紧急,我们可以写一个存储来快速修复这块的数据,然后再去修复程序,这种方式我们用到 ...
I、Mac 下的Vue
Mac 下的Vue 1. 安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/i ...

QQ首页 案例

一、知识点

二、思路

三、代码实现

四、效果展示

QQ首页 案例的更多相关文章

随机推荐

热门专题

QQ首页案例

QQ首页案例的更多相关文章