你不知道的前端艺术:代码敲击乐

引言

在数字时代,前端开发不仅仅是技术的堆砌,更是一门艺术。如果说后端是产品的骨骼,那么前端就是其肌肤,赋予了产品以生命和灵魂。本文将通过一个具体的例子------创建一个静态的代码敲击乐界面,来探讨HTML+CSS在前端开发中的应用。

废话少说,先看结果

编写静态页面

今天的内容先从简单的开始,先编写一个静态的页面,只包含了html和css部分。编写静态页面的第一步是构建HTML结构。HTML是网页的骨架,定义了页面的基本结构和内容。在这个案例中,我们将使用HTML来搭建一个简单的敲击乐界面,其中包含多个键位,每个键位由一个div和一个span组成,分别代表按键的外观和显示的文字。div是块级元素,独自占一行。span是行内元素,可以与其他行内元素在同一行。例如,一个基本的键位HTML结构可能如下所示:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 敲击乐</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="keys">
        <div class="key">
            <div>A</div>
            <span class="sound">clap</span>
        </div>
        <div class="key">
            <div>S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key">
            <div>D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key">
            <div>F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key">
            <div>G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key">
            <div>H</div>
            <span class="sound">ride</span>
        </div>
        <div class="key">
            <div>J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key">
            <div>K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key">
            <div>L</div>
            <span class="sound">tink</span>
        </div>
    </div>
</body>
</html>

这里,.keys类名下的所有.key都是键位,每个键位内部又包含了两个子元素:一个div用于展示按键的视觉效果,一个span则用来显示按键对应的音效名称。

HTML与CSS的角色

在前端开发中,HTML和CSS各自扮演着不同的角色。如果把网页比作一部电影,那么HTML就是演员,它提供了所有的角色和场景;而CSS则是化妆师,负责给这些角色和场景增添色彩和风格。在我们的敲击乐示例中,我们可以为.keys.key设置样式,使它们看起来更像真实的键盘:

css 复制代码
html {
    height: 100%; 
    font-size: 10px;   /*设置字体大小*/
    background: url('./background.jpg') bottom center no-repeat;  /*背景底部居中,不重复*/
    background-size: cover;  /*覆盖整个盒子*/
}

.keys {
    display: flex;   /*弹性布局*/
    flex: 1;   /*子元素占满整个多余部分而不挤压*/
    height: 100vh; /*视图高度*/
    align-items: center; /*垂直居中*/
    justify-content: center;/*水平居中*/ 
}

.key {
    border: 4px solid black; /*设置边框*/
    border-radius: 5px; /*设置弧度*/
    margin: 10px; /*外边距*/
    font-size: 15px; 
    padding: 10px 5px;/*内边距*/
    width: 100px; 
    color: white; 
    background: rgba(0, 0, 0,.4);/*背景色*/ 
    box-shadow: 0 0 5px black; /*阴影*/
    text-align: center; 
}

.key div {
    font-size: 40px; 
}

.key.sound {
    font-size: 12px; 
    text-transform: uppercase; /*文本转换为大写*/
    letter-spacing: 1px; /*字母间距*/
    color: #ffc600; 
}

这段CSS代码不仅设置了键位的基本样式,还利用了弹性布局(display: flex)来确保所有键位整齐排列,并且可以通过justify-contentalign-items属性调整它们的位置。弹性布局是非常复杂的,在这里我们只用到了一些比较基础的用法。在以后的文章中,我们将对弹性布局进行深入的探讨。

总结

通过这个简单的敲击乐项目,我们不仅了解了HTML5在前端开发中的基础作用,还简单学习了如何利用CSS中的弹性布局。希望这篇文章能帮助你更好地理解和掌握前端开发的核心概念和技术,激发你在前端领域的创造力和热情。

相关推荐
我有一棵树3 分钟前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
white-persist18 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
IT_陈寒1 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19872 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端