主页 / coding / 问题

问题[html](coding)

Martin Hope
Olivia McGregor
Asked: 2025-04-29 07:55:05 +0800 CST
  • 4

我是编程新手，在正式开始创建网站之前，想先测试一下代码。然而，导致我继续操作的问题是边距代码。虽然可以正常工作，但它总是出现在我网站上的文本以及我尝试的其他代码中。有什么方法可以解决这个问题吗？

（代码）

<!DOCTYPE html>
<html>
  <head>
<style>
body {
  background-image: url("starbackground.gif");
}
</style>
</head>

<body>
    <div id= "header">
    <meta charset="UTF-8">
    <title>Testing stuff</title>
   </div>
   
  <div id= tst>
    <p><h1 style="color:Tomato;">testing stuff rn</h1></p>
    </div>

   <div id = "textfortextbox"> 
   <p><h2 style="color:White;">text OooOooh</h2></p>
</div>

    <div id = "textbox">
     margin-left:100px;
<img src="https://starchips.neocities.org/text%20box.png" width="1200" height="1000" > 

</div>

</body>
</html>

html
Martin Hope
Eric Wang
Asked: 2025-04-29 04:52:15 +0800 CST
  • 5

:root {
    --success: #0c0;
}

button {
    border: 2px solid;
    border-radius: 10px;
    cursor: pointer;
    margin: 1em 0.5em;
    padding: 10px 15px;
    transition: transform 1s;
}

button:active {
    transform: scale(90%);
}

button.animated {
    background-color: transparent;
    overflow: hidden;
    position: relative;
    transition: color 1s, border-color 1s, transform 0.2s;
    z-index: 1;
}

button.animated:hover {
    border-color: transparent;
}

button.animated::after {
    border: 0;
    border-radius: 50%;
    content: "";
    height: 150%;
    left: -25%;
    opacity: 0;
    position: absolute;
    top: -25%;
    transform: scale(0.1);
    transform-origin: center;
    transition: all 1s;
    width: 150%;
    z-index: -1;
}

button.animated:hover::after {
    opacity: 1;
    transform: scale(1);
}

.text,
button.animated.background::after {
    background-color: white;
}

.background,
button.animated.text:hover{
    color: white;
}

button.animated.text {
    border-color: var(--muted);
}

.success.text,
button.animated.success.background:hover {
    color: var(--success);
}

.success.background,
button.animated.success.text::after {
    background-color: var(--success);
}

button.animated.success.text:hover,
button.animated.success.background {
    border-color: var(--success);
}
<button class="animated success background">Button</button>
<button class="animated success background">Longer button</button>

上面代码片段中的按钮具有椭圆形的背景效果，当您将鼠标悬停在按钮上时，该效果就会出现。目前，椭圆的尺寸与按钮的尺寸成比例。我希望椭圆是圆形，其宽度是按钮长边的 141.4%，或者，如果不可能的话，是按钮的宽度。我该如何实现？

html
Martin Hope
riospereira
Asked: 2025-04-25 23:32:44 +0800 CST
  • 5

如何将下面的相同功能应用于其他两个 div 的部分？我希望每个 div 中的 primary-btns 按钮uk能够int显示/隐藏其子部分的内容。另一个问题是我正在使用标签页。每个 div 都托管在不同的标签页中，因此点击的 active 类需要保留在标签页切换时。

$('.uk').on("click", function() {
  $('#div-ONE-INT').hide();
  $('#div-ONE-UK').show();
  $(this).addClass('active');
  $('.int').removeClass('active');
  return false;
});

$('.int').on("click", function() {
  $('#div-ONE-INT').show();
  $('#div-ONE-UK').hide();
  $(this).addClass('active');
  $('.uk').removeClass('active');
  return false;
});

$('#div-ONE-INT').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="ONE">
  <a href="#" class="primary-btn active uk">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-ONE-UK">
    <!-- UK ONE content -->
  </section>

  <section id="div-ONE-INT">
    <!-- Int ONE content -->
  </section>
</div>

<div class="TWO">
  <a href="#" class="primary-btn uk active">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-TWO-UK">
    <!-- UK TWO content -->
  </section>

  <section id="div-TWO-INT">
    <!-- Int TWO content -->
  </section>
</div>

