前端实战项目：网易云静态页面——轮播图

该文章详细介绍了如何使用HTML和CSS静态实现网易云音乐首页的轮播图效果，包括背景图片、图片轮播、小圆点指示器和左右按钮的样式设计。通过CSS的Flex布局和背景图片定位，实现了页面的基本结构和交互效果。

前言

目前这个前端项目持续更新中~
网易云静态页面——导航栏
 Flex布局

文章目录

前言
实现目标
静态实现
动态实现

实现目标

在这里插入图片描述
建立相关文件夹及文件

banner.html是网页结构的部分
banner.css是网页主要的样式
reset.css是网页重置的一些样式

本篇文章用到的图片均来自网易云原网页。

该部分主要由以下几个部分组成：

背景（banner）
内容（content）
左边内容轮播图部分（left）
右边内容下载客户端部分（right）

具体html结构：

<!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>网易云轮播图</title>
    <link rel="stylesheet" href="./css/banner.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>
<body>
    <div class="banner">
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</body>
</html>

静态实现

页面大致样子

添加css代码：

/* reset */
body{
   
   
    padding: 0;
    margin: 0;
}

/* banner */
.banner{
   
   
    height: 285px;
    background-color: antiquewhite;
}

.content{
   
   
    /* 作为flex container开启弹性布局，目的是为了让left和right排列在一行 */
    display: flex;
    width: 984px;
    /* 上下外边距为0，左右自适应，也就是让它自动居中 */
    margin: 0 auto;
}

.content .left{
   
   
    height: 285px;
    width: 730px;
    background-color: aqua;
}

.content .right{
   
   
    height: 285px;
    width: 254px;
    background-color: aquamarine;
}

显示如下：在这里插入图片描述

添加模糊的背景图

在网易云原网站可以看到，每切换一张图片，它的背景图也跟着切换。下面随机选一张图片及其背景图。

图片：在这里插入图片描述
背景：

.banner{
   
   
    height: 285px;
    /* 添加背景 */
    background-image: url(../images/0.jpeg);
    /* 让其处于中心位置 */
    background-position: center center;
    /* 将图片放大，也就是让两边更加模糊 */
    background-size: 6000px;
}

显示如下：在这里插入图片描述

添加图片

            <div class="left">
                <ul class="piclist">
                    <li><a href="#" class="pic"><img src="./images/1-1.jpeg"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                </ul>
            </div>

/* reset */
body,ul,li{
   
   
    padding: 0;
    margin: 0;
}

ul{
   
   
    list-style: none;
}

/* banner */
.content .left .piclist .pic img{
   
   
    /* 调整图片大小 */
    width: 730px;
}

同时删除left的背景颜色

显示如下：在这里插入图片描述

下载客户端部分

需要用到原网页中的一张图片：
在这里插入图片描述
在原网页中，当我们鼠标放在下载客户端时，它的颜色会变暗一点点，这个效果就是用上面两张图片做成的，可以发现下面那个下载客户端明显要暗一点。

整个right就是上面那个背景，然后下载客户端那里是一个a标签（放上鼠标会显示小手）。

            <div class="right"><a href="#">下载客户端</a></div>

/* banner */
.content .right{
   
   
    background: url(../images/download1.png);
}

.content .right a{
   
   
    /* 将这个a标签改为块级元素从而可以设置其宽高 */
    display: block;
    /* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
}

显示如下：在这里插入图片描述
然后让文字消失并重置a标签的样式

/* banner */
.content .right a{
   
   
    /* 将这个a标签改为块级元素从而可以设置其宽高 */
    display: block;
    /* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
    /* 让文字消失 */
    text-indent: -9999px;
}

/* reset */
a{
   
   
    text-decoration: none;
}

这时“下载客户端”这段文字就消失了。

同时添加下面代码，当鼠标放在a标签那部分时颜色就会变暗。

.content .right a:hover{
   
   
    background: url(../images/download1.png) 0 -290px;
}

然后就是下载客户端下面那行字：

            <div class="right">
                <a href="#">下载客户端</a>
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>

.content .right p{
   
   
    font-size: 12px;
    color: #8d8d8d;
    margin: 10px auto;
    /* 居中 */
    text-align: center;
}

显示如下：
在这里插入图片描述

轮播图小圆点

            <div class="left">
                <ul class="piclist">
                    <li><a href="#" class="pic"><img src="./images/1-1.jpeg"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a></li>
                    <li><a href="#" class="pic"></a