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

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

转载作者：太空宇宙更新时间：2023-11-04 02:24:27

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

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

这是我的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/

文章推荐： python - 无法在 Python Pandas 中添加具有值的多列

html - 具有全屏高度的 3 列布局(固定-流体-固定)
我正在尝试实现 3 列固定-流体-固定布局。此外，布局的高度必须占据整个屏幕，使其看起来像从上到下的 3 个实心列。总结: Left-column: fixed-width Center-col
html - 具有最小宽度的 3 列布局(固定、流动、固定)
我在网上搜索过，似乎找不到一个干净、简单、所有浏览器都友好的 3 列布局。我希望有 3 列布局，左列固定为 200px，右列固定为 200px，中间列为剩余宽度，但最小宽度为 600px。所以整体最
css - 如何创建 3 列布局(固定、固定、流动)
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this q
audio - 音频归一化/固定？
我正在使用一些音频指纹技术来标记长录音中的歌曲。例如，在广播节目中的记录。指纹机制工作正常，但我在归一化(或下采样)方面遇到问题。在这里您可以看到两首相同的歌曲，但波形不同。我知道我应该进行一些直流
c++ - 固定，设定精度功能
为什么使用cout调用setprecision和fixed以及其他iomanip函数不像例如name.find('')plz这样的字符串函数最佳答案它们允许您以以下方式链接操作: cout <<
jquery - 固定/跟随侧边栏的问题
我正在尝试创建一个侧边栏，当用户向下滚动页面时，该侧边栏会跟随用户，并且我设法使用以下代码实现了效果: 标记 Javas
macos - 内存是否被锁定(固定)？
我正在尝试设置一些性能分析以及影响缓冲策略的运行时决策。我的应用程序收到一个指向由库(CUDA 或 OpenCL)分配的缓冲区的指针。如何测试内存区域是否被页面锁定？据我所知，POSIX 给了我们
C# - 固定/内联数组
我正在用 C# 编写一个 B+ 树实现，我为我的应用程序选择的树实现有一个非常特定的结构，它是缓存敏感的。为了实现这些属性，它对树节点有严格的布局策略。我想要的只是使用 C# 的 fixed 来表达
Android，在屏幕底部定位一个元素，固定
我试图通过将 fragment 注入(inject)容器来在每个屏幕的底部放置一个广告 View 。通过使用 LinearLayout，我可以将 adview 置于操作栏下方的顶部。我已经尝试了 Re
jquery - 导航 - 固定
我正在尝试创建一个导航稍微复杂的网站。我已经让导航看起来像我想要的初始加载，但现在我试图让它粘性导航到滚动顶部。我已经能够在导航栏到达顶部时创建一个类，但无法使其粘滞。每次我添加一个位置时，它都会跳回
css - 固定、动态高度元素占用空间的解决方案
首先，我正在寻找一个纯 CSS 解决方案。我可以使用 JavaScript 非常轻松地做到这一点，所以不要费心给我提示如何在 JS 中做到这一点。我有一个包含 3 个容器的网页。其中 2 个是固定的
CSS 固定/绝对定位到较早的亲戚？
我猜这里有一种 super 特例。我正在处理许多包含。现在我正在一个包含的内容文件中编码。我需要一个灯箱，它有一个 20% 的黑色背景覆盖整个页面，包括本身固定的标题，并在先前的 PHP 文件中设置
css - 固定/相对定位 :
我正在尝试制作一个包含两个“固定”侧边栏图像和一个“固定”标题图像的页面。由于标题是固定的(距顶部 0 到 10%)。我不希望页眉图像与页面上的任何文本重叠。我尝试将段落标记定位为“相对”，并将其设置
CSS:居中位置:固定
我遇到了一个(水平)居中固定位置元素的解决方案，如下所示: element { width: 200px; position: fixed; left: 0; righ
HTML 正文高度 - 固定？
我试图让我的网站主体具有固定的高度(我想!)。无论如何，站点正文只是白色，边框大小为 1。基本上，正文的大小取决于其中的内容，例如，随着添加更多内容，它会自动调整大小。我想要的是垂直滚动条，这样主
css 布局(固定)
是否可以在 css 中创建 master-detail-states 布局？我需要 3 个占位符: +---------------+-------+ | A | B
同一请求中的 SSL 固定
我的问题是，我是否必须在每个 Get/Post 请求之前单独请求检查 SSL Pinning OkHttpClient client = new OkHttpClient.Builder().cert
algorithm - (固定)平衡树的摊销成本
假设我有一个具有 N 个节点的常量(一旦构建就不会改变)平衡树，每个内部节点都有 p 个子节点。显然，访问节点的最坏情况是 logp(N)。但是访问 r 个节点的摊销成本呢？如果我们按升序访问它们(有
php - 如何防止php项目中的 session 固定？
我知道会话固定是用php破解网站的方法。会话固定是一种允许攻击者劫持有效用户会话的攻击 session fixation 但我不知道这可以防止我的项目中出现此问题。是描述解决方案的方式或样本。最
jQuery Masonry 固定/前置元素
我在 jquery 砖石布局内有一个导航元素，我想将其修复到特定位置，比如右上角。是否可以这样做，以便所有其他元素都位于它周围？诸如前置导航之类的东西.. 这是我的代码:http://jsfiddl

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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