我坚持在 Bootstrap 导航栏内创建一个半圆，例如 this .我在 bootstrap 中创建了一个普通的 float 导航
<header id="header">
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="scroll active"><a href="#home">Home</a></li>
<li class="scroll"><a href="#features">Features</a></li>
<li class="scroll"><a href="#services">Services</a></li>
<li class="scroll"><a href="#portfolio">Portfolio</a></li>
<li class="scroll"><a href="#about">About</a></li>
<li class="scroll"><a href="#meet-team">Team</a></li>
<li class="scroll"><a href="#pricing">Pricing</a></li>
<li class="scroll"><a href="#blog">Blog</a></li>
<li class="scroll"><a href="#get-in-touch">Contact</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
我在这里尝试替换 <li class="scroll"><a href="#about" class="nav-semi">About</a></li> Logo 外观如 this我尝试应用此 css，但它无法正常工作。
//mycss
.nav-semi{
height: 220px;
width: 350px;
border-radius: 0px 0px 490px 490px;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background: #f2f2f2 url("http://semantic-ui.com/images/logo.png") no-repeat center;
}
请帮忙解决这个问题!!
最佳答案
最好你可以使用 photoshop 或 sketch 来完成这些工作。创建半圆形 Logo 并将其放置在导航栏的中心。 使用这个 code
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Trinity School Vellore</title>
<link rel="stylesheet" type="text/css" href="index.css" media="all">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body class=" yui3-skin-sam controls-visible guest-site signed-out public-page site homepage">
<div class="container-fluid" id="header">
<!-- Mobile Nav Begins -->
<div class="row-fluid" id="header-bottom">
<div class="span12">
<ul aria-label="Site Pages" role="menubar">
<li class="" id="layout_11" role="presentation">
<a aria-labelledby="layout_11" href="#" role="menuitem">
<span>Admissions</span>
</a>
</li>
<li class="" id="layout_12" role="presentation">
<a aria-labelledby="layout_12" href="#" role="menuitem">
<span>Academics</span>
</a>
</li>
<li class="" id="layout_13" role="presentation">
<a aria-labelledby="layout_13" href="#" role="menuitem">
<span>News & Events</span>
</a>
</li>
<li id="logo-nav">
<a class="logo" href="#"></a>
</li>
<li class="" id="layout_145" role="presentation">
<a aria-labelledby="layout_145" href="#" role="menuitem">
<span>Infrastructure</span>
</a>
</li>
<li class="" id="layout_15" role="presentation">
<a aria-labelledby="layout_15" href="#" role="menuitem">
<span>Activities</span>
</a>
</li>
<li class="" id="layout_16" role="presentation">
<a aria-labelledby="layout_16" href="#" role="menuitem">
<span>Contact us</span>
</a>
</li>
</ul>
</div>
<!-- Mobile menu starts -->
</div>
</div>
<!---HOMEPAGE BEGINS---->
<div class="container-fluid">
<div class="portlet-layout row-fluid portlet-column portlet-column-only" id="featured-homepage">
<!-- Insert Featured Homepage Structures Here -->
<div class="portlet-dropzone portlet-column-content portlet-column-content-only" id="layout-column_column-1">
<div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-journal-content " id="p_p_id_56_INSTANCE_npwnGKsZFqVt_">
<span id="p_56_INSTANCE_npwnGKsZFqVt"></span>
<section class="portlet" id="portlet_56_INSTANCE_npwnGKsZFqVt">
<header class="portlet-topper">
<h1 class="portlet-title">
<span class="">
<img id="rjus_column1_0" src="spacer.png" alt="" style="background-image: url('_sprite.png'); background-position: 50% -496px; background-repeat: no-repeat; height: 16px; width: 16px;"> <span class="taglib-text hide-accessible">Web Content Display</span> </span> <span class="portlet-title-text">Web Content Display</span> </h1>
<menu class="portlet-topper-toolbar" id="portlet-topper-toolbar_56_INSTANCE_npwnGKsZFqVt" type="toolbar"> </menu>
</header>
<div class="portlet-content">
<div class=" portlet-content-container" style="">
<div class="portlet-body">
<div class="journal-content-article">
<a href="https://prestonhs.org/welcome">
<div class="span4" id="featured-homepage-left" style="background: transparent url('http://placehold.it/660') no-repeat scroll center center / cover ; height: 660px;">
<div class="box">
<h2>Welcome to Trinity School!</h2>
<p> </p>
</div>
</div>
</a>
<a href="https://prestonhs.org/about-preston">
<div class="span4" id="featured-homepage-middle" style="background: transparent url('http://placehold.it/660') no-repeat scroll center center / cover ; height: 660px;">
<div class="box">
<h2>About Trinity</h2>
<p> </p>
</div>
</div>
</a>
<a href="https://prestonhs.org/why_preston">
<div class="span4" id="featured-homepage-right" style="background: transparent url('http://placehold.it/660') no-repeat scroll center center / cover ; height: 660px;">
<div class="box">
<h2>Why Choose Trinity School</h2>
<p> </p>
</div>
</div>
</a>
</div>
<div class="entry-links"> </div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>快乐编码!
关于jquery - 如何在 Logo 的 Bootstrap 导航栏中心创建一个半圆？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41906762/