2018.3.30 边框应用与导航栏设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            /*制作三角形*/
            #one{
                width: 0px;
                height: 0px;
                border-top: 100px solid blue;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }
            /*制作箭头*/
            #two{
                width: 100px;
                height:100px;
                border-bottom: 10px solid blueviolet;
                border-left: 10px solid blueviolet;
                /*rotate:旋转*/
                transform:rotate(45deg);
            }
            /*制作可变化的导航栏*/
            #three{
                width: 800px;
                height: 50px;
                border: 5px solid #e9e9e9;
            }
            #three li{
                width: 140px;
                height: 50px;
                font-family: "微软雅黑";
                float: left;
                line-height: 50px;
                margin-top: -17px;
            }
            /*当鼠标放上后发生的改变*/
            li:hover{
                width: 140px;
                height: 48px;
                color: white;
                background-color: #b3b6bb;
                border-top: 1px solid #F39;
                line-height: 50px;
                margin-top:-16px;    
            }
            /*排列去掉排头序号*/
            ul{
                list-style: none;
            }
        </style>
    </head>
    <body>
        <center>
            <h3>第一题</h3>
            <div id="one"></div>
        </center>
        <br />
        <br />
        <br />
        <center>
            <h3>第二题</h3>
            <br />
            <div id="two"></div>
        </center>
        <center>
        <br />
        <br />
        <br />
            <h3>第三题</h3>
            <br />
            <div id="three">
                <ul>
                    <li>春节</li>
                    <li>元宵节</li>
                    <li>端午节</li>
                    <li>中秋节</li>
                    <li>国庆节</li>
                </ul>
            </div>
        </center>
        <br />
        <br />
        <br />
    </body>
</html>

ruby on rails框架集成了大量的web2.0效果,结合现在网站大量使用选项卡效果,我们也得让我们的ror项目结合潮流,下面有多个实例供大家参考使用:
1:仿126邮箱选项卡 鼠标点击
金沙官网线上 1

Html代码 金沙官网线上 2

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  
  2. <html xmlns="http://www.w3.org/1999/xhtml"**&gt;**  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
  5. <title>简洁Tab</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body,div,ul,li{   
  9.  padding:0;   
  10.  text-align:center;   
  11. }   
  12. body{   
  13.  font:12px "宋体";   
  14.  text-align:center;   
  15. }   
  16. a:link{   
  17.  color:#00F;   
  18.  text-decoration:none;   
  19. }   
  20. a:visited {   
  21.  color: #00F;   
  22.  text-decoration:none;   
  23. }   
  24. a:hover {   
  25.  color: #c00;   
  26.  text-decoration:underline;   
  27. }   
  28. ul{ list-style:none;}   
  29. /*选项卡1*/   
  30. #Tab1{   
  31. width:460px;   
  32. margin:0px;   
  33. padding:0px;   
  34. margin:0 auto;}   
  35. /*选项卡2*/   
  36. #Tab2{   
  37. width:576px;   
  38. margin:0px;   
  39. padding:0px;   
  40. margin:0 auto;}   
  41. /*菜单class*/   
  42. .Menubox {   
  43. width:100%;   
  44. background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);   
  45. height:28px;   
  46. line-height:28px;   
  47. }   
  48. .Menubox ul{   
  49. margin:0px;   
  50. padding:0px;   
  51. }   
  52. .Menubox li{   
  53.  float:left;   
  54.  display:block;   
  55.  cursor:pointer;   
  56.  width:114px;   
  57.  text-align:center;   
  58.  color:#949694;   
  59.  font-weight:bold;   
  60.  }   
  61. .Menubox li.hover{   
  62.  padding:0px;   
  63.  background:#fff;   
  64.  width:116px;   
  65.  border-left:1px solid #A8C29F;   
  66.  border-top:1px solid #A8C29F;   
  67.  border-right:1px solid #A8C29F;   
  68. background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);   
  69.  color:#739242;   
  70.  font-weight:bold;   
  71.  height:27px;   
  72. line-height:27px;   
  73. }   
  74. .Contentbox{   
  75.  clear:both;   
  76.  margin-top:0px;   
  77.  border:1px solid #A8C29F;   
  78.  border-top:none;   
  79.  height:181px;   
  80.  text-align:center;   
  81.  padding-top:8px;   
  82. }   
  83. -->  
  84. </style>  
  85. <script>  
  86. <!--   
  87. /*第一种形式 第二种形式 更换显示样式*/   
  88. function setTab(name,cursel,n){   
  89.  for(i=1;i<=n;i++){   
  90.   var menu=document.getElementById(name+i);   
  91.   var con=document.getElementById("con_"+name+"_"+i);   
  92.   menu.className=i==cursel?"hover":"";   
  93.   con.style.display=i==cursel?"block":"none";   
  94.  }   
  95. }   
  96. //-->  
  97. </script>  
  98. </head>  
  99. <body>  
  100. <br><br>  
  101. <div id="Tab1">  
  102. <div class="Menubox">  
  103. <ul>  
  104.    <li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li>  
  105.    <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>  
  106.    <li id="one3" onclick="setTab('one',3,4)">新闻3</li>  
  107.    <li id="one4" onclick="setTab('one',4,4)">新闻4</li>  
  108. </ul>  
  109. 金沙官网线上,</div>  
  110.  <div class="Contentbox">  
  111.    <div id="con_one_1" class="hover">新闻列表1</div>  
  112.    <div id="con_one_2" style="display:none">新闻列表2</div>  
  113.    <div id="con_one_3" style="display:none">新闻列表3</div>  
  114.    <div id="con_one_4" style="display:none">新闻列表4</div>  
  115.  </div>  
  116. </div>  
  117. <br>  
  118. <div id="Tab2">  
  119. <div class="Menubox">  
  120. <ul>  
  121.    <li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li>  
  122.    <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>  
  123.    <li id="two3" onclick="setTab('two',3,4)">新闻3</li>  
  124.    <li id="two4" onclick="setTab('two',4,4)">新闻4</li>  
  125. </ul>  
  126. </div>  
  127.  <div class="Contentbox">  
  128.    <div id="con_two_1" >新闻列表1</div>  
  129.    <div id="con_two_2" style="display:none">新闻列表2</div>  
  130.    <div id="con_two_3" style="display:none">新闻列表3</div>  
  131.    <div id="con_two_4" style="display:none">新闻列表4</div>  
  132.  </div>  
  133. </div>  
  134. </body>  
  135. </html>  

    简洁Tab

    新闻列表1

    新闻列表1

2:鼠标经过的

Html代码 金沙官网线上 3

本文由金沙官网线上发布于Web前端,转载请注明出处:2018.3.30 边框应用与导航栏设置

您可能还会对下面的文章感兴趣: