使用HTML + CSS + JS，编写一个台球追分计分器

最新推荐文章于 2025-04-26 14:38:20 发布
最新推荐文章于 2025-04-26 14:38:20 发布
阅读量732 收藏 11
点赞数 6
分类专栏： 零碎的小项目收藏夹 文章标签： css javascript html 台球计分器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63981644/article/details/147286404
版权

目录

一.代码

二.效果展示

三.该计分器的优点

一.代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横屏页面</title>
    <style>
        /* 竖屏时强制横屏 */
        @media screen and (orientation: portrait) {

            html,
            body {
                width: 100vh;
                /* 高度作为宽度 */
                height: 100vw;
                /* 宽度作为高度 */
                transform: rotate(90deg);
                transform-origin: left top;
                overflow-x: hidden;
                position: absolute;
                top: 100%;
                left: 0;
            }
        }
    </style>
</head>

<body>
    <!-- <h1>横屏页面</h1>
    <p>请将手机旋转为横屏以查看内容。</p> -->
    <div style="background-color: white;height:200px;width:400px;">
        <!-- 选手1的操作面板 -->
        <div style="display: inline-block;background-color: blue;height:200px;width:198px;">
            <!-- 国籍 + 选手姓名 -->
            <div style="width: 100%;height: 50px;background-color: #143A85;display: flex;justify-content: center;align-items: center;">
                <img src="./img/国旗.png" style="width:30px;display: block;">
                <span style="font-family: KaiTi, STKaiti, serif;color:#FFFFF0" id="player1Name">选手1</span>
            </div>
            <!-- 得分 -->
            <div style="width: 100%;height: 100px;background-color: #030303;font-size: 70px;color:white;text-align: center;"
                id="score_person1">
                0
            </div>
            <!-- 操作按钮 -->
            <div style="width: 100%;height: 50px;background-color: #143A85;">
                <!-- <span style="color:#FFFFF0">普胜</span>
                <span>大金</span>
                <span>小金</span>
                <span>黄金九</span>
                <span>犯规</span> -->
                <!-- 按钮组 -->

                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="pusheng_1">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="pusheng_person1">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        普胜
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="dajin_1">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="dajin_person1">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        大金
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="xiaojin_1">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="xiaojin_person1">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        小金
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="jinjiu_1">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="jinjiu_person1">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        黄金九
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="fangui_1">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="fangui_person1">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        犯规
                    </span>
                </span>

                
            </div>

        </div>
        <!-- 选手的操作面板 -->
        <div style="display: inline-block;background-color: blue;height:200px;width:198px;">
            <!-- 国籍 + 选手姓名 -->
            <div style="width: 100%;height: 50px;background-color: #143A85;display: flex;justify-content: center;align-items: center;">
                <img src="./img/国旗.png" style="width:30px;display: block;">
                <span style="font-family: KaiTi, STKaiti, serif;display: block;color:#FFFFF0" id="player2Name">选手2</span>
            </div>
            <!-- 得分 -->
            <div style="width: 100%;height: 100px;background-color: #030303;font-size: 70px;color:white;text-align: center;" id="score_person2">
                0
            </div>
            <!-- 操作按钮 -->
            <div style="width: 100%;height: 50px;background-color: #143A85;">
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="pusheng_2">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="pusheng_person2">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        普胜
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="dajin_2">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="dajin_person2">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        大金
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="xiaojin_2">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="xiaojin_person2">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        小金
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="jinjiu_2">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="jinjiu_person2">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        黄金九
                    </span>
                </span>
                <span style="display: inline-block;margin-top: 10px;height:30px;width:36px;cursor: pointer;" id="fangui_2">
                    <span style="display: block;width:100%;height: 18px;text-align: center;font-size: 14px;color:#FFFFF0" id="fangui_person2">
                        0
                    </span>
                    <span style="display: block;height: 12px;width: 100%;font-size: 8px;color:#FFFFF0;text-align: center;">
                        犯规
                    </span>
                </span>
            </div>
        </div>
    </div>

    <button onclick="showInputFields()">设置</button>

    <!-- 输入选手姓名的提交单（默认隐藏） -->
    <div id="inputFields" style="display:none;">
        <label for="player1">选手1姓名:</label>
        <input type="text" id="player1"><br><br>
    
        <label for="player2">选手2姓名:</label>
        <input type="text" id="player2"><br><br>
    
        <button onclick="assignNames()">提交</button>
    </div>
