个人中心
gpt4 book ai didi

html - 如何从按钮上的链接中删除下划线？

转载 作者：太空宇宙 更新时间：2023-11-03 22:14:57 24 4
gpt4 key购买 nike

下午好!我正在审查一篇大学论文，想从按钮内的链接中删除下划线，只有将鼠标悬停在按钮上时才会出现下划线。我想删除下划线以使按钮完全干净，谁能告诉我哪些标签用于删除？ 

body {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.div {
  display: inline-block;
}

.botao {
  width: 30px;
  height: 45px;
  border-radius: 25px;
}

.esquerda {
  margin-right: 5%;
}

.indicador {
  width: 30px;
  height: 45px;
  border-radius: 25px;
}

.indicador:visited {
  width: 300px;
  height: 45px;
  border-radius: 25px;
}

#compra {
  background-color: orange;
  width: 10%;
  margin-top: 3.5%;
  border-radius: 25px;
}

.btn {
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title>Eco Aero - Viagens</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Boostrap CSS -->
  <link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="../estilo/style.css">
  <script type="text/JavaScript" src="../js/resultadomes.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
                        <span class="navbar-toggler-icon"></span>
                    </button>
      <div class="collapse navbar-collapse" id="navbarSite">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Início</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="sobre.html">Sobre</a>
          </li>
          <li>
            <a class="nav-link" href="contato.html">Contato</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="login.html">Entrar</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="inscrever.html">Inscrever-se</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div id="carouselSite" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselSite" data-slide-to="0" class="active"></li>
      <li data-target="#carouselSite" data-slide-to="1"></li>
      <li data-target="#carouselSite" data-slide-to="2"></li>
      <li data-target="#carouselSite" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="../imagem/slide-01.png" class="img-fluid d-block">
      </div>
      <div class="carousel-item">
        <img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
      </div>
      <div class="carousel-item">
        <img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
      </div>
      <div class="carousel-item">
        <img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
      <span class="sr-only">Anterior</span>
    </a>
    <a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
      <span class="carousel-control-next-icon"></span>
      <span class="sr-only">Próximo</span>
    </a>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center my-5">
        <h1 class="display-3">Passagens Aéreas</h1>
      </div>
    </div>
    <div class="row justify-content-center mb-5">
      <div class="col-sm-12 col-md-10 col-lg-8">
        <form name="consulta" method="post">
          <div class="form-row">
            <div class="form-group col-sm-6">
              <label for="escolhaDataIda">Escolha Data de Ida:</label>
              <input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
            </div>
            <div class="form-group col-sm-6">
              <label for="escolhaDataVolta">Escolha Data de Volta:</label>
              <input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
            </div>
            <div class="form-group col-sm-12">
              <a href="listaderesultados.html">
                <button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 mb-3">
        <hr>
      </div>
      <div class="col-sm-4">
        <h3>Eco Aero - Viagens</h3>
        <p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
      </div>
      <div class="col-sm-4">
        <h3>Menu</h3>
        <div class="list-group text-center">
          <a href="index.hml" class="list-group-item list-group-item-action list-group-item-dark">Início</a>
          <a href="sobre.html" class="list-group-item list-group-item-action list-group-item-dark">Sobre</a>
          <a href="contato.html" class="list-group-item list-group-item-action list-group-item-dark">Contato</a>
          <a href="passagensareas.html" class="list-group-item list-group-item-action list-group-item-dark">Passagens Aéreas</a>
        </div>
      </div>
      <div class="col-sm-4">
        <h3>Social</h3>
        <div class="btn-group-vertical btn-block btn-group-lg" role="group">
          <a class="btn btn-outline-primary" href="#">Facebook</a>
          <a class="btn btn-outline-info" href="#">Twitter</a>
          <a class="btn btn-outline-warning" href="#">Instagram</a>
        </div>
      </div>
      <div class="col-12 mt-5">
        <blockquote class="blockquote text-center">
          <p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
          <footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <!-- Optional JavaScript -->
  <!-- jquery first, then popper.js, then Bootstrap 3S -->
  <script src="../node_modules/jquery/dist/jquery.js"></script>
  <script src="../node_modules/popper.js/dist/umd/popper.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>

</html>

最佳答案

只需将此 CSS 规则添加到最后一行的现有代码中

a {text-decoration: none;}

body{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.div{
    display:inline-block;	
}

.botao{
    width:30px; 
    height:45px;
    border-radius:25px;
}

.esquerda{
    margin-right:5%;
}

.indicador{
    width:30px; 
    height:45px;
    border-radius:25px;
}

.indicador:visited{
    width:300px; 
    height:45px;
    border-radius:25px;
}

#compra{
    background-color:orange;
    width:10%;
    margin-top:3.5%;
    border-radius:25px;
}

.btn, a {
    text-decoration: none;     
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Eco Aero - Viagens</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <!-- Boostrap CSS -->
        <link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../estilo/style.css">
        <script type="text/JavaScript" src="../js/resultadomes.js"></script>
    </head>
    <body>
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                <div class="collapse navbar-collapse" id="navbarSite">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">Início</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="sobre.html">Sobre</a>
                        </li>
                        <li>
                            <a class="nav-link" href="contato.html">Contato</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="login.html">Entrar</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="inscrever.html">Inscrever-se</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="carouselSite" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselSite" data-slide-to="0" class="active"></li>
                <li data-target="#carouselSite" data-slide-to="1"></li>
                <li data-target="#carouselSite" data-slide-to="2"></li>
                <li data-target="#carouselSite" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../imagem/slide-01.png" class="img-fluid d-block">
                </div>
                <div class="carousel-item">
                    <img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
                </div>
                <div class="carousel-item">
                    <img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
                </div>
                <div class="carousel-item">
                    <img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
                <span class="sr-only">Anterior</span>
            </a>
            <a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
                <span class="carousel-control-next-icon"></span>
                <span class="sr-only">Próximo</span>
            </a>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 text-center my-5">
                    <h1 class="display-3">Passagens Aéreas</h1>
                </div>
            </div>
            <div class="row justify-content-center mb-5">
                <div class="col-sm-12 col-md-10 col-lg-8">
                    <form name="consulta" method="post">
                        <div class="form-row">
                            <div class="form-group col-sm-6">
                                <label for="escolhaDataIda">Escolha Data de Ida:</label>
                                <input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="escolhaDataVolta">Escolha Data de Volta:</label>
                                <input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
                            </div>
                            <div class="form-group col-sm-12">
                                <a href="listaderesultados.html">
                                    <button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
                                </a> 
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 mb-3"><hr></div>
                <div class="col-sm-4">
                    <h3>Eco Aero - Viagens</h3>
                    <p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
                </div>
                <div class="col-sm-4">
                    <h3>Menu</h3>
                    <div class="list-group text-center">
                        <a href="index.hml" class="list-group-item list-group-item-action list-group-item-dark">Início</a>
                        <a href="sobre.html" class="list-group-item list-group-item-action list-group-item-dark">Sobre</a>
                        <a href="contato.html" class="list-group-item list-group-item-action list-group-item-dark">Contato</a>
                        <a href="passagensareas.html" class="list-group-item list-group-item-action list-group-item-dark">Passagens Aéreas</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h3>Social</h3>
                    <div class="btn-group-vertical btn-block btn-group-lg" role="group">
                        <a class="btn btn-outline-primary" href="#">Facebook</a>
                        <a class="btn btn-outline-info" href="#">Twitter</a>
                        <a class="btn btn-outline-warning" href="#">Instagram</a>
                    </div>
                </div>
                <div class="col-12 mt-5">
                    <blockquote class="blockquote text-center">
                        <p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
                        <footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
                    </blockquote>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <!-- Optional JavaScript -->
        <!-- jquery first, then popper.js, then Bootstrap 3S -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/popper.js/dist/umd/popper.js"></script>
        <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
    </body>
</html>

关于html - 如何从按钮上的链接中删除下划线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57224861/

24 4 0
文章推荐： c++ - Opencv-2.4.5 是否预先启用了 TBB？
文章推荐： node.js - 在登录表单中使用护照时收到错误请求
文章推荐： visual-c++ - 在 Windows 应用商店应用程序上使用 OpenCV 人脸识别的最佳方式是什么？
文章推荐： node.js - BrowserQuest 中的 websocket 服务器替换
太空宇宙
个人简介

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

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