如何在HTML页面的左侧添加一张图片？

时间：2014-05-19 14:16:55

标签： javascript php html css

我正在尝试将一张图片添加到此页面的左侧，我知道HTML的基本内容。有什么建议吗？ 以下不是在按摩？我需要两个容器还是错误的东西？

<?
session_start();
$_SESSION['usertmp'];
$_SESSION['emailtmp'];
if(strlen($_SESSION['usertmp'])<1 ||is_null($_SESSION['usertmp']))
{
    $_SESSION['usertmp'] = "";
}
if(strlen($_SESSION['emailtmp'])<1 ||is_null($_SESSION['emailtmp']))
{
    $_SESSION['emailtmp'] = "";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show Information</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}

#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}

#
</style>
</head>
<body>
<div id="page-background"><img src="images/main.jpg" width="100%" height="100%" alt="Smile"></div>
<left>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
</left>
<center>
<div class="container" style="width:800px" id="content">
  <div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />                                <!-- end .header --></div>
<center>
  <div class="content" style="background-image:url(); height:427px; color: #FFF;vertical-align:middle">
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table> 

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p>&nbsp;</p>
  <p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>

  </div>
    </center>
  </center>
</body>
</html>

3 个答案:

答案 0 :(得分：2)

有很多方法可以实现您的目标。如果可以，您应该尝试简化标记。如果要将登录凭据表保留在中间。这是一种使用3个主要div作为32.98％宽度列的方法。将它们向左浮动并使用左侧所需图片的第一列。这是在jsbin。当然，图像无法正常工作，但它无法访问正确的路径http://jsbin.com/muxac/1/edit 

<!doctype html>

<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />

<link rel="stylesheet" href="styles/main.css">
<style>
    .col-1, .col-2, .col-3 {
        width: 32.98%;
        float:left;
    }

</style>

</head>
<body>
<div class="container">
<header class="header">

</header>
<div class="row">
    <div class="col-1">
        <div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /></div>
    </div> <!-- End of COLUMN 1 --> 

    <div class="col-2"> <!-- Start of COLUMN 2 -->

        <div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
            <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
                <tr>
                    <form name="form1" method="post" action="checklogin.php">
                        <td>
                            <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
                                <tr>
                                    <td colspan="3"><strong>Member Login </strong></td>
                                </tr>
                                <tr>
                                    <td width="78">Username</td>
                                    <td width="6">:</td>
                                    <td width="294"><input name="myusername" type="text" id="myusername"></td>
                                </tr>
                                <tr>
                                    <td>Password</td>
                                    <td>:</td>
                                    <td><input name="mypassword" type="password" id="mypassword"></td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td><input type="submit" name="Submit" value="Login"></td>
                                </tr>
                            </table>
                        </td>
                    </form>
                </tr>
            </table>

            <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
                <tr>
                    <form name="form2" method="post" action="signup.php">
                        <td>
                            <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
                                <tr>
                                    <td colspan="3"><p>&nbsp;</p>
                                        <p><strong> Sign Up Here</strong></p></td>
                                </tr>
                                <tr>
                                    <td width="78">Username</td>
                                    <td width="6">:</td>
                                    <td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
                                </tr>
                                <tr>
                                    <td>Enter Password</td>
                                    <td>:</td>
                                    <td><input name="mypassword" type="password" id="mypassword"></td>
                                </tr>
                                <tr>
                                    <td>Confirm Password</td>
                                    <td>:</td>
                                    <td><input name="mypassword2" type="password" id="mypassword2"></td>
                                </tr>
                                <tr>
                                    <td>Email id</td>
                                    <td>:</td>
                                    <td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
                                </tr>

                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td><input type="submit" name="Submit" value="Sign Up"></td>
                                </tr>
                            </table>
                        </td>
                    </form>
                </tr>
            </table>
    </div>  <!-- End of COLUMN 2 --> 
    <div class="col-3"> <!-- COLUMN 3 --> 
        <!-- You can leave this empty if you want -->
    </div>
    <div class="row">
        <div class="footer">

        </div>

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


</body>
</html>

答案 1 :(得分：0)

如果您想要的只是左上角的标题图片，请将<style>放入.header img {display: inline-block; float: left;}

答案 2 :(得分：0)

定位图片您可以使用CSS。这是代码（在html标签的style属性中插入它）：

position:absolute;left:0px;top:0px/*Here inserte the necesary pixels to position the picture*/
相关问题
最新问题