How to design a user profile page layout with HTML?_问答_开发者

How to design a user profile page layout with HTML?

开发者 https://www.devze.com 2023-04-03 12:41 出处：网络

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.

相关专题：

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>