写了个静态的网页-模仿网易云

最新推荐文章于 2024-06-18 15:32:09 发布
最新推荐文章于 2024-06-18 15:32:09 发布
阅读量5.7k 收藏 96
点赞数 16
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljlhnick/article/details/73437269
版权

今天父亲节，正好用它来祝福我爸爸父亲节快乐

效果图

后面的动态效果是参考妙味里一个学员制作的

只贴html+css，因为js有点多，不知道怎么弄上来

 

html

 

<html>
<head>
<meta charset="utf-8">
<title>miaowei</title>
<link rel="stylesheet" href="../css/miaowei.css" type="text/css"/>
<script src="../js/vue.min.js"></script>
<script src="../js/cardsData.js"></script>
<script src="../js/card.js"></script>
<script src="../js/polyfill.js"></script>
<script src="../js/tool.js"></script>
</head>
<body>
<canvas id="dot" class="shoeIn" style="background: linear-gradient(rgb(156, 194, 201), rgb(132, 104, 184))" >
</canvas>
<section id="section0">
	
	<div id="contain">
		<div id="top">
			<div class="search">
				<input class="text" id="text" type="text"  v-model="message"/>
				<input class="btn" type="submit" value="搜索"/>
			</div>
			<ul>
				<li><a href="#">个性推荐</a></li>
				<li><a href="#">歌单</a></li>
				<li><a href="#">主播电台</a></li>
				<li><a href="#">排行榜</a></li>
				<li><a href="#">歌手</a></li>
				<li><a href="#">最新音乐</a></li>
				
			</ul>
		</div>
		<div id="list">
			<ul>
				<li>我最喜欢的</li>
				<li>橘子皮</li>
				<li>刘瑞琦</li>
				<li>许嵩</li>
				<li>新建歌单</li>
			</ul>
		</div>
		<div id="show">
			<div class="image">
					<img src="../image/timg2.jpg">
			</div>
			<span class="advice">推荐歌单</span>
			<div class="songlist">
				<ul>
					<li class="l1"><a href="#"><img src="../image/songlist1.jpg"></a><span class="bottom">那些出场自带BGM的漫改电影角色</span></li>
					<li class="l1"a href="#"><img src="../image/songlist2.jpg"></a><span class="bottom">港乐简史：百花争艳，女歌手篇</span></li>
					<li class="l1"><a href="#"><img src="../image/songlist3.jpg"></a><span class="bottom">一个旋律两手歌|是无意穿堂风，偏偏引山洪</span></li>
					<li class="l1"><a href="#"><img src="../image/songlist4.jpg"></a><span class="bottom">国语古风中国风神曲，细腻地抚摸你的耳膜</span></li>
					<li class="l1"><a href="#"><img src="../image/songlist5.jpg"></a><span class="bottom">1990-1999年内地流行乐坛经典回顾</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist6.jpg"></a><span class="bottom">90/九十年代经典流行歌曲</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist7.jpg"></a><span class="bottom">华语/百首写给前任的歌，让你百感交集</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist8.jpg"></a><span class="bottom">二胡精选|二弦在手，演绎人间悲欢离合</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist9.jpg"></a><span class="bottom">民谣|哪些小众却又很好听的歌</span></li>
					<li class="l2"><a href="#"><img src="../image/songlist10.jpg"></a><span class="bottom">高考季|2017一起听歌记单词吧</span></li>
				</ul>
			</div>
			
		</div>
		<div id="progress">
			<div class="play">
				<img src="../image/yingtao.jpg">
				<div class="about">
					<span class="song">父亲</span><br>
					<span class="songer">筷子兄弟</span>
				</div>
			</div>
			<div class="bar">
				<span>筷子兄弟 - 父亲.mp3</span>
				<audio id="music" src="../audio/筷子兄弟 - 父亲.mp3" controls="controls" preload="auto" loop="loop">
				</audio>
			</div>
		</div>
	</div>
	
</section>
</body>
<script src="../js/vue.min2.js"></script>
<script>
        new Vue({
            el: '.text',
            data: {
				message:'父亲'
			}
        })
</script>
</html>

css

body,div,p,span,ul,li,ol,h1,h2,h3,h4,h5,h6,a{
	margin:0px;
	padding:0px;}
a{text-decoration:none;}
ul{list-style:none;}

