我使用的HTML代码无法正常显示?

时间:2017-09-24 22:48:43

标签: html

我正在使用这个预先制作的个人资料代码。他们给了我html代码。所以我尝试使用它。它给我的全部是错误的展示。我把它应该显示的图片联系起来。以及我使用它时显示的内容。

如果代码有点不稳定,也很抱歉。我刚刚开始使用它。感谢谁帮助过我!

它应该显示为什么 Figure 1

它做了什么。 Figure 2

代码:

<div class="container">
<div class="row clearfix well">
    <div class="col-md-2 column">
        <img class="img-thumbnail" alt="140x140" 
src="http://lorempixel.com/140/140/" />
    </div>
    <div class="col-md-8 column">
        <blockquote>
            <p>
                Potter Guy
            </p> <small>21 / M / Single / Straight <cite>London 
England</cite></small>
        </blockquote>
    </div>
    <div class="col-md-2 column">

             <button class="btn btn-default btn-block" type="button">
                Poke
             </button>
             <button class="btn btn-default btn-block" type="button">
                Message
             </button>
             <button class="btn btn-default btn-block" type="button">
                Save
             </button>


    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="tabbable" id="tabs-444468">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-200304" data-toggle="tab">About</a>
                </li>
                <li>
                    <a href="#panel-567649" data-toggle="tab">Photos</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="panel-200304">
                     <div class="row clearfix">
                        <div class="col-md-8 column">
                            <p>
                                <strong>About me</strong><br/>
                                it's just awful to write this stuff and i 
hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>What i am doing with my 
life</strong><br/>
                                it's just awful to write this stuff and i 
  hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
 person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>I am really good at ?</strong><br/>
                                it's just awful to write this stuff and i 
hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>The first thing you will notice 
about me?</strong><br/>
                                it's just awful to write this stuff and i 
hate having to sell myself or make myself seem like some amazing superhuman. 
i have some generic interests, im a bit shy, and i dont play games and just 
want be there for a girl and make her feel like the most unique and special 
person, so this is one of the most annoying experiences ever. i dont even 
know why i bother with this stuff when everyone is basically selling 
themselves as an idealized superman and I just want girls to know who I am 
and they can take or leave it. 
                            </p>
                            <hr/>
                            <p>
                                <strong>I cant live without ?</strong><br/>
                                My Mobile
                                My Car
                                My Dog
                            </p>
                            <hr/>
                            <p class="well">
                            <strong>I am looking for ?</strong><br/>
                                 someone good with heart
                            </p>
                        </div>
                        <div class="col-md-4 column">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>
                                            Details
                                        </th>
                                        <th>
                                            His/ Her
                                        </th> 
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            Last Online
                                        </td>
                                        <td>
                                            1 hour ago
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Ethinicity
                                        </td>
                                        <td>
                                            White
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Height
                                        </td>
                                        <td>
                                            5' 8"
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Body type
                                        </td>
                                        <td>
                                            Slim
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Diet
                                        </td>
                                        <td>
                                            Veg
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Smoke
                                        </td>
                                        <td>
                                            No
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Drink
                                        </td>
                                        <td>
                                            Occasionally
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Drugs
                                        </td>
                                        <td>
                                            No
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Religion
                                        </td>
                                        <td>
                                            Hindu
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Sign
                                        </td>
                                        <td>
                                            Vergo
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Education
                                        </td>
                                        <td>
                                            Masters
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Job
                                        </td>
                                        <td>
                                            Consultant
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Income
                                        </td>
                                        <td>
                                            5 figures
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Language
                                        </td>
                                        <td>
                                            <ol>
                                             <li>English</li>
                                             <li>Spanish</li>
                                             <li>Hindi</li>
                                             </ol>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="panel-567649">
                                     <div class="row clearfix">
    <div class="col-md-8 column">
        <img alt="140x140" src="http://lorempixel.com/140/140/" /><img 
alt="140x140" src="http://lorempixel.com/140/140/" /><img alt="140x140" 
src="http://lorempixel.com/140/140/" /><img alt="140x140" 
src="http://lorempixel.com/140/140/" />
    </div>
    <div class="col-md-4 column">
        <p>
            Lorem ipsum dolor sit amet, <strong>consectetur adipiscing 
elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac 
habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. 
Nam 
purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere 
diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin 
consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id 
bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum 
nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, 
pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat 
eu.</small>
        </p>
    </div>
</div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>

1 个答案:

答案 0 :(得分:1)

提供的HTML使用Bootstrap样式。 Bootstrap是用户界面的常用库。

要使用Bootstrap,您将在头部包含引用引导程序CSS文件的链接标记,以及引用正文底部的引导程序javascript文件的脚本标记,如下所示:

<!DOCTYPE html>
<html>
  <head>
    <title>Your web page's title</title>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  </head>
  <body>

    <div class="container">
      <div class="row clearfix well">
        <div class="col-md-2 column">
          <img class="img-thumbnail" alt="140x140" 
               src="http://lorempixel.com/140/140/" />
        </div>
        <div class="col-md-8 column">
          <blockquote>
            <p>
              Potter Guy
            </p> <small>21 / M / Single / Straight <cite>London 
            England</cite></small>
          </blockquote>
        </div>
        <div class="col-md-2 column">

          <button class="btn btn-default btn-block" type="button">
            Poke
          </button>
          <button class="btn btn-default btn-block" type="button">
            Message
          </button>
          <button class="btn btn-default btn-block" type="button">
            Save
          </button>


        </div>
      </div>
      <div class="row clearfix">
        <div class="col-md-12 column">
          <div class="tabbable" id="tabs-444468">
            <ul class="nav nav-tabs">
              <li class="active">
                <a href="#panel-200304" data-toggle="tab">About</a>
              </li>
              <li>
                <a href="#panel-567649" data-toggle="tab">Photos</a>
              </li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="panel-200304">
                <div class="row clearfix">
                  <div class="col-md-8 column">
                    <p>
                      <strong>About me</strong><br/>
                      it's just awful to write this stuff and i 
                      hate having to sell myself or make myself seem like some amazing superhuman. 
                      i have some generic interests, im a bit shy, and i dont play games and just 
                      want be there for a girl and make her feel like the most unique and special 
                      person, so this is one of the most annoying experiences ever. i dont even 
                      know why i bother with this stuff when everyone is basically selling 
                      themselves as an idealized superman and I just want girls to know who I am 
                      and they can take or leave it. 
                    </p>
                    <hr/>
                    <p>
                      <strong>What i am doing with my 
                        life</strong><br/>
                      it's just awful to write this stuff and i 
                      hate having to sell myself or make myself seem like some amazing superhuman. 
                      i have some generic interests, im a bit shy, and i dont play games and just 
                      want be there for a girl and make her feel like the most unique and special 
                      person, so this is one of the most annoying experiences ever. i dont even 
                      know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.

                      I am really good at ?
                      it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.

                      The first thing you will notice about me?
                      it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.

                      I cant live without ?
                      My Mobile My Car My Dog

                      I am looking for ?
                      someone good with heart
                      Details His/ Her Last Online 1 hour ago Ethinicity White Height 5' 8" Body type Slim Diet Veg Smoke No Drink Occasionally Drugs No Religion Hindu Sign Vergo Education Masters Job Consultant Income 5 figures Language
                      English
                      Spanish
                      Hindi
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui. Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.

                  </div>
                </div>
              </div>

              <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

              </body>
            </html>

这里是quick pen