@charset "UTF-8"; * { margin:0; padding:0; font-family:"Microsoft YaHei",Arial,sans-serif; font-size:14px; } li { list-style:none; } .header { height:60px; background:#23262E; } .title { position:absolute; left:0; width:220px; height:100%; line-height:60px; text-align:center; color:#009688; font-size:30px; } .nav { width:220px; overflow-x:hidden; background-color:#393D49; height:800px; } .tab { position:relative; width:220px; height:100%; overflow-x:hidden; } center { float:left; } .nav-item li:hover { background-color:#009688; width:200px; } .nav-item { width:200px; color:#fff; text-align:center; } .list_dt { background:#009688; color:white; width:220px; /*padding:0 40px 0 20px; */ height:40px; line-height:40px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; border-bottom:1px solid #464646; } .list_dt:hover { background:#009688; } .list_dt:hover ._after { display:block; width:20px; height:40px; position:absolute; left:0; top:0; background:#009688; } #open { background:#009688; } #open ._after { display:block; width:20px; height:40px; position:absolute; left:0; top:0; background:#009688; } .list_dt_icon { position:absolute; right:10px; top:9px; display:block; width:16px; height:16px; background:url("../images/off.png") no-repeat; } #open .list_dt_icon { background:url("../images/open.png") no-repeat; } .list_dd { display:none; } /*.list_li { background:#009688; color:white; height:40px; line-height:40px; cursor:pointer; } */ .list_li { width:200px; line-height:40px; height:40px; border:1px solid #6b6b6b; } .first { background-color:#009688; line-height:40px; height:40px; width:200px; } .list_li:hover { background:#009688; height:40px; line-height:40px; } #container { position:fixed; top:60px; bottom:44px; left:220px; right:0; top:60px; bottom:0; z-index:998; width:auto; overflow-y:auto; box-sizing:border-box; } .tabp { height:800px; } input { height:38px; line-height:1.3; border:1px solid #e6e6e6; background-color:#fff; border-radius:2px; outline:none; outline:0; -webkit-appearance:none; transition:all .3s; -webkit-transition:all .3s; box-sizing:border-box; padding-left:10px; } .tabp ul li { margin-left:45px; margin-top:20px; } .button { margin-left:120px; margin-top:50px; height:38px; line-height:38px; padding:0 18px; background-color:#009688; color:#fff; white-space:nowrap; text-align:center; font-size:14px; border:none; border-radius:2px; cursor:pointer; } .nav-item .lis { background:#009688; } .btnseh { width:58px; height:32px; line-height:32px; outline:none; border:none; background:#009688; color:#fff; } .search { margin:20px 0px; }
更新时间:2020-05-14 10:46:23
主要实现了侧边栏的下拉菜单和选项卡切换,可以直接套用