零基础学前端（六）HTML+CSS实战：模仿QQ官网首页

叁歲伎倆 2024-04-22 15:18 65阅读 0赞

> 1. 我前面已经将HTML 和 CSS讲解完成，希望初学者是跟着一步一步敲代码走过来的。
> 
> 2. 我个人觉得先不着急进入Javascript的学习，要将前面写样式，写布局的基础打好，所以我编写了本篇模仿QQ网站首页，请认真阅读。

## 一、确认目标 ##

我们要模仿[qq官网][qq]的首页。你可以点击去看看官网的样子，我将目标图片先贴在下面。

![dc2ba4b36e2f4b0d9f4cc75e88ede8ac.png][]

素材可以自己通过chrome开发者工具，拖拽出来。也可以直接下载我的源代码，将图片文件夹拿过来用。

## 二、分析拆解目标 ##

> 我将任务拆解成3个部分
> 
> 1. 头部head部分
> 
> 2. 主体main部分
> 
> 3. 底部footer部分

![01874d494969465198906fab32c4c0bc.png][]

### 1.1 先将欧阳娜娜的背景图铺满浏览器的屏幕 ###

> 首先看一下我的项目目录结构：img目录放欧阳娜娜图片、css放index.css文件

![1a0ae71f0f30436aa46a95626cf44e05.png][]

/*通配符号让所有标签的margin和padding为0*/
    *{ 
        padding: 0;
        margin: 0;
    }
    .box{
        width: 100%;
        height: 100vh;     /*100vh是指的可视区域的总高度*/
        background-image: url(../img/back.png);
        background-size: cover; 
        background-repeat: no-repeat;
    }

效果图如下

![26513276a6d845a1b0c271f215971d9f.png][]

### 1.2 详细讲解此处知识点 ###

#### (一)、css引入方式 ####

