网易云音乐 index 页面 html5+css3

最新推荐文章于 2024-03-03 21:08:21 发布
最新推荐文章于 2024-03-03 21:08:21 发布
阅读量514 收藏 2
点赞数 3
分类专栏： 前端学习总结 文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73968967/article/details/134193799
版权

整个页面技术：
1.div 嵌套 a,ol,li,dl,dt,dd 。
2.进行封装 html 和 css，组件化使用。
3.html分为头部和轮播图和主体部分，进行拼接。

效果图：a8abcecb48b144eda0326baff8ed0ad0.png

73d6e887dbf343188a0aa28bf7e27a3a.png 

页面代码 index.html :

<!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>网易云音乐index</title>
  <link rel="icon" href="./images/title.ico">
  <link rel="stylesheet" href="./CSS/common.css">
  <link rel="stylesheet" href="./CSS/reset.css">
  <link rel="stylesheet" href="./CSS/header.css">
  <link rel="stylesheet" href="./CSS/main_area-right.css">
  <link rel="stylesheet" href="./CSS/main_content.css">
  <link rel="stylesheet" href="./CSS/button.css">
  <link rel="stylesheet" href="./CSS/header封装.css">
  <link rel="stylesheet" href="./CSS/banner.css">

  

 

 

</head>
<body>
  <!--头部-->
<!--结构：第一层首先使用两个外层盒子，再把内容分为两个盒子里面必须嵌套a元素-->
<div class="top">

  <div class="topbar wrapper_01">
    <div class="bar-left">
    <h1 class="Logo">      <!--更利于seo优化里面放background-image精灵图-->
      <a href=" ">网易云音乐</a >
    </h1>
    <ul class="list">
      <li>
        <a href="#" class="item active" >发现音乐</a >
      </li>
      <li>
        <a href="#" class="item">我的音乐</a >
      </li>
      <li>
        <a href="#" class="item">关注</a >
      </li>
      <li>
        <a href="#" class="item">商城</a >
      </li>
      <li>
        <a href="#" class="item">音乐人</a >

      </li>
      <li>
      <a href="#" class="item">云推歌</a >
      </li>
      </li>
      <li>
      <a href="#" class="item">下载客户端  </a >
      </li>
    

    

 

    

      
    </ul>
    </div>

 

    <div class="bar-right">
      <div class="search">
        <input type="text" placeholder="音乐/视频/电台/用户">
      </div>
      <div class="anthor">
        <a href="#">创作者中心</a >
      </div>
      <div class="login">
        <a href="#">登录</a >
      </div>
      
    </div>
  </div>
  </div>

 

 


<!--结构：第二层首先使用两个外层盒子，再使用列表元素里面嵌套a元素-->
<div class="nav">
  <div class="navbar wrapper_01">
    <!--如果block元素中没有内容，line-height继承过来也不生效-->
  <ul class="list">
    <li>
      <a href="#" class="item active"><span>推荐</span></a >
    </li>
    <li>
      <a href="#

5b5377de76d549b498841a33b26deee6.png

全部源码获取添加QQ：

b73a8b6447e542ee8b9458cfab7d9b99.png 

 

