1. дома
  2. Вопрос и ответ
  3. Как создать полукруг в центре навигационной панели для логотипа?

Как создать полукруг в центре навигационной панели для логотипа?

2017-01-28 2 views
0

Я застрял на создании полукруга внутри загрузочного навигатора, например this. Я создал нормальный плавал СЧ в загрузчикеКак создать полукруг в центре навигационной панели для логотипа?

<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> для логотипа внешнего вида, как 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; 
}

Пожалуйста, помогите решить эту проблему!

источник

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>

Днем Coding !!

источник

2017-01-28 08:21:32 Rajaraman

+0

Спасибо, хорошая идея! Фрагмент кода, который вы предоставили на codepen, точно соответствует моему требованию ... –

0

Для размещения логотипа необходимо создать ul, а затем установить border-radius. Думаю, this link прояснит, как это сделать.

источник

2017-01-28 10:47:16

 Смежные вопросы

  • Нет связанных вопросов^_^