Question

div {
  width: 1310px;
  padding: 10px;
  margin: 0;
  background-color: #212F3D;
  text-align: center;
}

<div class="topnav-centered" id="myTopnav">
  <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="01.HTML" class="active">Home</a>
  <a style="font-family:Verdana; color:White; font-size: 20px;  display:inline; padding: 10px 50px; " href="02.HTML">HTML</a>


</div>

我正在为学校做一个html项目，我想绕过顶部导航栏。我有一个代码，但是不确定我是否给出了正确的代码。如果我还没有告诉我，我将对其进行正确的编辑。

Answer 1

尝试一下，您就完成了...

div {
    border-radius: 20px;
}

div{
    width: 1310px;
    padding: 10px;
    margin: 0; 
    background-color: #212F3D;
    text-align: center;
    border-radius: 20px;
}

<div class="topnav-centered"id="myTopnav">
  <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; "href="01.HTML" class="active">Home</a>
  <a style="font-family:Verdana; color:White; font-size: 20px;  display:inline; padding: 10px 50px; "href="02.HTML">HTML</a>


</div>

Answer 2

使用border-radius使导航栏的边缘变圆。您还可以通过以下方式定位每个角点：

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

随意使用这些值。这是您的代码https://www.w3schools.com/code/tryit.asp?filename=FWTO4Y7J67ZA
一些建议：您应该按类别或ID定位顶部导航栏。我建议您按班级参考来做。另外，请尽可能避免使用内联样式，因为您将不得不多次编写代码。

Answer 3

这将使您使用特定的值舍入特定的角。

div{
    width: 1310px;
    padding: 10px;
    margin: 0; 
    background-color: #212F3D;
    text-align: center;
    border-radius: 20px;
}

div {
//you can manipulate which side to round and which not
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

<div class="topnav-centered" id="myTopnav">
  <a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="01.HTML" class="active">Home</a>
  <a style="font-family:Verdana; color:White; font-size: 20px;  display:inline; padding: 10px 50px; " href="02.HTML">HTML</a>


</div>

导航栏上的圆角（HTML）

3 个答案: