右側頁簽

最新推荐文章于 2021-01-04 07:58:39 发布

losedguest

最新推荐文章于 2021-01-04 07:58:39 发布

阅读量318

点赞数

分类专栏： HTML5 文章标签： HTML HTML-頁簽

本文链接：https://blog.csdn.net/losedguest/article/details/78918251

版权

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>Title</title>
    <script type="text/javascript" src="JS/jquery.js"></script>
    <script>
        $(document).ready(function () {
        })
    </script>
    <style>
        body {
            margin:0px;
            padding:0px;
        }    
           #MainBox {
            width:100%;
            height:100%;
            position:relative;
            background-color:#b200ff;
        }
        #Main {
             background-color:aliceblue;
        }
        #RihtBox {
            position:absolute;
            right:0px;
             height:100%;          
            width:300px;
        }
        #Tab {
            float:left;   
            height:100%;                      
              display: table-cell;    
               vertical-align:middle;
               text-align:center;      
        }
          #Tab i {
    display:inline-block;
    height:100%;
    vertical-align:middle;
          text-align:center;     
} 

          #Tab .Tabs {      
               display:inline-block;               
             vertical-align:middle;
              text-align:center;   
               width:20px;  
        }  
        #Tab .Tab {
              vertical-align:middle;             
              width:100%;
              background:#b6ff00;    
              display:inline-block;
              border-left:1px solid #00ffff;    
              border-top:1px solid #00ffff;    
              border-bottom:1px solid #00ffff;
              vertical-align: middle;
              -moz-user-select: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              user-select: none;
              border-top-left-radius:10px;
              border-bottom-left-radius:25px; 
              padding-bottom:1.4em;
              padding-top:1.4em;
            }
            #Tab .Tab:hover {
                 background-color:#00ff90;
            }
             #Tab .Tab-Active {
                 background-color:#00ff90;
            }
            #Tab .Tab-close {
              border-top-left-radius: 10px;
              border-bottom-left-radius: 10px;
              padding-bottom:0.5em;
              padding-top:0.5em;
              cursor:pointer;
            }
            #Tab .Tab-close .ico {
                height:10px;
                width:6px;                
                }         
        #TabBox {
             float:right;  
             width:calc(100% - 25px);
              height:100%;
                background-color:#00ff90;
        }
          .Tab-ico-left {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE0QTk1QTVBRTYwMTExRTdBRjQxOERENjkwQUFCMDI0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE0QTk1QTVCRTYwMTExRTdBRjQxOERENjkwQUFCMDI0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTRBOTVBNThFNjAxMTFFN0FGNDE4REQ2OTBBQUIwMjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTRBOTVBNTlFNjAxMTFFN0FGNDE4REQ2OTBBQUIwMjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz79g2URAAAAbElEQVR42mL8//8/AzJgjJv638dAgYEBJAHDDLFT/jOsf/kfRDMhq2QIDIHrZIILuruhGMkEFtTXYWD4+pWB4c8fVB3YANP/RdmMDBevMDBwczMwsLCg6gBL7tyFqgPGAEuuX4PwDy4PAgQYADcaMJfVpu88AAAAAElFTkSuQmCC);
             background-repeat:no-repeat;
            background-position:center;
            background-size:contain;

            display:inline-block;
        } 
         .Tab-ico-right {
              transform:rotate(180deg);
              -ms-transform:rotate(180deg); /* IE 9 */
              -webkit-transform:rotate(180deg); /* Safari and Chrome */
        } 
    </style>
</head>
<body>
    <div id="MainBox">
        <div id="Main"></div>
        <div id="RihtBox">
            <div id="Tab">
                <i></i>
                <span class ="Tabs">
                    <span class="Tab Tab-close" id="tab-close"><b class="ico Tab-ico-left Tab-ico-right"></b></span>
                    <span class="Tab" id="tab-recent">最近</span>
                    <span class="Tab" id="tab-ogroup">集團</span>
                    <span class="Tab" id="tab-lxgroup">樂信群</span> 
                    <span class="Tab" id="tab-lxcontact">樂信好友</span>         
                </span>
            </div>
            <div id="TabBox"></div>
        </div>
    </div>
</body>
</html>

这里写图片描述

losedguest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
右側頁簽

<html lang="en"><head> <meta name="renderer" content="webkit" /> <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-w
复制链接

扫一扫

专栏目录