How to design a user profile page layout with HTML?
I am trying to design a user profile page layout with HTML, I have tried several times to give it a look like how I want it to be 开发者_如何学JAVAbut I failed.
Here is the link where you can get an idea how I want it to be look like- http://i56.tinypic.com/jjydkg.jpg
Would you please kindly help me with this? Thanks in Advance
Assuming the outer rectangle is the <body> tag, this is a basic layout which you can modify easily enough.
<style type="text/css">
#ProfilePage
{
/* Move it off the top of the page, then centre it horizontally */
margin: 50px auto;
width: 635px;
/* For visibility. Delete me */
border: 1px solid red;
}
#LeftCol
{
/* Move it to the left */
float: left;
width: 200px;
text-align: center;
/* Move it away from the content */
margin-right: 20px;
/* For visibility. Delete me */
border: 1px solid brown;
}
#Photo
{
/* Width and height of photo container */
width: 200px;
height: 200px;
/* For visibility. Delete me */
border: 1px solid green;
}
#PhotoOptions
{
text-align: center;
width: 200px;
/* For visibility. Delete me */
border: 1px solid brown;
}
#Info
{
width: 400px;
text-align: center;
/* Move it to the right */
float: right;
/* For visibility. Delete me */
border: 1px solid blue;
}
#Info strong
{
/* Give it a width */
display: inline-block;
width: 100px;
/* For visibility. Delete me */
border: 1px solid orange;
}
#Info span
{
/* Give it a width */
display: inline-block;
width: 250px;
/* For visibility. Delete me */
border: 1px solid purple;
}
</style>
<div id="ProfilePage">
<div id="LeftCol">
<div id="Photo"></div>
<div id="ProfileOptions">
a
</div>
</div>
<div id="Info">
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
<p>
<strong>Name:</strong>
<span>Sirjon</span>
</p>
</div>
<!-- Needed because other elements inside ProfilePage have floats -->
<div style="clear:both"></div>
</div>
加载中,请稍侯......
精彩评论