</body>
<script>
    //选手1的分数
    let score_1 = 0;
    //选手2的分数
    let score_2 = 0;

    //选手1获得的各种球形数量
    let pusheng_sum_1 = 0;
    let dajin_sum_1 = 0;
    let xiaojin_sum_1 = 0;
    let jinjiu_sum_1 = 0;
    let fangui_sum_1 = 0;

    //选手2获得的各种球形数量
    let pusheng_sum_2 = 0;
    let dajin_sum_2 = 0;
    let xiaojin_sum_2 = 0;
    let jinjiu_sum_2 = 0;
    let fangui_sum_2 = 0;

    
    //初始化页面时，设置两位选手的分数为0
    let score_person1 = document.getElementById("score_person1");
    score_person1.innerText = score_1;
    let score_person2 = document.getElementById("score_person2");
    score_person2.innerText = score_2;

    //初始化页面时，设置两位选手的各种球形数量
    /* 选手1 */
    let pusheng_person1 = document.getElementById("pusheng_person1");
    pusheng_person1.innerText = pusheng_sum_1;
    let dajin_person1 = document.getElementById("dajin_person1");
    dajin_person1.innerText = dajin_sum_1;
    let xiaojin_person1 = document.getElementById("xiaojin_person1");
    xiaojin_person1.innerText = xiaojin_sum_1;
    let jinjiu_person1 = document.getElementById("jinjiu_person1");
    jinjiu_person1.innerText = jinjiu_sum_1;
    let fangui_person1 = document.getElementById("fangui_person1");
    fangui_person1.innerText = fangui_sum_1;
    /* 选手2 */
    let pusheng_person2 = document.getElementById("pusheng_person2");
    pusheng_person2.innerText = pusheng_sum_2;
    let dajin_person2 = document.getElementById("dajin_person2");
    dajin_person2.innerText = dajin_sum_2;
    let xiaojin_person2 = document.getElementById("xiaojin_person2");
    xiaojin_person2.innerText = xiaojin_sum_2;
    let jinjiu_person2 = document.getElementById("jinjiu_person2");
    jinjiu_person2.innerText = jinjiu_sum_2;
    let fangui_person2 = document.getElementById("fangui_person2");
    fangui_person2.innerText = fangui_sum_2;



    //点击【选手1】的按钮
    //点击【普胜】
    var pusheng_1 = document.getElementById("pusheng_1");
    pusheng_1.addEventListener('click', function() {
        //将选手1的分数+4
        score_1 += 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-4
        score_2 -= 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的普胜数量+1
        pusheng_sum_1 +=1;
        //更新选手1的普胜数
        pusheng_person1.innerText = pusheng_sum_1;
    })
    //点击【大金】
    var dajin_1 = document.getElementById("dajin_1");
    dajin_1.addEventListener('click', function () {
        //将选手1的分数+10
        score_1 += 10;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-10
        score_2 -= 10;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的大金数量+1
        dajin_sum_1 += 1;
        //更新选手1的大金数
        dajin_person1.innerText = dajin_sum_1;
        
    })
    //点击【小金】
    var xiaojin_1 = document.getElementById("xiaojin_1");
    xiaojin_1.addEventListener('click', function () {
        //将选手1的分数+7
        score_1 += 7;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-7
        score_2 -= 7;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的小金数量+1
        xiaojin_sum_1 += 1;
        //更新选手1的小金数
        xiaojin_person1.innerText = xiaojin_sum_1;
    })
    //点击【黄金九】
    var jinjiu_1 = document.getElementById("jinjiu_1");
    jinjiu_1.addEventListener('click', function () {
        //将选手1的分数+4
        score_1 += 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数-4
        score_2 -= 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的黄金九数量+1
        jinjiu_sum_1 += 1;
        //更新选手1的黄金九数
        jinjiu_person1.innerText = jinjiu_sum_1;
    })
    //点击【犯规】
    var fangui_1 = document.getElementById("fangui_1");
    fangui_1.addEventListener('click', function() {
        //将选手1的分数-1
        score_1 -= 1;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手2的分数+1
        score_2 += 1;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手的犯规数量+1
        fangui_sum_1 += 1;
        //更新选手1的犯规数
        fangui_person1.innerText = fangui_sum_1;
    })




    //点击【选手2】的按钮
    //点击【普胜】
    var pusheng_2 = document.getElementById("pusheng_2");
    pusheng_2.addEventListener('click', function () {
        //将选手2的分数+4
        score_2 += 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-4
        score_1 -= 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的普胜数量+1
        pusheng_sum_2 += 1;
        //更新选手2的普胜数
        pusheng_person2.innerText = pusheng_sum_2;
    })
    //点击【大金】
    var dajin_2 = document.getElementById("dajin_2");
    dajin_2.addEventListener('click', function () {
        //将选手2的分数+10
        score_2 += 10;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-10
        score_1 -= 10;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的大金数量+1
        dajin_sum_2 += 1;
        //更新选手2的大金数
        dajin_person2.innerText = dajin_sum_2;
    })
    //点击【小金】
    var xiaojin_2 = document.getElementById("xiaojin_2");
    xiaojin_2.addEventListener('click', function () {
        //将选手2的分数+7
        score_2 += 7;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-7
        score_1 -= 7;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的小金数量+1
        xiaojin_sum_2 += 1;
        //更新选手2的小金数
        xiaojin_person2.innerText = xiaojin_sum_2;
    })
    //点击【黄金九】
    var jinjiu_2 = document.getElementById("jinjiu_2");
    jinjiu_2.addEventListener('click', function () {
        //将选手2的分数+4
        score_2 += 4;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数-4
        score_1 -= 4;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的黄金九数量+1
        jinjiu_sum_2 += 1;
        //更新选手2的黄金九数量
        jinjiu_person2.innerText = jinjiu_sum_2;
    })
    //点击【犯规】
    var fangui_2 = document.getElementById("fangui_2");
    fangui_2.addEventListener('click', function () {
        //将选手2的分数-1
        score_2 -= 1;
        //更新选手2的记分牌
        score_person2.innerText = score_2;
        //将选手1的分数+1
        score_1 += 1;
        //更新选手1的记分牌
        score_person1.innerText = score_1;
        //将选手的犯规数量+1
        fangui_sum_2 += 1;
        //更新选手2的犯规数量
        fangui_person2.innerText = fangui_sum_2;
    })
    


    //自定义选手姓名
    function showInputFields() {
        // 显示输入框
        document.getElementById('inputFields').style.display = 'block';
    }

    //设置选手姓名的输入表单
    function assignNames() {
        // 获取输入框的值
        const player1 = document.getElementById('player1').value;
        const player2 = document.getElementById('player2').value;

        // 将值赋值给span元素
        document.getElementById('player1Name').textContent = player1;
        document.getElementById('player2Name').textContent = player2;

        // 隐藏输入框
        document.getElementById('inputFields').style.display = 'none';
    }
