2024年Web前端最新HTML+CSS系列实战之音乐播放器实现,【面试必会】

react和vue的比较

相同
1)vitual dom
2)组件化
3)props,单一数据流

不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在开始写代码之前,我们需要先准备一个音频文件和一个视频文件以及若干图片,然后进行页面的布局。

话不多说,代码先行!!!

html文件为:(music.html)

<!doctype html>

音乐播放页面

浏览器不支持video标签

风中的麦浪

爱过的地方

当微风带着收获的味道

吹向我脸庞

想起你轻柔的话语
曾打湿我眼眶
嗯…啦…嗯…啦…
我们曾在田野里歌唱
在冬季盼望
却没能等到阳光下

css样式为:(music.css)

@charset “utf-8”;

/* CSS Document */

/清除浏览器默认样式/

*{

margin:0; padding:0;

}

/整体控制音乐播放界面/

#box-video{

width:100%;

height:100%;

position:absolute;

overflow:hidden;

}

/插入视频/

#box-video video{

position:absolute;

top:50%;

left:50%;

margin-left:-1350px;

margin-top:-540px;

}

/唱片部分/

.cd{

width:422px;

height:422px;

position:absolute;

top:25%;

left:10%;

z-index:2;

border-radius:50%;

border:10px solid #FFF;

box-shadow:5px 5px 15px #000;

background:url(images/cd_img.jpg) no-repeat;

}

.center{

width:100px;

height:100px;

background-color:#000;

最后

在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

  • HTML5新特性,语义化

  • 浏览器的标准模式和怪异模式

  • xhtml和html的区别

  • 使用data-的好处

  • meta标签

  • canvas

  • HTML废弃的标签

  • IE6 bug,和一些定位写法

  • css js放置位置和原因

  • 什么是渐进式渲染

  • html模板语言

  • meta viewport原理

ng)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值