今天小编跟大家讲解下有关多角色选项卡登录效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关多角色选项卡登录效果 的相关资料，希望小伙伴们看了有所帮助。
多角色选项卡登录效果图如下： 其实是绿色的边框 选中的角色 也会标绿 但是截图出来就成这效果了 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="https://www.aidi.net.cn//css/css/style.css"media="all"/> <script type="text/javascript"src="https://www.aidi.net.cn//css/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="https://www.aidi.net.cn//css/images/li.png"/> <a href="">免费申请成为供应商</a> <img src="https://www.aidi.net.cn//css/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"; *{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} .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); } .tabPanel .hit{ border-color:#B9D894 #B9D894 #FFF;cursor:pointer;color:black;text-shadow:0 1px 0 #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;} #Main { 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; 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; 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 { width: 55px; } .b{ margin:15px 10px 10px 10px;}来源：爱蒂网
