如何在页面的角落或中心添加html元素(按钮,链接等)?

时间:2012-08-08 09:01:39

标签: html css jsp

我有一个经理页面,我想在页面的右侧上添加 LOG-OUT 按钮。

我知道如何逐个添加按钮,例如:

enter image description here

以下是上页的代码:

<!-- Bank manager's permissions -->

<!DOCTYPE html>
<html>
<head><title>Bank Manager's Transactions Page</title>
<link rel="stylesheet" href="./css/styles.css" type="text/css"/>
</head>
<body>
    <table class="title">
      <tr><th>Manager's Transactions Page</th></tr>
    </table>

    <h1>Hello ${name.firstName} ${name.lastName} , You've logged in successfully!</h1>
    <h1>
    Please choose one of the following options
    </h1>

    <!-- The followings are Manager's permissions -->

    <fieldset>
      <legend>To get a list of all the employees at the bank</legend> 
      <form action="blablabla">     <!-- THAT ONE forwards to a servlet that's called Admin1.java -->
        <a href="adminAdds1">Press here to continue</a>  
      </form>
    </fieldset>

    <fieldset>
      <legend>To get a list of all the clients at the bank</legend> 
      <form action="blablabla">     <!-- THAT ONE forwards to a servlet that's called Admin1.java -->
        <a href="adminAdds1">Press here to continue</a>  
      </form>
    </fieldset>

    <fieldset>
      <legend>To get a list of all the overdraft clients at the bank</legend> 
      <form action="blablabla">     <!-- THAT ONE forwards to a servlet that's called Admin1.java -->
        <a href="adminAdds1">Press here to continue</a>  
      </form>
    </fieldset>

    <fieldset>
      <legend>To get the number of overdraft clients at the bank</legend> 
      <form action="blablabla">     <!-- THAT ONE forwards to a servlet that's called Admin1.java -->
        <a href="adminAdds1">Press here to continue</a>  
      </form>
    </fieldset>

    <fieldset>
      <legend>To get a full financial report for the current month</legend> 
      <form action="blablabla">     <!-- THAT ONE forwards to a servlet that's called Admin1.java -->
        <a href="adminAdds1">Press here to continue</a>  
      </form>
    </fieldset>

    <fieldset>
      <legend>To get a full financial report for a specific date</legend> 
      <form action="blablabla">     <!-- THAT ONE forwards to a servlet that's called Admin1.java -->
        <a href="adminAdds1">Press here to continue</a>  
      </form>
    </fieldset>
</body>

如何在JSP文件的某个角落添加按钮?

问候

3 个答案:

答案 0 :(得分:3)

试试这个

的style.css

#logout
{
float:right;
margin-right:20px;
height:5px;
}
页面中的

<link href="style.css" rel="stylesheet" type="text/css" />
<div id="logout"><button>Your text</button></div>

答案 1 :(得分:2)

就像写css文件一样简单。

首先写一个css。这样的事情:bar.css

@charset "utf-8";
/* CSS Document */

.bar
{
 width:40px;
}

#right
{
    float:right;
    margin-right:20px;
    background:#06F;
}


然后将这些文件放在jsp文件中:

<link href="bar.css" rel="stylesheet" type="text/css" />

对于退出的链接:

<div id ="right" class="bar">
<!-- Your Link to Log out -->
</div>


这只是一个例子。此示例会将您的link置于右侧。设置任何参数,让log out link放在您喜欢的位置。您可能还想将其放在顶部或底部。

答案 2 :(得分:1)

检查一下:

        <!DOCTYPE html>
        <html>
        <head><title>Bank Manager's Transactions Page</title>
        <style type="text/css">
                body,html
                {
                    margin:0;
                }
               #logout
                {
                    float:right;
                }​
            </style>

        </head>
        <body>

<!-- Logout link, instead of using anchor tag you can replace it with button tag ...... -->

            <div id="logout">
                   <a href="logoutPage">LogOut</a>  
            </div> 

<!-- if you chose button tag, you remove the div and you can directly put stylesheet using button id -->

            <table class="title">
              <tr><th>Manager's Transactions Page</th></tr>
            </table>
            <h1>Hello ${name.firstName} ${name.lastName} , You've logged in successfully!</h1>
            <h1>
            Please choose one of the following options
            </h1>

            <!-- The followings are Manager's permissions -->

            <fieldset>
              <legend>To get a list of all the employees at the bank</legend> 
              <form action="blablabla">     <!-- THAT ONE forwards to a servlet that's called Admin1.java -->
                <a href="adminAdds1">Press here to continue</a>  
              </form>
            </fieldset>        

        <!-- code continues...... -->

        </body>​
    </html>