</script>

</html>

二.效果展示

使用步骤如下：

①设置两位选手的姓名：

②然后就可以根据两位选手的比赛情况，进行分数设置。

    比分制度采用14710制。

    即：犯规=减1分、普胜=4分、小金=7分、大金=10分、黄金九=4分。

点击两位选手的不同按钮，进行加分、减分。

三.该计分器的优点

        优点如下：

        ①采用水上、水下制，即：两个选手的分数之和永远为0。这样一眼就能看出来谁水上、水下多少分。

            举例：上图中，选手【秦利文】分数为6，代表水上6分；选手【617】分数为-6，代表水下6分。

        ②两位选手的每种球形（如：普胜、大金、小金等）数量都可以记录下来，方便比赛结束后复盘自己的发挥情况，从而后期针对性弥补自己的缺点。

        ③该计分器界面美观，比赛结束后可以截图分享朋友圈。 

        ④可以在手机浏览器运行该html文件，横屏运行的界面也十分美观。如下：

 

结语

以上就是该比赛计分器的实现，界面美观，代码只涉及纯前端三剑客（HTML、CSS、JS）。

喜欢本篇文章的话，可以留个免费的关注呦~~

一个名叫星星书籍的网站，使用HTML+HTML5+CSS+CSS3+JavaScript编写，含有登录、注册和首页页面.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明
2024-2025年计算机软件毕业设计大全：2000个精品毕设推荐✅
码农飞哥
10-28 4020
2000个精品毕设推荐 ，毕业设计，课程设计，Java，SpringBoot
Javascript网页游戏合集：贪吃蛇与台球
本压缩包包含两款用Javascript编写、设计精美且功能强大的网页游戏：贪吃蛇和台球。游戏界面逼真，交互流畅，充分展示了编程者的高水平能力。特别是台球游戏，深受玩家喜爱，其精细的界面和操控体验凸显了作者的专业...
jquery小游戏-台球
07-22
总的来说，利用jQuery实现台球小游戏是一个综合运用JavaScript、物理学、UI设计等多个领域的实践过程。通过这个项目，开发者不仅可以提升jQuery技能，还能学习到游戏开发的基本思路和方法。当然，实际项目中还需要...
桌球网页游戏源码下载 - 毕业设计期末项目
资源摘要信息:"该压缩包文件名为【Web网页设计制作-毕业设计期末大作业】桌球网页游戏源码.zip，从文件名可以推断，该文件包含了桌球网页游戏的完整源代码，这可能是一个学生为了完成其毕业设计而开发的项目。...
闲来无事，用HTML+CSS+JS打造一个84键机械键盘模拟器
weixin_44692308的博客
04-18 1471
今天闲来无聊，突发奇想要用前端技术模拟一个机械键盘。说干就干，花了点时间搞出来了这么一个有模有样的84键机械键盘模拟器。是不是挺像那么回事的？
html css js网页制作成品——HTML+CSS+js美甲店网页设计（5页）附源码
卡拉米
04-26 879
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
使用css修饰网页元素
最新发布
2302_80250536的博客
04-26 503
设置文本元素的字体类型语法：name是字体名称，字体名称按优先顺序排列，以逗号隔开，如果字体名称包含空格，则要用引号括起。
56、如何快速让⼀个盒⼦⽔平垂直居中
qq_45600165的博客
04-18 371
flex布局+外边距（margin）实现：给⽗级设置为display: flex；绝对定位+外边距（margin）+C3的转换transform 中的translate实现：：绝对定位元素，利⽤。绝对定位+外边距（margin）实现：：绝对定位的元素将上下左右都设置为O，再设置margin:auto 即。纯flex布局实现：：给元素设置flex布局，添加flex的alignltems:center垂直居。中,justifycontent:center⽔平居中，实现居中效果；就可以实现⽔平垂直居中显⽰；
CSS3 基础（边框效果）
分享我的点点滴滴，在成长路上与你同行！
04-23 589
CSS3 基础（边框效果）
CSS 选择器介绍
2401_89793006的博客
04-23 860
通过 CSS，可以控制网页中元素的布局、颜色、字体等视觉效果。通过以上内容的学习和实践，可以系统地掌握 CSS 的核心概念、高级技巧以及最佳实践，从而在实际项目中开发出高效、优雅且兼容性良好的网页样式。Bootstrap、Foundation 等提供现成的组件和布局，加速开发进程。使用浏览器的开发者工具检查样式应用情况，并进行必要的调整。如 Sass、Less 等，提供变量、嵌套等高级功能。在元素内容前或后插入内容，常用于添加图标、引号等。匹配某个元素的所有后代元素，使用空格分隔。
Vue3+TS中svg图标的使用-@unocss/preset-icons
程序员张三
04-22 325
是 UnoCSS 提供的图标预设，支持从加载图标，本文介绍本地图标库的使用。
【高频考点精讲】实现垂直居中的多种CSS方法比较与最佳实践
全栈老李的博客
04-26 558
今天咱们聊聊前端开发中最让人头疼的问题之一——垂直居中。不知道你们有没有遇到过这种情况：明明设置了水平居中了，垂直方向怎么折腾都不对劲。全栈老李当年刚入行时，为了一个div居中能折腾一晚上，现在想想真是血泪史啊。
HTML5+CSS3+JS小实例：CSS太阳动画特效
艾恩小灰灰的博客
04-22 698
实例：CSS太阳动画特效。技术栈：HTML+CSS+JS。
【前端】CSS 基础
AAlykk的博客
04-24 746
作者：დ旧言~> 座右铭：松树千年终是朽，槿花一日自为荣。> 目标：了解 CSS 基础语法。> 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安!
CSS内边距、外边距、边框
2401_86523075的博客
04-23 331
内边距 ：内容区（Content）与边框（Border）之间的透明间距，用于增加元素内部的留白。不影响元素内容本身的尺寸（如文字大小），但会增大元素的总占用空间。边框：定义 围绕内容和内边距的可见边界线，用于装饰或分隔元素。外边距 ：元素与其他元素之间的透明间距，用于控制元素外部的布局间隔。: 可以一次性设置边框的宽度、样式和颜色。: 设置元素的所有内边距大小。: 设置元素的顶部内边距大小。: 设置元素的右侧内边距大小。: 设置元素的底部内边距大小。: 设置元素的左侧内边距大小。: 设置边框的颜色。
WEBSTORM前端 —— 第2章：CSS —— 第2节：文字控制属性与CSS特性
2401_82750246的博客
04-25 931
特殊性是一个衡量选择器权重的指标，它由四个部分组成：内联样式、ID 选择器、类选择器（包括属性选择器和伪类选择器）、元素选择器（包括伪元素选择器）。特殊性的计算方式是：内联样式的权重最高，ID 选择器次之，然后是类选择器，最后是元素选择器。在实际的网页开发中，一个元素可能会受到多个 CSS 规则的影响，这些规则可能来自不同的样式表（外部样式表、内部样式表），也可能来自不同的选择器。通过了解 CSS 优先级的规则，你可以更好地控制元素的样式，避免样式冲突和意外的显示效果。：如果属性是可继承的，则使用继承值；
Tailwind CSS 开发入门：掌握基础语法要点
2501_91137919的博客
04-22 1453
在前端开发中，Tailwind CSS 摒弃传统 CSS 繁琐写法，掌握其基础语法是熟练运用它的关键，下面将详细介绍核心基础语法，并结合实战示例
CSS初识
a2844967431的博客
04-23 661
可以理解给页面化妆，美化排版。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值