亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何創建邊框底部?

如何創建邊框底部?

HUX布斯 2023-12-11 16:22:15
我想在導航欄中的活動鏈接和懸停鏈接上設置邊框底部。@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Quantico:wght@400;700&display=swap");* {  box-sizing: border-box;  margin: 0;  padding: 0;}body {  font-family: "Open Sans", sans-serif;}h1,h2,h3,h4,h5,h6 {  font-family: "Quantico", sans-serif;}a {  font-family: "Quantico", sans-serif;  text-decoration: none;  color: #111;}ul {  list-style: none;}/* Theme */.container {  max-width: 1200px;  margin: 0 auto;}.main-color {  color: #009603;}/* Nav */nav {  padding: 20px 0;  overflow: hidden;}nav h1 {  float: left;  font-size: 30px;  text-transform: uppercase;}nav ul {  float: right;  line-height: 2.5;}nav ul li {  float: left;  margin-right: 30px;}nav ul li a {  font-weight: 700;  text-transform: uppercase;  padding: 30px 8px;}nav ul li a:active,a:hover {  border-bottom: #009603 3px solid;}<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Pacocha | Garden Projects</title>    <link rel="stylesheet" href="css/style.css" />    <script      src="https://kit.fontawesome.com/1685e275a4.js"      crossorigin="anonymous"    ></script>  </head>  <body>    <header>      <nav>        <div class="container">          <a href="index.html">            <h1><i class="fas fa-leaf main-color"></i> Pacocha</h1>          </a>          <ul>            <li><a href="index.html">Home</a></li>            <li><a href="about.html">About</a></li>            <li><a href="services.html">Services</a></li>          </ul>        </div>      </nav>    </header>  </body></html>但正如您在我的代碼片段中看到的 - 我的邊框是 1 像素而不是 3 像素。為什么?我不知道更多細節我可以添加。這是填充物的隨機文本,因為我相信問題已經很清楚 這是填充物的隨機文本,因為我相信問題已經很清楚了
查看完整描述

2 回答

?
qq_遁去的一_1

TA貢獻1725條經驗 獲得超8個贊

overflow: hiddennav,它隱藏了部分邊框,因此您可以嘗試增加填充或減少導航的高度來解決它。



查看完整回答
反對 回復 2023-12-11
?
繁星點點滴滴

TA貢獻1803條經驗 獲得超3個贊

對于底部的邊框,您只需使用border-bottom: 2px solid red;


例子


a {

  color: #fff;

  background: #333;

  padding: 5vh;

  border-bottom: 5px solid #4caf5c;

}


a:hover{

  border-bottom: 5px solid red;

}

<a>this is a link</a>


查看完整回答
反對 回復 2023-12-11
  • 2 回答
  • 0 關注
  • 154 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號