super小龙3w
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
仿网易云音乐网页版html代码_免费畅听所有网易云音乐！！！！
weixin_39823017的博客
12-04 6836
“阅读本文仅需一分钟”自从前年年底起所有的web端在线音乐全部一夜下降之后，今年网页版音乐又再度回到我们的视野。说是整改，需要将音乐资源屏蔽，许多音乐运营商都重构了代码，然而我还是禁不住用爬虫去试试，看看到底发爬虫到什么程度，但是结果令我大吃一惊。。。。。。网易云音乐压根没怎么去修改。。。但是他把歌曲的url地址隐藏了。。。。然后我们又想了很多办法去搞他。。。最后，爬虫代码照样还是通行无...
web版的网易云音乐
08-11
web版的网易云音乐
HTML + CSS 连载 | 53 - 网易云音乐 ITEM（上）
JingnanJia的博客
03-03 1415
该例中耳机图标、播放量以及播放图标都是盖在图片上的，这里需要通过相对定位和绝对定位来处理；绝对定位是相对于父级定位元素进行偏移，是脱离标准流的。网易云音乐首页的 item 基本结构是由上下两部分组成的，上半部分为封面、背景以及播放量等信息，下半部分为描述信息，可以通过一个。盒子没有设置高度，宽度会自动占满父元素的整行，高度是由里面的。的高度都变成了 140px，图片就占据了整个盒子的高度。原样式中的背景是通过给一个超链接设置背景来实现的。的高度，底部还有一点点大约 5px 的高度。
精讲前端实战项目之移动端网易云首页（附源码）
静Yu的博客
09-03 4647
本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对html，css，JavaScript等基础知识已经是相当熟悉了。但是没有一个自己的作品，那是因为缺乏练习一些实战项目。今天这个就是一个很好的实战例子——移动端网易云首页，刚开始就做一些简单的静态网页。 本人会用到很多标签，如果忘记了可以查看下面两篇博文。 标签详解第一篇 标签详解第二篇 一、效果展示 二、技术要求 因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就.
用HTML+CSS仿网易云音乐网站(6个页面)
qq_38515380的博客
03-27 1079
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
仿网易云音乐网页版html代码_花钱下的音乐，格式还给加密，有大神可看不过去了...
weixin_39812533的博客
12-04 526
哈喽大家好我是无知便是罪专注于收集和分享互联网上不为人知的好东西前两天呢我们分享了一个通过JS代码来下载网易云音乐的方法不过今天呢小编又给大家找来了一个更简单的方式一起来看一下同样的是在网易云音乐的网页版随便选一首歌曲然后呢在地址栏最后方有一串数字这就是这首歌的音乐ID了我们复制一下然后呢我们要记住上方这个网址了我们要将等号后面的部分全部选中然后替换成刚刚的音乐ID确认就可以了他用的就是网易云音乐...
html5+css3+js登录页面
最新发布
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
基于HTML+CSS的静态网页设计仿网易云音乐静态页面95分以上项目源码.zip
02-05
基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。 基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用...
web前端 html+css+js+jquery 网易云音乐官网模仿
06-27
前端培训时自己参照网易云音乐官网仿制的网站
html5+css3页面布局特效特效代码
03-20
html5+css3页面布局特效是一款响应式的盒子布局，点击其中的一个盒子可切换到全屏视图，别的盒子会自动收缩隐藏。 html5+css3页面布局特效：
一个展示网易云音乐的页面
08-10
一个展示网易云音乐的页面
HTML作业-仿网易云音乐项目
04-29
html作业，仿照网易云音乐客户端练练，可以播放音乐，可以看歌词、拖进度等等，可以换肤，我本人喜欢黑色的皮肤，白色皮肤是赶时间加上去的，有的地方不协调。
防PC版网易云音乐页面
01-09
使用HTML5简单实现了网易云音乐的相关界面，本来想要实现网易云音乐的音乐推荐功能，但是技术有限，想在CSDN上下点儿代码来参照，苦于没有币，所以我来赚点币来下载别的项目。
HTML+CSS实现网易云网站
05-31
HTML+CSS实现网易云网站
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
HTML+CSS实现登录界面
qq_52459090的博客
04-19 1019
html+css登录页面
仿网易云音乐html代码,HTML作业-仿网易云音乐项目
weixin_32641973的博客
06-03 2552
【实例简介】html作业，仿照网易云音乐客户端练练，可以播放音乐，可以看歌词、拖进度等等，可以换肤，我本人喜欢黑色的皮肤，白色皮肤是赶时间加上去的，有的地方不协调。【实例截图】【核心代码】Music└── Music├── action.js├── font.otf├── index.html├── lrc.js├── mp3│ ├── cd.mp3│ ├── fqxdsws.mp3│...
网易云音乐html代码
11-22
以下是一个简单的网易云音乐的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网易云音乐</title> <link rel="icon" href="./image/logo.ico" type="image/x-icon"> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!-- 在这里添加网页内容 --> </body> </html> ``` 在这个示例中，我们首先引入了一个网页页签图标，使用了`<link>`标签，并指定了图标文件的路径。然后，我们引入了一个名为`index.css`的样式表文件，同样使用了`<link>`标签，并指定了样式表文件的路径。最后，我们在`<body>`标签中可以添加网页的具体内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值