我想在header.jsp中设计一个带有jsp图像的按钮 [英] i want to design a button in header.jsp with image on it jsp

问题描述

请给我示例代码，并提供示例以在标题.jsp页面上创建带有一些菜单的ccs

please give me sample code with a example to create button on header .jsp page with some menu howering ccs

推荐答案

<div id="branding">
    <div id="banklogo">&nbsp;</div>
</div>
<div id="userInfo">
    <br/>
    <div id="loginInfo">
        <p>Welcome <span>Johnathan Montgomery Smith</span></p>
        <p>Your last login was on Sept. 12 2010 at 10:30 AM</p>
    </div>
    <div class="controls">
        <button class="orange_button ui-corner-all font_bold" tabindex="1">LOGOUT</button>
    </div>
</div>

使用以下CSS规则

Use following css rules

#branding { height: 72px; float: left; min-width: 200px; }
#userInfo { height: 72px; float: right; min-width: 480px; }
#userInfo div#loginInfo { float: left; margin: 0 15px 0 0; text-align: right; width: 80%; }
#userInfo div#loginInfo span { font-weight: bold; }
#userInfo div.controls { float: left; }
#userInfo p { color: black; }
#userInfo p a { color: black; }
#userInfo div#loginInfo { float: left; margin: 0 15px 0 0; text-align: right; width: 80%; }
#userInfo div#loginInfo span { font-weight: bold; }
#userInfo div.controls { float: left; }
button.orange_button { cursor: pointer; height: 28px; padding: 0 8px; font-size: 10px; }
button.orange_button { background: transparent top left no-repeat scroll url('themes/orange/backgrounds/btn_bg.png'); border: 0 none; color: #fff; }
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

这应该呈现一个带有右侧注销按钮的标题控件.

This should render a header control with a logout button on right side.

这篇关于我想在header.jsp中设计一个带有jsp图像的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！