个人中心
gpt4 book ai didi

html - 将链接设置为固定事件

转载 作者：太空宇宙 更新时间：2023-11-04 02:24:27 25 4
gpt4 key购买 nike

您好，我希望我的“主页”链接在主页中处于事件状态。我怎样才能将它设置为固定的事件像这样在图片中。我希望该链接在主页中保持不变。请给我一些想法。

enter image description here

这是我的元素在主页中未设置的图片。

enter image description here

这是我的html代码。

<!DOCTYPE html>
<html>
<head>
    <title>Student Portal</title>
    <link rel="stylesheet" href ="css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href="style.css" rel ="stylesheet">
    <link rel="shortcut icon" type="img/png" href="img/asd.png"/>
</head>
<body>
    <div class ="top-bar-dark">
        <div class="container">
            <div class="row">
                  <div class="col-sm-4 col-xs-7">
                        <div class="top-bar-socials">
                            <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
                                <i class="fa fa-facebook"></i>
                            </a>
                            <a href="https://twitter.com/official_gapc">
                                <i class="fa fa-twitter"></i>
                            </a>
                            <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
                                <i class="fa fa-linkedin"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-8 col-xs-5 text-right">
                        <ul class="list-inline top-dark-right">                      
                            <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
                            <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
                            <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>
        <nav class="navbar navbar-default navbar-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                <span class="icon-bar" ></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>  
            </button>
               <img class="img-responsive"src="images/brandz.png"> 

        </div>

    <div class="collapse navbar-collapse" id="nav-collapse"> 
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
             <li><a href="#">About us</a></li>
              <li><a href="#">Admissions</a></li>
            <li><a href="#">Contact us</a></li>
             <li><a href="#">Faculty Portal</a></li>
                    <!-- Modal -->
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                    <!-- Modal content-->
                             <div class="modal-content">
                                 <div class="modal-header">
                                    <img class ="modal-logo center-block" src="images/asd.png" >
                                 </div>
                                 <div class="modal-body">
                                    <form role="form">
                                        <div class="form-group">
                                            <div class="input-group">
                                               <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                               <input type="username" class="form-control" placeholder="Student No.">
                                            </div>
                                        </div>
                                         <div class="form-group">
                                             <div class="input-group">
                                                <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                                                <input type="password" class="form-control" placeholder="Password">
                                             </div>
                                        </div>

                                        <div class="form-group">
                                          <button type="button" class="btn btn-danger btn-sm btn-block">Log in</button>
                                        </div>
                                    </form>  
                                 </div>

                             </div>
                            </div>
                       </div>
        </ul>
    </div>
</div>
</nav>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

这是我的CSS代码。 
.top-bar-dark {
  background-color: #a92419;
}

.top-bar-light {
  background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
  border-color: #ddd;
}

.top-bar-light .top-dark-right li a:hover {
  color: #32c5d2;
}
.top-bar-socials {
  line-height: 30px;
  padding-top: 5px;
}
.top-bar-socials:after {
  display: table;
  clear: both;
  content: "";
}
.top-bar-socials a {
  margin: 0px 8px;
  text-decoration: none;
  font-size:18px;
  color: #fff;
}

.top-dark-right {
  margin: 0px;
  padding: 0px;
}

.top-dark-right li {
  line-height: 40px;
  border-left: 1px solid #932015;
  padding: 0px 10px;

}

.top-dark-right li, .top-dark-right li a {
  color: #d7d7d7;
  font-size: 12px;
}

.top-dark-right li i {
  margin-right: 5px;
}

.top-dark-right li a:hover {
  color: #fff;
}
a.login{
  text-decoration: none;
}
.fa-facebook:hover{
  color:#3b5998;
}
.fa-twitter:hover{
  color:#1dcaff;
}
.fa-linkedin:hover{
  color:#007bb5;
}
.navbar-default .navbar-nav > li > a {
 font-weight: 590;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 80px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 }
 .navbar-default{
 background-color:#fff;
 margin: 0;

 }
 .nav>li>a {
 position: relative;
 }
.navbar-default .navbar-right > li > a {
padding: 0 30px;
 }
.navbar-default .navbar-toggle .icon-bar {
 background-color: #000000;
 margin:0 0 4px;
 width: 25px;
 height: 5px;
}
 .nav.navbar-nav > li{
 display: :inline-block;
 }
 .nav.navbar-nav{
 list-style-type:none;
 }
 .nav.navbar-nav > li > a:hover{
    color:#a92419;
   border-bottom-color: #a92419;
  }

  .navbar-default .navbar-toggle .icon-bar {
  background-color:#a92419 ;
  margin:0 0 4px;
  width: 25px;
  height: 5px;

  }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
  background: none;
  }
  button.navbar-toggle{
  background:none;
  border:none;
  color:#000;
  margin: 0px;
}

最佳答案

修改你的 CSS

  .nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
    color:#a92419;
   border-bottom-color: #a92419;
  }

并将 HTML 中的事件类添加到 Home li 
<li class="active"><a href="#" >Home</a></li>

fiddle

关于html - 将链接设置为固定事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37559961/

25 4 0
文章推荐： python Pandas : Create a new column with values in English by converting values stored in a different column in Chinese traditional
文章推荐： python - 如何使用一个函数在不同列上执行多个 pandas 数据类型更改？
文章推荐： python - 无法在 Python Pandas 中添加具有值的多列
文章推荐： c++ - 使用 __declspec(dllexport) 时出错 : Unknown type name '__declspec'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com