如何设计我想要的导航标签？

时间：2018-04-03 11:08:29

标签： html css

我正在努力实现这一目标＆gt;   my desired look for nav tabs

但我最终实现了这个the look I managed to make

我使用过的代码:(我正在使用bootstrap，这些只是主题部分代码） customstyles.css＆GT;

＆＃13;
＆＃13; 
.nav li a {
background-color: #e2b12e;
border-right: 1px solid #674d03;
color: #674d03;
display: block;
font-size: 11px;
height: 59px;
line-height: 18px;
padding: 21px 0px 0px;
text-align: center;
text-transform: uppercase;
margin-top: 1px;
}
＆＃13;
＆＃13;
＆＃13;

的index.html＆GT; 

    <div class="row">
        <div class="col-lg-12 ul_content ">
            <ul class="nav nav-tabs nav-justified">
                <li>
                    <a href="#dashboardTab" data-toggle="tab"><span class="glyphicon glyphicon-dashboard"></span>Dashboard</a>
                </li>
                <li>
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-home"></span>MyAccount</a>
                </li>
                <li class="active">
                    <a href="#studentsTab" data-toggle="tab"><span class="glyphicon glyphicon-education"></span>Students</a>
                </li>
                <li>
                    <a href="#teachersTab" data-toggle="tab"><span class="glyphicon glyphicon-lamp"></span>Teachers</a>
                </li>
                <li>
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-folder-open"></span>Courses</a>
                </li>
                <li>
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-edit"></span>Examination</a>
                </li>
                <li>
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-check"></span>Attendance</a>
                </li>
                <li>
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span>Timetable</a>
                </li>
                <li>
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-usd"></span>Fees</a>
                </li>
                <li>
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span>Settings</a>
                </li>

            </ul>
            <!--<div class="tab-content">
            <div id="dashboardTab" class="tab-pane">
                <h3>Dashboard Page</h3>
                <p>Dashboard Page Content</p>
            </div>
        </div>-->



        </div>


    </div>
    <div class="row">
    <div class="col-lg-12 ul_content">
        <ul class="nav nav-tabs nav-justified">
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-oil"></span>Hostel</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-bed"></span>Transport</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-book"></span>Library</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-save"></span>Downloads</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-import"></span>Import</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-export"></span>Export</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-comment"></span>Notify</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-duplicate"></span>Reports</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-shopping-cart"></span>Purchase</a>
            </li>
            <li>
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-user"></span>HR</a>
            </li>
        </ul>

    </div>

</div>

请告诉我我做错了什么以及我应该改变什么来实现我对这些导航标签的期望外观。

1 个答案:

答案 0 :(得分：1)

1 - 您错过了包含代码的<div class="container"></div>标记。这就是没有人得到正确输出的原因。还要在代码段中添加HTML和CSS。

2 - 您正在使用<ul> <li>来实现您想要的目标，这很糟糕。使用bootstrap时，只需使用<div>包装元素并使用类。你可以继承其他标签中的内容，完全控制你的元素是件好事，所以使用<div>和<span>是可行的方法。

3 - 在应用这些更改之后，我会做这样的事情：

＆＃13;
＆＃13; 
.each_tab a {
background-color: #e2b12e;
border-right: 1px solid #674d03;
color: #674d03;
display: block;
font-size: 11px;
height: 59px;
line-height: 18px;
padding: 21px 0px 0px;
text-align: center;
text-transform: uppercase;
margin-top: 1px;
}

.nav {
    display: table;
    table-layout: fixed;
    width:100%;
}
.each_tab {
    display: table-cell;
    height:100px;
}
＆＃13; 
<div class="container">


    <div class="row">
        <div class="col-md-12 ul_content ">
            <div class="nav nav-tabs nav-justified">
            
                <div class="each_tab">
                    <a href="#dashboardTab" data-toggle="tab">
                    <span class="glyphicon glyphicon-dashboard"></span>Dashboard</a>
                </div>
                
                <div class="each_tab">
                    <a href="#" data-toggle="tab">
                    <span class="glyphicon glyphicon-home"></span>
                    MyAccount
                    </a>
                </div>
                
                <div class="each_tab active">
                    <a href="#studentsTab" data-toggle="tab">
                    <span class="glyphicon glyphicon-education"></span>Students</a>
                </div>
                
                <div class="each_tab">
                    <a href="#teachersTab" data-toggle="tab"><span class="glyphicon glyphicon-lamp"></span>Teachers</a>
                </div>
                
                <div class="each_tab">
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-folder-open"></span>Courses</a>
                </div>
                
                <div class="each_tab">
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-edit"></span>Examination</a>
                </div>
                
                <div class="each_tab">
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-check"></span>Attendance</a>
                </div>
                
                <div class="each_tab">
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span>Timetable</a>
                </div>
                
                <div class="each_tab">
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-usd"></span>Fees</a>
                </div>
                
                <div class="each_tab">
                    <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span>Settings</a>
                </div>


            </div>
        </div>
    </div>
    
    
    
    <div class="row">
    <div class="col-md-12 ul_content">
        <div class="nav nav-tabs nav-justified">
        
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-oil"></span>Hostel</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-bed"></span>Transport</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-book"></span>Library</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-save"></span>Downloads</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-import"></span>Import</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-export"></span>Export</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-comment"></span>Notify</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-duplicate"></span>Reports</a>
            </div>
            
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-shopping-cart"></span>Purchase</a>
                </div>
                
                <div class="each_tab">
                <a href="#" data-toggle="tab"><span class="glyphicon glyphicon-user"></span>HR</a>
            </div>
        </div>

    </div>

</div>


</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题