<div class="THREE">
  <a href="#" class="primary-btn uk active">UK</a>
  <a href="#" class="primary-btn int">International</a>

  <section id="div-THREE-UK">
    <!-- UK THREE content -->
  </section>

  <section id="div-THREE-INT">
    <!-- Int THREE content -->
  </section>
</div>

html
Martin Hope
jcubic
Asked: 2025-04-25 21:56:45 +0800 CST
  • 1

我发现了一个奇怪的问题。我想为只使用 subdomain 的域名创建一个简单的索引页，并希望在ul标签中包含域名列表，但又想使用等宽字体，所以我把所有内容都放在了 pre 标签中：

h1 { margin: 0 }
ul { margin-block: 0 }
<pre>
<h1>example.com</h1>
<ul>
  <li><a href="https://sub.example.com">sub.example.com</a></li>
</ul>
</pre>

但这会让 变得ul很高，我可以通过设置 来解决这个问题display: flex。ul但我想知道为什么会发生这种情况。HTML 和 CSS 的所有内容都应该是确定性的，并且发生都是有原因的。我尝试过line-height将其设置为 ，1em但这并没有解决问题。

为什么ul内部pre标签这么大？另外请注意，h1 元素在这里无关紧要。

我在 Brave 和 Firefox 中测试了这一点，效果相同。这是 bug 还是预期行为？我在 Epiphany 和 Safari 中没有看到这种效果。

html
Martin Hope
Moblize IT
Asked: 2025-04-25 11:41:48 +0800 CST
  • 5

我正在尝试更改活动段按钮的颜色，但所有选项仍然呈现为白色。

这是 html 和 css

ion-segment {
      background-color: #108453
      ion-segment-button {
        color: #108453;
      }
      
      .segment-button-checked {
          color: black !important; // it works properly 
          background-color: #108453 !important; 
          --indicator-color : transparent!important;
        }
      }

html

 <ion-segment color="primary" value="present" swipeGesture=false scrollable=true style="margin-left: 10px;margin-right: 10px;">
      <ion-segment-button value="present" content-id="present">
        <ion-label>Present</ion-label>
      </ion-segment-button>
      <ion-segment-button value="future" content-id="future">
        <ion-label>Future</ion-label>
      </ion-segment-button>
    </ion-segment>
    <ion-segment-view>
      <ion-segment-content id="present">
      </ion-segment-content>
      <ion-segment-content id="future">
      </ion-segment-content>
    </ion-segment-view>

如何将活动按钮颜色更改为#108453