#section{position:relative;}

section{
	background:transparent;
	transition:1s;
}
#contain{
	position:absolute;
	width:1200px;height:700px;
	margin:-700px 200px 0px 100px;
	box-shadow:0 0 20px 3px rgba(215, 141, 241, 0.8)
}
#top{height:50px;}
#top .search{
	width:300px;height:50px;float:left;
}
#top .search .text{
	width:200px;height:30px;line-height:30px;
	margin-top:15px;
	margin-left:30px;
	-webkit-border-radius:25px;
}
#top .search .btn{
	width:45px;height:30px;text-align:center;
	-webkit-border-radius:5px;
}
#top ul{
	width:800px;height:50px;float:right;
}
#top ul li{
	width:80px;height:30px;float:left;margin:10px 0 0 50px;
}
#top ul li a{
	width:80px;height:30px;line-height:30px;color:pink;
}
#list{
	width:300px;height:500px;border-right:1px solid #fff;float:left;
}
#list ul{
	position:absolute;
	width:300px;height:400px;float:left;
	margin-left:30px;
}
#list ul li{
	display:block;
	width:200px;height:30px;line-height:30px;
	margin:15px 0 0 20px;
}
#show{
	width:850px;height:600px;float:right;
}
#show .image{
	width:500px;height:150px;
	margin:auto;
}
#show .image img{
	display:block;
	width:400px;height:150px;
	margin:auto;
}
#show .advice{
	display:block;width:100px;height:30px;line-height:30px;
	margin-left:25px;
}
#show .songlist ul li{
	width:140px;height:160px;float:left;
	margin-left:20px;
}
#show .songlist ul .l1{
	margin-top:10px;
}
#show .songlist ul .l2{
	margin-top:30px;
}
#show .songlist img{
	width:140px;height:130px;
}
#show .songlist span{
	font-size:12px;
	width:140px;height:15px;line-height:15px;	
}
#progress{
	height:150px;position:absolute;margin-top:530px;
	}
#progress .play{
	width:280px;height:150px;float:left;margin-left:20px;margin-top:10px;border-right:1px solid #fff;
	
}
.play img{
	width:100px;height:100px;float:left;
}
.play .about{
	width:100px;height:100px;float:left;
	margin-left:30px;
}
.about .song,.about .songer{
	height:25px;line-height:25px;margin-top:5px;
}
#progress .bar{
	width:800px;height:100px;float:right;
}
.bar span{
	display:block;width:600px;height:30px;line-height:30px;position:relative;margin-left:80px;margin-top:30px;
}
.bar #music{
	width:600px;margin-left:80px;margin-top:10px;
}
body,div,p,span,ul,li,ol,h1,h2,h3,h4,h5,h6,a{
	margin:0px;
	padding:0px;}
a{text-decoration:none;}
ul{list-style:none;}

#section{position:relative;}

section{
	background:transparent;
	transition:1s;
}
#contain{
	position:absolute;
	width:1200px;height:700px;
	margin:-700px 200px 0px 100px;
	box-shadow:0 0 20px 3px rgba(215, 141, 241, 0.8)
}
#top{height:50px;}
#top .search{
	width:300px;height:50px;float:left;
}
#top .search .text{
	width:200px;height:30px;line-height:30px;
	margin-top:15px;
	margin-left:30px;
	-webkit-border-radius:25px;
}
#top .search .btn{
	width:45px;height:30px;text-align:center;
	-webkit-border-radius:5px;
}
#top ul{
	width:800px;height:50px;float:right;
}
#top ul li{
	width:80px;height:30px;float:left;margin:10px 0 0 50px;
}
#top ul li a{
	width:80px;height:30px;line-height:30px;color:pink;
}
#list{
	width:300px;height:500px;border-right:1px solid #fff;float:left;
}
#list ul{
	position:absolute;
	width:300px;height:400px;float:left;
	margin-left:30px;
}
#list ul li{
	display:block;
	width:200px;height:30px;line-height:30px;
	margin:15px 0 0 20px;
}
#show{
	width:850px;height:600px;float:right;
}
#show .image{
	width:500px;height:150px;
	margin:auto;
}
#show .image img{
	display:block;
	width:400px;height:150px;
	margin:auto;
}
#show .advice{
	display:block;width:100px;height:30px;line-height:30px;
	margin-left:25px;
}
#show .songlist ul li{
	width:140px;height:160px;float:left;
	margin-left:20px;
}
#show .songlist ul .l1{
	margin-top:10px;
}
#show .songlist ul .l2{
	margin-top:30px;
}
#show .songlist img{
	width:140px;height:130px;
}
#show .songlist span{
	font-size:12px;
	width:140px;height:15px;line-height:15px;	
}
#progress{
	height:150px;position:absolute;margin-top:530px;
	}
