前端实战项目：网易云静态页面 |
您所在的位置：网站首页 › 易云商城 › 前端实战项目：网易云静态页面 |
前端实战项目：网易云静态页面
|
前言
目前这个前端项目持续更新中~ 网易云静态页面——导航栏 Flex布局 文章目录 前言实现目标静态实现页面大致样子添加模糊的背景图添加图片下载客户端部分轮播图小圆点第一个小圆点变成红色以及当鼠标放上其他任一小圆点也变成红色左右按钮总代码 动态实现 实现目标
banner.html是网页结构的部分 banner.css是网页主要的样式 reset.css是网页重置的一些样式 本篇文章用到的图片均来自网易云原网页。 该部分主要由以下几个部分组成： 背景（banner）内容（content）左边内容轮播图部分（left）右边内容下载客户端部分（right）具体html结构： DOCTYPE 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; }显示如下： 在网易云原网站可以看到，每切换一张图片，它的背景图也跟着切换。下面随机选一张图片及其背景图。 图片： 显示如下： 同时删除left的背景颜色 显示如下： 需要用到原网页中的一张图片： 整个right就是上面那个背景，然后下载客户端那里是一个a标签（放上鼠标会显示小手）。 下载客户端 /* 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标签那部分时颜色就会变暗。 .content .right a:hover{ background: url(../images/download1.png) 0 -290px; }然后就是下载客户端下面那行字： 下载客户端 PC 安卓 iPhone WP iPad Mac 六大客户端 .content .right p{ font-size: 12px; color: #8d8d8d; margin: 10px auto; /* 居中 */ text-align: center; }显示如下： 添加css样式让其可视化并移动至相应的位置 .content .left{ position: relative; height: 285px; width: 730px; } .content .left .dotlist{ /* 浮动布局，让所有li元素在一行排列 */ display: flex; /* 让这个小圆点列表可视化 */ width: 200px; height: 20px; background-color: red; /* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */ position: absolute; /* 距离left底部5px */ bottom: 5px; /* 居中 */ left: 0; right: 0; margin: 0 auto; }显示如下： 原网页中的小圆点及后面的按钮等都是是通过下面这张图片来实现的： 显示如下： 第一个小圆点变成红色只需单独为其设置一个样式即可 .content .left .dotlist .dot.active, .content .left .dotlist .dot:hover{ background: url(../images/lunbotu.png) -16px -343px; }页面如下： 左右按钮用a便签来实现，将其变成块级元素，并给上一个背景图 下载客户端 PC 安卓 iPhone WP iPad Mac 六大客户端 left right .content .button{ /* 变成块级元素 */ display: block; width: 37px; height: 63px; /* 绝对定位，使其定位到相应的位置，同时设置content为相对定位 */ position: absolute; /* 居中显示 */ top: 0; bottom: 0; margin: auto 0; } .content .left-btn{ /* 让它到content的外面去 */ left: -68px; background: url(../images/lunbotu.png) 0 -360px; } .content .right-btn{ right: -68px; background: url(../images/lunbotu.png) 0 -508px; }页面如下： 页面如下： 之前写过一篇关于轮播图的文章，这里就当自己练习一下了，直接给出总代码 html DOCTYPE html> 网易云轮播图 下载客户端 PC 安卓 iPhone WP iPad Mac 六大客户端 css（仅给出在上面css基础上更改过的代码） .content .left .dotlist{ /* 浮动布局，让所有li元素在一行排列 */ display: flex; /* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */ position: absolute; /* 距离left底部5px */ bottom: 5px; /* 居中 */ left: 0; right: 0; margin: 0 auto; /* 上面那个居中是dotlist这个列表相对于left的居中，这里的center是dotlist的子元素相对于dotlist居中 */ justify-content: center; /* 让小圆点处于最上面的一层 */ z-index: 1000; } .content .left .piclist{ display: flex; overflow: hidden; } .up{ /* 设置z-index的元素一定要进行定位才行，默认值static也是不生效的 */ z-index: 100; } .content .left .piclist .pic{ position: absolute; } js // 获取小圆点 var dotList = document.getElementsByClassName("dot"); // 获取图片 var picList = document.getElementsByClassName("pic"); // 获取模糊背景 var bg = document.getElementsByClassName("banner"); // 获取左按钮 var btnLeft = document.getElementsByClassName("left-btn"); // 获取右按钮 var btnRight = document.getElementsByClassName("right-btn"); // 全局变量，索引 index = 0; // 清除active、up样式 var clearUp = function(){ for(var i = 0 ; i |
建立相关文件夹及文件 
背景：
在原网页中，当我们鼠标放在下载客户端时，它的颜色会变暗一点点，这个效果就是用上面两张图片做成的，可以发现下面那个下载客户端明显要暗一点。
然后让文字消失并重置a标签的样式
下面删除让其可视化部分的css代码。
删除a便签里的文本内容，同时在原网页中，当我们把鼠标放上左右按钮时，它们的背景会变暗一点，这同样是通过设置一个背景图来实现的。
到这里整个轮播图的静态页面就制作完成了，因为我之前做过轮播图，所以在这里也就当一个练习做一下。【本文地址】