html
Martin Hope
Emerald Udoh
Asked: 2025-04-25 05:12:15 +0800 CST
  • 5

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            What's Up At Pearson?
        </title>
        <style>
        
            
            
            .dropbtn {
            font-family: Monospace;
            font-size: 50px;
            margin-top: 5px;
            margin-bottom: 5px;
            border-color: black;
            }
            
            .dropdown {
            position: relative;
            display: inline-block;
            }
           
            
            .dropdown-content {
            display: none;
            position: relative;
            background-color: #f5e162;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            
            }
            
            .dropdown-content a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            
            }
            
            hr{
            border-color:#ff5c4a;
            
            }
            
            .dropdown-content a:hover {background-color: #f25757;}
            
            .dropdown:hover .dropdown-content {display: block;}
            
            .dropdown:hover .dropbtn {background-color: #ddd;}
        </style>
    </head>
    <body>
        <h1 style = "background-color: red; color: white; font-family: Monospace; font-size: 38px;
        margin: 0; padding: 10px">
            What's Up At Pearson?
            <img align = "right"width = "50px" height = "50px" 
            src = "https://upload.wikimedia.org/wikipedia/en/8/89/Lester_B_Pearson_High_School_Calgary_new_logo.png">
        </h1>
        
        <br>
        <hr style = "border-top: 5px solid yellow">
        
        <p style = "text-align: center; font-size:20px; font-family: Monospace">
            Welcome to the website What's Up At Pearson? A semi-interactive place full of interviews
            from your fellow students. Have some insight into different struggles students in 
            different subject areas may have while also learning some tips they may have that could
            help you. (This is a new computer science project, sorry if website looks bad :[)
        </p>
        
        <h2 style = "text-align: center; font-size: 30px; font-family: Monospace">
            Different Subject Areas Listed Below
        </h2>
        <hr>
        <div class = " dropdown">
            <button class = "dropbtn">Math</button>
            <div class = "dropdown-content">
                <a href = ""> Math</a>
            </div>
        </div>
        <hr>
        <div class = " dropdown">
            <button class = "dropbtn"> Sciences</button>
            <div class = "dropdown-content">
                <a href = ""> Physics</a>
                <a href = ""> Chemistry</a>
                <a href = ""> Bio</a>
            </div>
        </div>
        <hr>
        <div class = " dropdown">
            <button class = "dropbtn">Social Studies</button>
            <div class = "dropdown-content">
                <a href = "">Social Studies</a>
            </div>
        </div>
        <hr>
        <div class = " dropdown">
            <button class = "dropbtn">English</button>
            <div class = "dropdown-content">
                <a href = "">English</a>
            </div>
        </div>
        <hr>
        <div class = " dropdown">
            <button class = "dropbtn">CTS</button>
            <div class = "dropdown-content">
                <a href = "">Animation</a>
                <a href = "">Architecture</a>
                <a href = "">Computer Science</a>
                <a href = "">Construction</a>
                <a href = "">Pre-Engineering</a>
            </div>
        </div>
        <hr>
        <div class = " dropdown">
            <button class = "dropbtn">Fine Arts</button>
            <div class = "dropdown-content">
                <a href = "">Art</a>
                <a href = "">Dance</a>
                <a href = "">Drama</a>
                <a href = "">Technical Theatre</a>
                <a href = "">Culinary</a>
            </div>
        </div>
        <hr>
        <div class = "dropdown">
            <button class = "dropbtn">Personal</button>
            <div class = "dropdown-content">
                <a href = "">Buissness Managment</a>
                <a href = "">Gym</a>
                <a href = "">Yoga</a>
            </div>
        </div>
        <hr>
        
    </body>
</html>

上面是我在 HTML 中为下拉菜单按钮编写的 CSS。如何将它们对齐到屏幕中心？我试过使用 text-align，但没用。我之前尝试过的一个解决方案是让菜单从按钮的侧面而不是底部伸出。有没有代码可以让菜单对齐到中心，同时还能正常工作？

html
Martin Hope
Max Koretskyi
Asked: 2025-04-24 13:47:27 +0800 CST
  • 7

我读到过 flex-basis 应该覆盖 width 。但在这个例子中，两个容器都有flex-basis:0，但第二个容器也width:50px定义了 ，而且它显然具有使大小相等的效果。

所以我对两件相关的事情感到困惑：

  1. 为什么 flex-basis:0 没有覆盖宽度（我预计添加width到 css 时不会产生任何效果）
  2. 为什么 flex-basis:0 不能将假设尺寸设置为 0，从而导致宽度相等而不增加宽度

据我从规范中理解：

确定每个项目的弹性基础尺寸和假设主尺寸：

  1. 如果该项目具有明确的使用弹性基础，那就是弹性基础尺寸。
  2. 假设的主尺寸是根据项目的最小和最大主尺寸（并将内容框尺寸设为零）进行限制的项目的弹性基础尺寸。

因此，设置了弹性基本尺寸并应解析为 0。假设主尺寸也应解析为 0，因为存在最小/最大宽度限制。

    .container1, .container2 {
        width: 210px;
        height: 200px;
        padding: 10px;
        border: solid;
        display: inline-flex;
        box-sizing: border-box;

        div {
            margin: 1px;
            flex: 1 1 0;
        }

        & div:nth-child(1) {
            background: lightpink;
        }

        & div:nth-child(2) {
            background: lightblue;
        }
    }

    .container2 div {
        width: 50px;
    }
<div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

在此处输入图片描述

html
Martin Hope
Teoom07
Asked: 2025-04-21 10:38:14 +0800 CST
  • 6

黑色背景上有白色字母。单词之间可能有显示视频的矩形空格。我该如何实现这种效果？我尝试使用 mix-blende-mode，但矩形元素总是消失在父元素的背景中。我尝试使用伪元素并为元素设置不同的 z-index/position，但还是不行。

以下是一个示例：https://msttestaddfiles.netlify.app/part_2.mp4

下面我做了什么

* {
        box-sizing: border-box;
    }
    html, body {
        block-size: 100%;
    }


    body {
        margin: 0;
    }

    .content {
        position: relative;
        width: 100%;
        height: 100%;
    }


    .text {
        font-size: 10vi;

    }



    .text-block {
        position: relative;
        z-index: 2;
        background-color: black;
        color: white;
        padding: 30px;
        width: 100%;
        height: 100%;
    }



    .rect {
        display: inline-block;
        width: 150px;
        height: 5vi;
        margin: 0 10px;
        position: relative;
        z-index: 1;

    }




    .video {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
<div class="content">
            <div class="text-block">
                <span class="text">We're here</span>
                <span class="rect"></span>
                <span class="text"> to make healthy </span>
                <span class="rect"></span>
                <span class="text">livin effortless,</span>
                <span class="text"> so you can</span>
                <span class="rect"></span>
                <span class="text">live longer</span>
                <span class="text">and happier</span>
                <span class="rect"></span>
            </div>
            <video class="video" autoplay loop muted playsinline>
                <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
            </video>
          
        </div>

html
Martin Hope
Run 63
Asked: 2025-04-20 15:26:59 +0800 CST
  • 6

CSS 新手正在尝试弄清楚如何制作下拉菜单。

我基本上照搬了 W3Schools 上关于这个主题的代码，但做了一些修改，让它有三个独立的下拉列表，根据鼠标悬停在导航栏的哪个位置来显示，但列表显示在按钮的上方，而不是像 W3Schools 上的示例那样显示在按钮的下方。我的代码如下所示。

<!DOCTYPE html>
<html style="font-size: 16px;font-family: Roboto" lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style>
        .navBar{
            overflow: hidden;
            background-color: red;
        }

        .navBar button{
            background: transparent;
            color: white;
            border: none;
            outline: none;
            padding: 14px 16px;
            height: 48px;
            width: 128px;
            font-size: 16px;

            float: left;
        }

        .navEvents, .navGear, .navClubs{
            float: left;
            overflow: hidden;
        }

        .dropdownEvents, .dropdownGear, .dropdownClubs{
            display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        }

        .dropdownEvents a, .dropdownGear a, .dropdownClubs a{
          float: none;
          color: black;
        padding: 12px 16px;
          text-decoration: none;
        display: block;
        text-align: left;
        }

        .navEvents:hover .dropdownEvents{
            display: block;
        }

        .navGear:hover .dropdownGear{
            display: block;
        }

        .navClubs:hover .dropdownClubs{
            display: block;
        }
            
        </style>
    </head>
    <body>
        <h1>RUN63</h1>

        <div class="navBar">
            <button>Home</button>
            <div class="navEvents">
                <button>Events</button>
                <div class="dropdownEvents">
                    <a href="#">Live Events</a>
                    <a href="#">Past Events</a>
                    <a href="#">Ongoing Events</a>
                </div>
            </div>
            <div class="navGear">
                <button class="btnNavGear">Gear</button>
                <div class="dropdownGear">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
            <div class="navClubs">
                <button class="btnNavClubs">Clubs</button>
                <div class="dropdownClubs">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
            <button class="btnAbout">About</button>
        </div>

    </body>
</html>

我曾尝试使用 W3Schools 的代码，并在我用来检查结果的浏览器中获得了与其示例相同的结果，因此这不是浏览器的问题。

我尝试逐段重做代码的整个 CSS 部分，尝试从 W3Schools 代码中复制尽可能多的内容，同时进行修改以适应我的 3 个下拉菜单的结构，但我遇到了同样的问题。

html
Martin Hope
HJA24
Asked: 2025-04-20 00:21:55 +0800 CST
  • 4

在数学中，矩阵是数字、符号或表达式的矩形阵列或表格，其中元素或条目按行和列排列，用于表示数学对象或此类对象的属性。

下面是一个矩阵的例子

在此处输入图片描述

我想使用 CSS/HTML 重新创建表格

<table>
  <tr>
    <td>1</td>
    <td>9</td>
    <td>-13</td>
  </tr>
  <tr>
    <td>20</td>
    <td>5</td>
    <td>-6</td>
  </tr>
</table>

我的样式表看起来如何才能重新创建“边框”？

html