我正在使用这个预先制作的个人资料代码。他们给了我html代码。所以我尝试使用它。它给我的全部是错误的展示。我把它应该显示的图片联系起来。以及我使用它时显示的内容。
如果代码有点不稳定,也很抱歉。我刚刚开始使用它。感谢谁帮助过我!
代码:
<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>
答案 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