1. ホーム
  2. 質問と答え
  3. ロゴのためのboostrap navbarの中央に半円を作成するには？

ロゴのためのboostrap navbarの中央に半円を作成するには？

2017-01-28 12 views
0

thisのように、ブートストラップのナビゲーションバー内に半円を作成していました。私は、ブートストラップロゴのためのboostrap navbarの中央に半円を作成するには？

<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-->

に通常のFLOATED NAVを作成し、ここで私はthisのようなロゴの外観を<li class="scroll"><a href="#about" class="nav-semi">About</a></li>を交換しようとしていると私は、この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; 
}

この問題についてご支援ください！

出典

2017-01-28 Raja Raman TechWorld

答えて

0

フォトショップやスケッチを使ってこのようなことをすることができます。半円形のロゴを作成し、ナビゲーションバーの中央に配置してください。 使用この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>

コーディングハッピー！

出典

2017-01-28 08:21:32 Rajaraman

+0

ありがとうございました！ codepenで提供したコードスニペットは、私の要件とまったく同じです... –

0

ロゴの別のulを作成し、それに応じてborder-radiusを設定する必要があります。私はthis linkがそれについてどうやって行くのかを明確にすると思います。

出典

2017-01-28 10:47:16

関連する問題

 関連する問題