选项卡登录

多角色选项卡登录效果图如下:

选项卡登录_第1张图片

其实是绿色的边框 选中的角色 也会标绿 但是截图出来就成这效果了 可以去我个人博客看demo 地址


html代码如下:

<!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>角色选项卡</title>

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){	
	$('.tabPanel ul li').click(function(){
		$(this).addClass('hit').siblings().removeClass('hit');
		$('.panes>div:eq('+$(this).index()+')').show().siblings().hide();	
	})
})
</script>

</head>

<body>

<div >

    <div class="tabPanel">
		<ul>
			<li class="hit">企业方</li>
			<li>供应方</li>
			<li>京体网</li>
		</ul>
		<div class="panes">
			<div class="pane" style="display:block;">   
      


 <div align="center">
        <div id="Main">
         <div class="form_div1"><span class="span1">用户名:</span><input  type="text" class="Textbox" /></div>
         <div class="form_div1"><span class="span1">密 码:</span><input  type="password" class="Textbox" /></div>
        <div>
      
          <div class="form_div1"><span class="span1"> </span>  <input type="submit" name="btnLogin" value="登  录"  class="Button" style="margin-top: 8px" />  <a  href="#">忘记密码</a>  </div>              
                       
                        
     </div>
        <div style="line-height:32px;margin-top:10px;">
               <img src="images/li.png" /> <a href="#" >免费申请成为供应商</a>
                        <br />
               <img src="images/li.png" />  <a href="#">免费申请成为企业方</a>
						
                        </div>         
             </div>

    </div>

 </div>
	   <div class="pane">
           <h4>Secend tab content</h4>
           <p>First tab content</p>
       </div>
	   <div class="pane">
           <h4>Third tab content</h4>
           <p>First tab content</p>
       </div>
		</div>
    </div>

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

CSS代码如下:

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;word-wrap:break-word;word-break:break-all;}
body{font-family:"宋体","Arial";font-size:12px;background:#fff;min-width:800px;}
ul,li{list-style:none;}
a{text-decoration:none;color:#555;}
h3{font-size:14px;font-weight:bold;margin:0em 0 0.5em 0;}
h2{font-size:16px;font-weight:bold;margin:1em 0}



/**tabs**/
.tabPanel ul{height:23px;border-bottom:1px solid #CECECE; width:294px;}
.tabPanel ul li{
	float:left;margin:0 2px 0 0;border:1px solid #CECECE;font-size:13px;height:22px;line-height:22px;width:94px;text-align:center;cursor:pointer;
	font-family:"Microsoft Yahei";
	text-shadow:0 1px 0 #fff;
	border-radius:4px 4px 0 0;
	box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5);
/*	background:#ddd;
	background:-moz-linear-gradient(top, #eee, #ddd);
	background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));*/
}
.tabPanel .hit{
	border-color:#B9D894 #B9D894 #FFF;cursor:pointer;color:black;text-shadow:0 1px 0 #FFF;
	/*background:#fff;
	background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff));
	background:-moz-linear-gradient(top, #e1e1e1, #fff);*/
}









.pane{border:1px solid #B9D894;border-top:0;min-height:100px;background-color:#fff;display:none; width:290px; height:285px}
.pane p{padding:15px 15px 0 10px;}
.pane h4{padding:15px 15px 0 10px;font-size:14px;font-weight:bold;}




/**88888888888888888888888888*/


#Main {
   /* background-color: #fff;
    border-color: #bbb;
    border-right: 1px solid #bbb;
    border-style: solid;*/
    border-width: 1px;
    padding: 30px 20px 30px 30px;
    text-align: left;
    
	font-family:"Microsoft Yahei";
    font-size: 13px;
}
div#Heading {
    color: #904;
    font-family: arial;
    font-size: 150%;
    font-weight: bold;
    margin: 0;
    padding: 0 0 15px;
}
h2 {
    border-bottom: 1px solid #ddd;
    color: #999;
    font-size: 105%;
    font-weight: bold;
    margin: 0 0 8px;
    padding: 0;
    text-transform: uppercase;
}
p {
    margin: 0;
    padding: 6px 0;
}

.MyLabel {
    color: #999;
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin: 6px 0 2px;
    text-transform: uppercase;
}
input.Textbox {
    font-family: verdana,arial,sans-serif;
    height: 20px;
    /*padding: 2px;*/
    width: 160px;
	border:1px solid #CECECE;
}
a.Button:link {
    background: none repeat scroll 0 0 #904;
    border-color: #999;
    border-right: 1px solid #999;

    border-width: 1px;
    color: #fff;
    display: block;
    font-family: Verdana;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 12px 3px 20px;
    width: 50px;
}
a.Button:visited {
    background: none repeat scroll 0 0 #904;
    border-color: #999;
    border-right: 1px solid #999;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: bold;
    padding: 3px 12px;
    width: 60px;
}
span.ErrorMessage {
    color: #904;
    display: block;
    font-weight: bold;
}
p.Small {
    font-size: 85%;
    margin-top: 12px;
}
.Button {
    color:#FFF;
    font-family:"Microsoft Yahei";
    font-size: 13px;
    font-weight: bold;
/*    padding-bottom: 3px;
    padding-top: 5px;*/
    width: 60px;
	background-color:#73AD2E;
	border-radius:5px;
	border:none;
}
a.tip_lnk:link, a.tip_lnk:active, a.tip_lnk:visited {
    color:#444;
    text-decoration: underline;
}
a.top_return {
    font-weight: normal;
    padding-left: 5px;
}

 

.form_div1 {
    height: 50px;
    overflow: hidden;
	
}
.form_div1 span {
    display: block;
    float: left;
    overflow: hidden;
    padding: 0 0 0 6px;
	
}

.form_div1 .span2 {
    color: #999;
    padding-top: 6px;
}
.form_div1 .input1 {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: pink;
    border-image: none;
    border-right: 1px solid pink;
    border-style: solid;
    border-width: 1px;
    color: #666;
    height: 20px;
    line-height: 20px;
    width: 198px;
}
.form_div1 .input2 {
    width: 109px;
}

.form_div1 .span1 {
/*    padding-top: 6px;
    text-align: right;*/
    width: 55px;
}

.b{ margin:15px 10px 10px 10px;}
 




你可能感兴趣的:(选项卡登录)