none
Inserir CSS para mostrar dependências RRS feed

  • Pergunta

  • Preciso desenvolver um documento HTML parecido com a imagem abaixo:

    inserir a descrição da imagem aqui

    Estou com dificuldade em fazer as ligações, olha que está meu projeto.

    inserir a descrição da imagem aqui

    Preciso que fique mais ou menos desse jeito

    inserir a descrição da imagem aqui

    Meu html está assim:

    <!DOCTYPE HTML>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <title></title>
    </head>
    <link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap.css" rel="stylesheet" />
    <link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap-theme.css" rel="stylesheet" />
    <style>
    
    .div1{
    position: absolute;
    top: 200px;
    left: 25px;
    }
    
    .div2{
    position: absolute;
    top: 50px;
    left: 225px;
    }
    
    .div3{
    position: absolute;
    top: 400px;
    left: 225px;
    }
    
    .div4{
    position: absolute;
    top: 200px;
    left: 425px;
    }
    
    </style>
    <body>
    <div class="div1">
    <table class="table table-striped table-responsive">
    
        <tr>
            <td>1</td>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td></td>
            <td>A</td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td>0</td>
            <td>5</td>
        </tr>
       </table>
      </div>
    
      <div class="div2">
      <table class="table table-striped table-responsive">
        <tr>
            <td>6</td>
            <td>5</td>
            <td>10</td>
        </tr>
        <tr>
            <td></td>
            <td>B</td>
            <td></td>
        </tr>
        <tr>
            <td>11</td>
            <td>5</td>
            <td>15</td>
        </tr>
       </table>
       </div>   
    
       <div class="div3">
        <table class="table table-striped table-responsive">
        <tr>
            <td>6</td>
            <td>10</td>
            <td>15</td>
        </tr>
        <tr>
            <td></td>
            <td>C</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>15</td>
        </tr>
       </table>
       </div>
    
     <div class="div4"> 
      <table class="table table-striped table-responsive">
        <tr>
            <td>16</td>
            <td>15</td>
            <td>30</td>
        </tr>
        <tr>
            <td></td>
            <td>D</td>
            <td></td>
        </tr>
        <tr>
            <td>16</td>
            <td>0</td>
            <td>30</td>
        </tr>
        </table>
      </div>
    
       </body> 
       </html>

    Por favor, lembre-se de “Marcar como Resposta” as respostas que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    segunda-feira, 26 de outubro de 2015 20:06

Respostas