**内嵌样式**：之前的css样式写在 style标签里面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QQ-新不止步，乐不设限</title>
        <style>
            .box{
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
    
        </div>
    </body>
    </html>

**外部引入样式表：**

> href : 样式的路径 ./ 指当前目录
> 
> rel: rel的英文全称是relation，它的作用就是来说明本页面和链接到的页面的之间的关系  
> type：指类型 text/css 说明引入的文件是css文件

#### (二)、给div元素设置背景图片 ####

之前我们添加图片的方式

现在是用background-image属性设置背景图片

.box{
        width: 100%;
        height: 100vh; /*100vh是指的可视区域的总高度*/
        background-image: url(../img/back.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

属性解释

> **`background-image`** 属性用于为一个元素设置一个或者多个背景图像。
> 
> **`background-size`** 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
> 
> 1. 属性cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
> 
> 2. 属性contain：缩放背景图片以完全装入背景区，可能背景区部分空白  
>   
> **`background-repeat`** 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
> 
> 1. 属性no-repeat：图片不重复

### 2.1 写头部 head ###

主要是分析这个结构怎么写

> 分成三个步骤：
> 
> 1. 左半部分
> 
> 2. 右半部分
> 
> 3. head整体设置padding撑起来

![046e9abb98824c658d6dfa8f8b29f506.png][]

#### (一)、左半部分 ####

/* ============ head 左半部分 ========= */
    .head .headLeft{
        width: 200px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .head .headLeft  span{
        cursor: pointer;
    }
    /* 鼠标移入 变成蓝色 */
    .head .headLeft span:hover{
        color: #09f;
    }
    
    .head .headLeft .logoBox{
        display: inline-flex;
        flex-direction: row;
        align-items: center;
    }
    .head .headLeft .logoBox .logo{
        width: 24px;
        height: 24px;
    }

#### (二)、右半部分 ####

#### (三)、给head设置整体样式 ####

> 1. 让左右两部分对其显示（使用flex布局）
> 
> 2. 让整体上下撑起来
> 
> 3. 设置一个边框

.head{
        color: #fff;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 26px 60px;
        border-bottom: 1px solid hsla(0,0%,100%,.08);
    }

**知识点设置边框样式**

> hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
> 
> HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。
> 
>  *  **色相（H）**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
>  *  **饱和度（S）**是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
>  *  **亮度（L）** 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
>  *  **透明度（A）** 取值 0~1 之间， 代表透明度。

我做的效果图

![31d8c64e93c641759c1184c24116e7dd.png][]

###  ###

### 2.2 知识解释 ###

上面的代码中你应该注意到我经常使用的就是span标签和div标签，它们两个可以替代很多标签。

#### (一)、span和div的区别？ ####

span是行内元素，显示效果上是多个span标签内容，可以显示在一行

<span>黄河之水</span>
     <span>天上来</span>
     <span>奔流到海不复还</span>

![409e87eb874d420ea004f88a4144e724.png][]

而div标签是块级元素，显示效果上是多个div标签内容，都会独占一行

<div>黄河之水</div>
    <div>天上来</div>
    <div>奔流到海不复还</div>

![1220a97ccd5f4fd89c7e95af8386e1a1.png][]

**=》后面的标签如img、table、video 自己测试一下，探索知识也是种快乐**。

### 3.1 写主体main部分 ###

> 分成两个逻辑
> 
> 1. 先将 结构写好，设置好文字大小
> 
> 2. 之后调整位置：水平居中(用flex布局)，竖直方向偏下(用margin-top顶下来)

#### (一)、将两段文字结构先摆好、设置文字大小 ####

<div class="box">
            <div class="head">
                。。。省略
            </div>
             
            <div class="main">
                <p>看看QQ有什么新鲜事</p>
                <span>查看详情 > </span>
            </div>
        </div>

.main{
        color: #fff;
    }
    .main p{
        font-weight: 600;
        font-size: 28px;
    }
    .main span{
        color: #09f;
        font-size: 14px;
    }

![f4bcd7d6bde243d8a7cd9237de250ba3.png][]

#### (二)、调整位置 ####

.main{
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 622px;
    }

![a52de9fc0a24488996839dc591bcebe8.png][]

### 4.1 写footer部分 ###

> 分析footer部分：首先鼠标移入显示二维码和颜色的功能我们暂时不做，先将整体结构做出来，后面我再来优化一下。  
> 
> 
> 1. 我们先写一个图标+文字，后面的直接粘贴复制就可以

#### (一)、将写一个将图片大小、文字大小设置好 ，添加一个竖线 ####

.footer{
        display: flex;
        flex-direction: row;
    }
    .footer .item{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .footer .item img{
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }
    .footer .item span{
        font-weight: 400;
        font-size: 24px;
    }
    /*给竖线一个样式*/
    .footer .columnLine{
        width: 1.7px;
        height: 29px;
        background-color: #fff;
        opacity: 0.1; /*透明度*/
    }

![f4ba3c98b22a4b54b5f31b4793732fe9.png][]

#### (二)、复制类名为item的结构，将图片换掉，footer设置固定宽度，所有元素space-bettwen排列，footer整体居中 ####

<div class="footer">
                
                <div class="item">
                    <img src="./img/apple.png" />
                    <span>IOS</span>
                </div>
                <div class="columnLine"></div>
                
                <div class="item">
                    <img src="./img/android.png" />
                    <span>Android</span>
                </div>
                <div class="columnLine"></div>
                
                <div class="item">
                    <img src="./img/window.png" />
                    <span>Windows</span>
                </div>
                <div class="columnLine"></div>
                
                <div class="item">
                    <img src="./img/linux.png" />
                    <span>Linux</span>
                </div>
                <div class="columnLine"></div>
                
                <div class="item">
                    <img src="./img/apple.png" />
                    <span>masOS</span>
                </div>
    </div>

.footer{
        width: 1000px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 100px;
    }

![f6d15b9d3604495c9d336b0d2366cfd2.png][]

## 三、编写第二个模块 ##

看一下目标图片：左边是两个图片，上下结构， 右侧是一个视频，总体水平排列。接下来一步一步完成。

![743bc1bf8de947dda2c9cc8566eba7c0.png][]

### 1. 如何通过chrome开发者工具偷素材 ###

第一，打开咱们模仿的qq官网首页，之后按F12显示开发者工具栏，选中图片模块，再刷新一下页面，就可以看到请求回来的图片。

![3ab73c44855140c2aa2539fb3b52dfdd.png][]

第二：去下载右侧欧阳娜娜的视频

![7aa34dc4643a47b5a49e3e61bc2fd87a.png][]

![969f48ae6ff04fcea4717d837746c62e.png][]

### 2. 将第二段模块要素先放上去 ###

第二部分的css样式我也单独抽离成一个文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QQ-新不止步，乐不设限</title>
        
        <link href="./css/index.css" rel="stylesheet" type="text/css" />
        
        
        <link href="./css/second.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
         
         <div class="box"> 
            内容省略。。。
         </div>
       
         
         <div class="box2">
            
            <div class="leftBox2">
                <img class="xin" src="./img/box2Xin.png" alt="">
                <img class="yuYue" src="./img/box2YuYue.png" alt="">
            </div>
            
            <video class="rightVideo" src="./img/qqVideo.mp4"></video>
         </div>
    </body>

/*第二个模块的样式*/
    .box2{
        color: #fff;
        width: 100%;
        height: 100vh;
    }

### 3. 给每个元素设置宽高大小 ###

使用chrome的开发者工具查看内容大小

![d2761b54dfc549cb8317182a6d663118.png][]

/*第二个模块的样式*/
    .box2{
        color: #fff;
        width: 100%;
        height: 100vh;
    }
    .leftBox2{
    
    }
    .leftBox2 .xin{
        width: 219px;
        height: 104px;
    }
    .leftBox2 .yuYue{
        width: 164px;
        height: 52px; 
    }
    .rightVideo{
        width: 627px;
        height: 353px;
        border-radius: 10px;
    }

![a7d1553b0e0847a2abb0d9786229ddc6.png][]

### 4.调整位置 ###

> 1. 新不止步 乐不设限 和 QQ9预约 要上下排列
> 
> 2. 左右 水平排列对其

/*第二个模块的样式*/
    .box2{
        color: #fff;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .leftBox2{
        display: flex;
        flex-direction: column;
        margin-right: 180px;
    }
    .leftBox2 .xin{
        width: 219.22px;
        height: 104.39px;
        margin-bottom: 30px
    }
    .leftBox2 .yuYue{
        width: 164.41px;
        height: 52.19px; 
    }
    /* 右侧视频 */
    .rightVideo{
        width: 627px;
        height: 353px;
        border-radius: 10px;
    }

### 5. 播放视频 ###

> 1. video 标签里面要包裹 source标签，source标签用来指定播放视频的源
> 
> 2. 在video标签添加视频控件属性

<video controls class="rightVideo">
                <source src="./img/qqVideo.mp4" type="video/mp4" />
            </video>

## 四、源代码和素材 ##

[qqHomePage: 模仿的qq首页代码][qqHomePage_ _qq]

## 五、结束语 ##

目前这个小项目就结束了，html和css这个基础部分，其实还是需要练习的，这个部分写的简单干净，后面JavaScript的逻辑才会更清晰。

> 学习是一个缓慢的过程，你不可能在极短时间内完整掌握所有知识，认清自己是必要。
> 
> 学习编程需要大量练习，只有实践做实事，才能真正有所收获。

接下来，我们将把我们做的页面发布成网站，让任何可以上互联网的人观看，我认为当你学会发布网站，你将对前端开发有一个新的认识。

[零基础学前端（七）将HTML+CSS静态页面 发布成网站-CSDN博客][HTML_CSS_ _-CSDN]

[qq]: https://im.qq.com/index/
[dc2ba4b36e2f4b0d9f4cc75e88ede8ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3fe53810b3514dd29cec2f21bceb979e.png
[01874d494969465198906fab32c4c0bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/51c5eb073f5644618af590a5de3f4869.png
[1a0ae71f0f30436aa46a95626cf44e05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c9d85b93dcf24e5984e02d2142654bbe.png
[26513276a6d845a1b0c271f215971d9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/97b1d05d649b4266ae9884e15c58f6d2.png
[046e9abb98824c658d6dfa8f8b29f506.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7176c0e00260428eaa28c0c7f812255d.png
[31d8c64e93c641759c1184c24116e7dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5a180833fc334c9ca68404e0f357b4d7.png
[409e87eb874d420ea004f88a4144e724.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/27e55ad83c9a4939a26a16058e81913a.png
[1220a97ccd5f4fd89c7e95af8386e1a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/afc8cbc555f34294ab4693c3758c9c3b.png
[f4bcd7d6bde243d8a7cd9237de250ba3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/bd583f7d837d4cbf906b9c6c149534cf.png
[a52de9fc0a24488996839dc591bcebe8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/86d26f73d49c41db85514444ddbf64a0.png
[f4ba3c98b22a4b54b5f31b4793732fe9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0d5838cdac9b4b169daf6c0774275b9c.png
[f6d15b9d3604495c9d336b0d2366cfd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/150b95f3955d499bb819539ab1c35488.png
[743bc1bf8de947dda2c9cc8566eba7c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c11873df295343e99a10e3e87be3ed26.png
[3ab73c44855140c2aa2539fb3b52dfdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/4f91f3701c224a7c91bc138ce686aba8.png
[7aa34dc4643a47b5a49e3e61bc2fd87a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/52c403527eaa42e787f41d04060c699f.png
[969f48ae6ff04fcea4717d837746c62e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/793776b70b934dd8838c2ee03e08ad9a.png
[d2761b54dfc549cb8317182a6d663118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b349264d9b1f4ef8a9b6d9ef2b65af1e.png
[a7d1553b0e0847a2abb0d9786229ddc6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/500e006b02a64103b55d9572899b86ec.png
[qqHomePage_ _qq]: https://gitee.com/tyx_0/qq-home-page.git
[HTML_CSS_ _-CSDN]: https://blog.csdn.net/tengyuxin/article/details/133128530