#progress .play{
	width:280px;height:150px;float:left;margin-left:20px;margin-top:10px;border-right:1px solid #fff;
	
}
.play img{
	width:100px;height:100px;float:left;
}
.play .about{
	width:100px;height:100px;float:left;
	margin-left:30px;
}
.about .song,.about .songer{
	height:25px;line-height:25px;margin-top:5px;
}
#progress .bar{
	width:800px;height:100px;float:right;
}
.bar span{
	display:block;width:600px;height:30px;line-height:30px;position:relative;margin-left:80px;margin-top:30px;
}
.bar #music{
	width:600px;margin-left:80px;margin-top:10px;
}

因为有人想要效果，不知道是不是这个

链接：https://pan.baidu.com/s/1y_OV1K-cXFrmgcgnwHS8oA
提取码：o21f

在贴下初学html，css时练手项目

链接：https://pan.baidu.com/s/1y_OV1K-cXFrmgcgnwHS8oA
提取码：o21f

 

 

 

 

 

 

ljlhnick
关注
  • 16
    点赞
  • 踩
  • 96
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
而风不止
11-24 1316
音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星音乐演 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
HTML作业-仿网易云音乐项目
04-29
html作业，仿照网易云音乐客户端练练，可以播放音乐，可以看歌词、拖进度等等，可以换肤，我本人喜欢黑色的皮肤，白色皮肤是赶时间加上去的，有的地方不协调。
网页设计期末作业，使用HTML、CSS、Jquery模仿网易云网页
06-14
网页作业，使用HTML、CSS、JQuery、Bootstrap模仿网易云音乐网页界面
用HTML+CSS仿网易云音乐网站(6个页面)
最新发布
weixin__BJ050106的博客
06-18 1005
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
仿网易云音乐web端音乐播放器
08-10
基于create-react-app2.x，仿网易云音乐【web】实现的音乐播放器
仿网易云网页播放器
Uncle_sixsix的博客
09-21 3154
注意项： 1.歌曲请自备，开一个文件夹放入，写入数组路径要准确 2.仿网易云的播放器，图标css可去官网挖...(这个就是hhh) 3.在线图标可去阿里图标库拿，布局自己写，主要看JS逻辑，把html和css忽略吧 上JS代码： &lt;script&gt; var oTotal = document.getElementsByClassName("total_time")[0]...
react-react开发的网易云音乐
08-15
在本项目中，“react-react开发的网易云音乐”是一个基于React框架实现的网易云音乐的前端应用。React是由Facebook开发的开源JavaScript库，用于构建用户界面，尤其适用于单页应用程序。这个项目展示了如何利用React...
基于HTML+CSS的静态网页设计仿网易云音乐静态页面95分以上项目源码+项目说明.zip
05-15
在本项目中，我们主要探讨的是使用HTML和CSS技术来创建一个高质量的静态网页设计，其目的是模仿网易云音乐的界面。这个项目源码能够帮助学习者深入理解这两种核心技术，并在实际操作中提升网页设计技能。以下是关于...
鸿蒙ArkTS仿网易云.zip
02-07
【鸿蒙ArkTS仿网易云】项目是针对华为鸿蒙操作系统（HarmonyOS）进行的一款应用开发示例，旨在模仿网易云音乐的应用功能。这个项目使用了鸿蒙系统的特有编程语言ArkTS，这是一种基于TypeScript的编程语言，旨在为...
仿网易云音乐小程序源码
01-07
【标题】"仿网易云音乐小程序源码"指的是一个基于微信小程序开发的项目，这个项目模仿了网易云音乐的应用界面和功能，为开发者提供了一个学习和参考的平台。通过这个源码，开发者可以深入了解微信小程序的开发流程，...
html仿网易云网站,GitHub - Hdoove/music-webapp: 仿网易云webapp
weixin_35762215的博客
06-04 419
仿网易云webApp(持续更新中)配置安装开发环境Node LatestNpm LatestInstalling使用npm安装依赖��npm installnpm start 或 npm run start打包生产环境npm run buildDeployment线上服务可为静态资源服务器，将root设为 /dist 路径， 并将子路由$uri重定向至root。Built With生产环境依赖开发...
仿网易云音乐网站
12-26
关于仿网易云网站的报告网络音乐巨大的潜在市场，带动了国内在线音乐的飞速发展，像百度、腾讯、豆瓣、酷狗等公司都研发了自己的在线音乐网站。同时也有很多小型音乐网站如雨后春笋般出现。但是很多的音乐网站在很多方面的设计都不合理和安全，例如架构不合理，性能低下，
一个展示网易云音乐的页面
08-10
一个展示网易云音乐的页面
html静态网页，包含图片和音频视频播放
12-03
插入图片以及背景图片，网易云音乐音频的超链接、网易云官网的超链接、电子邮件超链接，插入视频，实现页面布局和登录表单的功能，代码可供初学者参考。
【HTML】简单的静态音乐网页设计
11-18
设计一个简单的静态音乐网站。下载时请注意，此资源只有前端的静态样式，包括首页，歌手详情，音乐论坛，注册等界面设计。并没有数据后端交互。下载后直接打开【index.html】进入首页即可。
移动web网站静态页面html5
06-22
移动web网站静态页面 Html5静态页面，防携程旅行手机端网站实例
仿网易云播放页面设计
weixin_49061829的博客
11-03 158
this.$refs.lyricUL.scrollTop = num-150//其中150根据自己的情况和效果进行设计。在.progressbar的盒子设置:style="'width:'+sliderTime+'%'"即可。然后对于进度条的改变，在外层进度条设置一个div包裹住，然后内置一个div进行偏移量的填充即可。在填充时动态设置.progressbar的宽度即可，同样是在事件改变时监听实现。然后对于歌词变化行进行监听，若变化行大于五的时候进行偏移量的设计。//初始化页面后立即监听。
前端作品之静态页面设计（二）：网易云音乐页界面静态效果设计（iphonex兼容）
qq_41903105的博客
02-28 6153
做效果图之前，博主只说一句话，精益求精，能花费时间更多的时间去做到90%相似就不要60%相似。一定要认真去做~~~~~ 完成品欣赏： 代码： &lt;head&gt; &lt;title&gt;网易云音乐&lt;/titl...
写一个静态网页学成在线网页代码
06-13
学习创建静态网页是一个很好的起点，因为它不需要服务器端脚本或数据库支持，适合初学者快速入门。下面是制作静态网页的基本步骤和一些常用工具： 1. **理解基本结构**： 静态网页由HTML（HyperText Markup Language）编写，包括头部（header）、主体（body）和可能的尾部（footer）。了解这些元素及其作用是基础。 2. **HTML标签**： 学习HTML标签如`<html>`, `<head>`, `<title>`, `<body>`, `<h1>`到`<p>`等，它们用于定义页面结构和内容。 3. **CSS样式**： CSS（Cascading Style Sheets）用于美化网页，了解如何添加颜色、字体、布局等样式。可以从基本的内联样式开始，然后过渡到外部样式表（`.css`文件）。 4. **媒体查询与响应式设计**： 为了适应不同设备的屏幕尺寸，了解如何使用媒体查询进行响应式设计。 5. **文本编辑器**： 使用像Visual Studio Code, Sublime Text或Atom这样的文本编辑器编写代码，它们有强大的语法高亮和自动完成功能。 6. **学习版本控制**： 掌握Git，这是一种常用的源代码管理工具，即使你的项目还小，学习它也会很有用。 7. **静态网站生成器**： 对于批量生成静态网页，你可以考虑使用Jekyll, Hugo或GitBook等静态站点生成器。 8. **实践项目**： 通过实际创建个人博客、作品集或简单的静态网站来巩固所学知识。 相关问题： 1. HTML有哪些常见的标签？ 2. CSS如何应用到HTML元素上？ 3. 如何在文本编辑器中设置CSS预处理器（如Sass或Less）？ 4. 什么是Git，为什么要用它管理静态网页项目？ 5. 举个例子，如何使用Jekyll创建一个静态网站？
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值