1. Página inicial
  2. Pergunta

Como criar classes ou ids para as ligações

0

Pergunta

Eu tenho uma versão de exemplo aqui do que eu estou tentando fazer. Eu tenho certeza que estou em falta, mas eu definitivamente estou faltando alguma coisa. Tanto flipcards levar para o mesmo link e eu não posso levá-los a ser separado, quando eu mudar o outro também muda. Eu tentei fazer uma classe separada, mas eu acho que eu fiz de errado. Também queria saber como corrigir o atraso que ocorre para o segundo flipcard. Obrigado antecipadamente.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 280px;
  padding: 0px;
  height: 220px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="row">
  <div class="column" style="background-color:#aaa;">
     <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext1
body {
  font-family: Arial;
  text-align: center;
}

.flip-card1 {
  background-color: transparent;
  width: 280px;
  height: 220px;
  perspective: 1000px;
}

.flip-card-inner1 {
  position: relative;
  width: 280px;
  height: 220px;
  text-align: center;
  transition: transform 0.9s;
  transform-style: preserve-3d;
  box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}

.flip-card1:hover .flip-card-inner1 {
  transform: rotateY(180deg);
}

.flip-card-front1, .flip-card-back1 {
  position: absolute;
  width: 280px;
  height: 220px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front1 {
  background-color: #bbb;
  color: black;
}

.flip-card-back1 {
  background-color: #354C2F;
  color: white;
   width: 280px;
  height: 220px;
  transform: rotateY(180deg);
  font-family: Arial;
  text-align: center;
  padding: 0px;
background-image: url('');
  
  
}
a.link1{
href="https://yorku.ca/research" target="https://yorku.ca/research"}
</style>
</head>
<body>


<div class="flip-card1">
  <div class="flip-card-inner1">
    <div class="flip-card-front1">
      <img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
    </div>
    <div class="flip-card-back1">
    
      <a class="link1" href="https://yorku.ca/research">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png" width="280" height="220"> 
     
    </div>
  </div>
</div>
  </div>
  <div class="column" style="background-color:#bbb;">
     <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext2
body {
  font-family: Arial;
  text-align: center;
}

.flip-card2 {
  background-color: transparent;
  width: 280px;
  height: 220px;
  perspective: 1000px;
}

.flip-card-inner2 {
  position: relative;
   background-color: #354C2F;
  width: 280px;
  height: 220px;
  text-align: center;
  transition: transform 0.9s;
  transform-style: preserve-3d;
  box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}

.flip-card2:hover .flip-card-inner2 {
  transform: rotateY(180deg);
}

.flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 280px;
  height: 220px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front2 {
  background-color: #bbb;
  color: black;
}

.flip-card-back2 {
  background-color: #354C2F;
  color: white;
   width: 280px;
  height: 220px;
  transform: rotateY(180deg);
  font-family: Arial;
  text-align: center;
  padding: 0px;
background-image: url('');
  
  
}
a.link2{
href="https://yorku.ca/c4" target="https://yorku.ca/c4"}

</style>
</head>
<body>


<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
      <img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
    </div>
    <div class="flip-card-back2">
     <a class="link2" href="https://yorku.ca/c4">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png" width="280" height="220"> 
     
     
    </div>
  </div>
</div>
 

</body>
</html>

class html hyperlink
2021-11-11 01:28:35
1

Melhor resposta

1

O problema é que a estrutura do documento é errado, você tem 2 corpo elementos, etc. Aqui eu fixa-lo para você. Precisa colocar as cartas ao lado.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        box-sizing: border-box;
      }

      /* Create four equal columns that floats next to each other */
      .column {
        float: left;
        width: 280px;
        padding: 0px;
        height: 220px; /* Should be removed. Only for demonstration */
      }

      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      /* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 600px) {
        .column {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="column" style="background-color: #aaa">
        <html>
          <head>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            <style>
              .fliptext1 body {
                font-family: Arial;
                text-align: center;
              }

              .flip-card1 {
                background-color: transparent;
                width: 280px;
                height: 220px;
                perspective: 1000px;
              }

              .flip-card-inner1 {
                position: relative;
                width: 280px;
                height: 220px;
                text-align: center;
                transition: transform 0.9s;
                transform-style: preserve-3d;
                box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
              }

              .flip-card1:hover .flip-card-inner1 {
                transform: rotateY(180deg);
              }

              .flip-card-front1,
              .flip-card-back1 {
                position: absolute;
                width: 280px;
                height: 220px;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
              }

              .flip-card-front1 {
                background-color: #bbb;
                color: black;
              }

              .flip-card-back1 {
                background-color: #354c2f;
                color: white;
                width: 280px;
                height: 220px;
                transform: rotateY(180deg);
                font-family: Arial;
                text-align: center;
                padding: 0px;
                background-image: url("");
              }

              .flip-card2 {
                background-color: transparent;
                width: 280px;
                height: 220px;
                perspective: 1000px;
              }

              .flip-card-inner2 {
                position: relative;
                background-color: #354c2f;
                width: 280px;
                height: 220px;
                text-align: center;
                transition: transform 0.9s;
                transform-style: preserve-3d;
                box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
              }

              .flip-card2:hover .flip-card-inner2 {
                transform: rotateY(180deg);
              }

              .flip-card-front2,
              .flip-card-back2 {
                position: absolute;
                width: 280px;
                height: 220px;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
              }

              .flip-card-front2 {
                background-color: #bbb;
                color: black;
              }

              .flip-card-back2 {
                background-color: #354c2f;
                color: white;
                width: 280px;
                height: 220px;
                transform: rotateY(180deg);
                font-family: Arial;
                text-align: center;
                padding: 0px;
                background-image: url("");
              }
            </style>
          </head>
          <body>
            <div class="flip-card1">
              <div class="flip-card-inner1">
                <div class="flip-card-front1">
                  <img
                    src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg"
                    alt="Avatar"
                    style="width: 280px; height: 220px"
                  />
                </div>
                <div class="flip-card-back1">
                  <a
                    class="link1"
                    href="https://yorku.ca/research"
                    target="https://yorku.ca/research"
                  >
                    <img
                      border="0"
                      alt="YorkU C4"
                      src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png"
                      width="280"
                      height="220"
                    />
                  </a>
                </div>
              </div>
            </div>

            <div class="column" style="background-color: #bbb">
              <div class="flip-card2">
                <div class="flip-card-inner2">
                  <div class="flip-card-front2">
                    <img
                      src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg"
                      alt="Avatar"
                      style="width: 280px; height: 220px"
                    />
                  </div>
                  <div class="flip-card-back2">
                    <a
                      class="link2"
                      href="https://yorku.ca/c4"
                      target="https://yorku.ca/c4"
                    >
                      <img
                        border="0"
                        alt="YorkU C4"
                        src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png"
                        width="280"
                        height="220"
                      />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </body>
        </html>
      </div>
    </div>
  </body>
</html>

2021-11-11 01:38:22
muito obrigado!! você se importa de explicar o que você fez e onde eu errei para que eu possa corrigi-los no futuro?
l117
Não há problema, não se esqueça vote positivamente :) O problema era a estrutura do documento HTML foi errado.
Computers Enthusiast
tenho 15 reputação só agora, então eu deixei um vote positivamente
l117

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Ссылка
Italiano
..................................................................................................................
Link
Polski
..................................................................................................................
Link
Română
..................................................................................................................
Legătură
한국어
..................................................................................................................
링크
हिन्दी
..................................................................................................................
लिंक
Français
..................................................................................................................
Lien
Türk
..................................................................................................................
Atıf
Česk
..................................................................................................................
Odka
ไทย
..................................................................................................................
เชื่อมโยง
中文
..................................................................................................................
链接
Español
..................................................................................................................
Referencia
Slovenský
..................................................................................................................
Odkaz

Popular nesta categoria

Perguntas populares nesta categoria

Não é possível remover o sublinhado, nem alterar a cor do texto usando um hiperlink
Por que é um componente HTML estilo de afetar os outros componentes?
Alterar o tamanho da letra ao lado de um botão de rádio
Tem altera a variável sobre o botão de clique, mas inicialmente definida usando o localStorage no vue
Adicionar classificações e Coração ícones também cada nome do filme
Vejamos alguns assíncrono de código para fornecer uma fila do amazon pesquisas com o selênio, por que estou recebendo AttributeError? O __init__ não está em execução?
Como eu poderia traduzir este html solicitação POST em python
Mudar Imagem src com o documento.getElementByClassName e ngif directiva
Tabela de dados Agrupados (a) / Separado por Data
Link do Formulário em HTML/JS [duplicado]