html怎么显示五线谱,CSS3 响应式乐谱音乐符号五线谱

╰半橙微兮° 2022-10-07 12:47 87阅读 0赞

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Playfair+Display);

body \{

background-color: \#e8e5e3;

margin: 4rem;

font-color: rgba(0, 0, 0, 0.9);

font-size: 0;

line-height: .5;

text-align: center;

\}

h1 \{

font-size: 4rem;

font-family: Playfair Display;

font-weight: 100;

line-height: 1.2;

margin-bottom: 4rem;

\}

div.sheetmusic \{

display: inline-block;

text-align: initial;

\}

section.staff \{

clear: both;

\}

section.bar \{

float: left;

height: 4.1rem;

background-image: -webkit-linear-gradient(rgba(38, 76, 115, 0.5) 1px, transparent 1px);

background-image: linear-gradient(rgba(38, 76, 115, 0.5) 1px, transparent 1px);

background-size: 100% 1rem;

background-origin: content-box;

font-size: 10rem;

width: 20rem;

border-left: 2px solid \#000;

border-right: 2px solid \#000;

margin-bottom: 4rem;

\}

section.bar:first-child \{

border-left: 4px solid \#000;

\}

section.bar:last-child \{

border-right: 4px solid \#000;

\}

.g-clef \{

font-size: 10rem;

padding-right: 0;

margin-right: -4rem;

\}

span.note \{

font-size: 5rem;

margin-right: -3rem;

display: inline-block;

position: relative;

\}

span.eighth \{

margin-left: 2rem;

\}

.lower-c \{

bottom: -.5rem;

\}

.lower-g \{

bottom: 1.5rem;

\}

.lower-a \{

bottom: 2.3rem;

\}

.lower-f \{

bottom: 1.2rem;

\}

.lower-e \{

bottom: .5rem;

\}

.f-clef \{

font-size: 5rem;

position: relative;

top: -2rem;

\}

@media all and (max-width: 800px) \{

h1 \{

font-size: 3rem;

\}

section.bar \{

float: none;

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，87人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5/css3响应式设计

响应式媒体查询一、使用媒体查询 2. 写法 3.指定设备宽度 4.i

浅浅的花香味﹌/ 2024年02月19日 17:34/ 0 赞/ 148 阅读

相关 HTML5+CSS3 实现的响应式垂直时间轴

阅读目录阐述阐述网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直

系统管理员/ 2023年10月06日 23:50/ 0 赞/ 104 阅读

相关 30套免费的响应式 HTML5 & CSS3 模板下载

　　HTML5 和 CSS3 网站模板存在巨大的需求，网页设计师们都喜欢现成的网站模板，能够轻松地设计和开发美观，吸引眼球的网站。如果你正在寻找响应式的 [HTML5][HTM

柔光的暖阳◎/ 2023年06月02日 09:08/ 0 赞/ 141 阅读

相关 css+html响应式表单

用到flex布局，不懂的可先去看flex如何布局的第一步：先看效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

野性酷女/ 2022年12月11日 09:10/ 0 赞/ 273 阅读

相关【响应式Web前端设计】HTML+CSS3 旋转齿轮特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

朱雀/ 2022年10月15日 11:58/ 0 赞/ 225 阅读

相关 html怎么显示五线谱,CSS3 响应式乐谱音乐符号五线谱

CSS 语言： CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Playfair+Displ

╰半橙微兮°/ 2022年10月07日 12:47/ 0 赞/ 88 阅读

相关纯css3响应式3d翻转菜单

前端开发whqet,csdn,王海庆,whqet,前端开发专家周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。 ![SouthE

悠悠/ 2022年08月26日 15:20/ 0 赞/ 346 阅读

相关 CSS3图片响应式居中

img { width: 100%; object-fit: cover; } img {

叁歲伎倆/ 2022年07月16日 00:16/ 0 赞/ 375 阅读

相关 HTML5&CSS3笔记：响应式设计中的 HTML5

所有现代浏览器都能够正确理解常见的 HTML5 新特性(新的结构元素、视频和音频标签)，而对老版本的 IE 则可以使用腻子脚本来弥补我所遇到过的所有缺陷。什么是腻

曾经终败给现在/ 2022年07月15日 14:20/ 0 赞/ 325 阅读

相关五线谱入门(四)

目录 1. 音乐是什么 2. 五线谱难不难 3. 五线谱入门 4. 有了五线谱，我们能干什么上一篇我们简单介绍了全音、半音，[《五线谱入门(三)》][Link

向右看齐/ 2022年01月20日 08:47/ 0 赞/ 365 阅读