1. Pagina principală
  2. Problema

Cum de a crea clase sau id-uri pentru link-uri

0

Problema

Am o versiune de probă aici de ceea ce încerc să fac. Nu sunt sigur ceea ce îmi lipsește, dar cu siguranta eu sunt lipsește ceva. Ambele flipcards duce la acelasi link si nu le pot da pentru a fi separate, atunci când am schimba unul pe alte schimbări. Am încercat să fac o clasă separată, dar cred că am făcut-o greșit. De asemenea, vă întrebați cum de a repara lag-ul care apare pentru a doua flipcard. Vă mulțumesc în avans.

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

Cel mai bun răspuns

1

Problema este că structura documentului este greșit, ai 2 corp elemente, etc. Aici am reparat-o pentru tine. Ar putea avea nevoie pentru a pune cărțile side by side.

<!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
vă mulțumesc foarte mult!!!! vrei să-mi explici ce ai făcut și unde am greșit așa că am poate repara ei în viitor?
l117
Nici o problema, nu uita să upvote :) problema a fost structura de documentul HTML a fost greșit.
Computers Enthusiast
ajuns la 15 reputație tocmai acum ți-am lăsat un upvote
l117

În alte limbi

Această pagină este în alte limbi

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

Popular în această categorie

Întrebări frecvente în această categorie

Nu se poate elimina subliniez, nici schimba culoarea textului folosind un hyperlink
De ce este o componentă HTML stil afectează celelalte componente?
Schimbă dimensiunea fontului lângă un buton radio
Au variabilă modificări pe butonul de click, dar stabilit inițial folosind localStorage în vue
Adăugarea de opiniile și icoane Inima prea fiecare nume film
Iata unele asincron cod pentru a oferi o coadă de căutări amazon cu seleniu, de ce primesc AttributeError? La __init__ nu se execută?
Cum aș putea traduce asta html cerere POST în python
Schimbarea de Imagine src cu document.getElementByClassName și ngif directiva
Tabelul de date Grupate / Separate de Data
Link-ul din Formularul HTML/JS [duplicat]