Início / coding / 问题

Perguntas[html](coding)

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

Sou iniciante em programação e estou tentando testar a codificação no meu site antes de me lançar de cabeça na criação. O problema que me impede de continuar, no entanto, é o meu código de margem. Ele funciona, mas continua aparecendo no texto do meu site, bem como em qualquer outro código que eu teste. Existe alguma maneira de corrigir isso?

(código)

<!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>

O botão no snippet acima tem um efeito de fundo em forma de elipse que aparece quando você passa o mouse sobre ele. Atualmente, as dimensões da elipse são proporcionais às dimensões do botão. Gostaria que a elipse fosse circular, com largura 141,4% maior que a dimensão maior do botão ou, se não for possível, a largura do botão. Como posso fazer isso?

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

Como posso aplicar a mesma função abaixo às outras duas seções da div? Gostaria que os botões primários uke intem cada div mostrassem/ocultassem o conteúdo dentro de suas seções filhas. Outro problema é que estou usando abas. Cada div está hospedada em uma aba diferente, então a classe ativa clicada precisa permanecer na alternância de abas.

$('.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

Encontrei um problema estranho. Eu queria criar uma página de índice simples para o domínio, onde usei apenas a tag "subdomain". Quero ter uma lista de domínios na ultag, mas queria uma fonte monoespaçada, então coloquei tudo na tag "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>

Mas isso o torna ulmuito alto, posso corrigir o problema configurando display: flex-o como ul. Mas quero saber por que isso está acontecendo. Tudo com HTML e CSS deve ser determinístico e acontecer por um motivo. Verifiquei line-heighta configuração como , 1emmas isso não resolveu o problema.

Por que a tag ulinterna preé tão grande? Observe também que h1 é irrelevante aqui.

Testei isso no Brave e no Firefox e funciona da mesma forma. É um bug ou um comportamento esperado? Não vejo esse efeito no Epiphany e no Safari.

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

Estou tentando alterar a cor do botão do segmento ativo, mas com todas as opções ele ainda é renderizado como branco.

aqui está o html e o 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>

como alterar a cor do botão ativo para #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>

Acima está o CSS que criei para os botões do menu suspenso em HTML. Como eu os alinharia ao centro da tela? Tentei o text-align, mas não funcionou. Uma solução que tentei antes fazia o menu aparecer na lateral do botão, em vez de na parte inferior. Existe algum código que o alinhe ao centro e ainda funcione corretamente como um menu?

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

Li que flex-basis deveria substituir width. Mas, neste exemplo, ambos os contêineres têm flex-basis:0, mas o segundo também tem width:50px"defined" e isso claramente tem o efeito de tornar o tamanho igual.

Então estou intrigado com duas coisas relacionadas:

  1. por que flex-basis:0 não substituiu a largura (eu não esperaria nenhum efeito ao adicionar widthao css)
  2. por que flex-basis:0 não funcionou para definir o tamanho hipotético como 0, resultando na largura igual sem adicionar largura

Pelo que entendi da especificação :

Determine o tamanho da base flexível e o tamanho principal hipotético de cada item:

  1. Se o item tiver uma base flexível usada definida, esse será o tamanho da base flexível.
  2. O tamanho principal hipotético é o tamanho da base flexível do item fixado de acordo com seus tamanhos principais mínimo e máximo usados ​​(e limitando o tamanho da caixa de conteúdo a zero).

Portanto, o tamanho da base flexível está definido e deve ser resolvido como 0. O tamanho principal hipotético também deve ser resolvido como 0, pois há restrições de largura mínima/máxima.

    .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>

insira a descrição da imagem aqui

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

Há letras brancas em um fundo preto. Pode haver espaços retangulares entre as palavras que exibem o vídeo. Como posso obter esse comportamento? Tentei usar o mix-blende-mode, mas o elemento retângulo sempre desaparece no fundo pai. Tentei com pseudoelementos e atribuindo diferentes índices z/posições aos elementos, mas não consegui.

Aqui está um exemplo de como deveria ser: https://msttestaddfiles.netlify.app/part_2.mp4

E o que eu fiz abaixo

* {
        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

Sou novato em CSS e estou tentando descobrir como criar menus suspensos.

Copiei praticamente o código do W3Schools, que ensinava este tópico, mas o modifiquei para ter três listas suspensas separadas, que aparecem com base na parte da barra de navegação sobre a qual o cursor está sendo passado. No entanto, as listas aparecem em cima do botão em vez de abaixo dele, como no exemplo mostrado no W3Schools. Meu código é mostrado abaixo.

<!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>

Tentei usar o código do W3Schools como está e obtive os mesmos resultados do exemplo deles no navegador que estou usando para verificar os resultados, então não é um problema do navegador.

Tentei refazer toda a parte CSS do código, pedaço por pedaço, tentando copiar o máximo possível do código do W3Schools e modificando para se adequar à minha estrutura de 3 menus suspensos, mas encontrei o mesmo problema.

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

Em matemática, uma matriz é uma matriz retangular ou tabela de números, símbolos ou expressões, com elementos ou entradas organizados em linhas e colunas, que é usada para representar um objeto matemático ou propriedade de tal objeto.

Abaixo está um exemplo de uma matriz

insira a descrição da imagem aqui

Gostaria de recriar a tabela usando 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>

Como ficaria minha folha de estilo se eu recriasse as "bordas"?

html