Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Promowane odpowiedzi

Całość kodu, składa się tylko z HTML i CSS. Chyba nie ma nic w tym trudnego, pytania w komentarzach.

HTML

Tworzymy sobie poziome menu na zakładkach w HTML...

Rozpocznij listę znacznikiem <ul> , aby uzyskać listę wypunktowaną i zakończ znacznikiem </ul>

Każda pozycja listy powinna zaczynać się znacznikiem <li> i kończyć znacznikiem </li>.

Gotowy kod HTMl:
 

<ul> 
<li><a href="#">Rejestracja</a><li> 
</ul>

Między <ul> a </ul>, możemy tworzyć więcej zakładek do menu, tym samym sposobem co tu

<li><a href="#">Rejestracja</a><li>

Teraz nadamy trochę koloru, naszemu menu.

Gotowy kod CSS

<style> 
ul, ul li {  
       display: block;  
       list-style: none;  
       margin: 0;  
       padding: 0;  
}  
ul {  
       border-bottom: 1px solid #888;  
       float: left;  
       width: 100%;  
       padding-left: 20px;  
}  
ul li {  
       float: left;  
       margin-right: 10px;  
}  
ul a:link, ul a:visited {  
width: 100px;  
       text-decoration: none;  
       display: block;  
       background-color: navy;  
       color: white;  
       padding: 5px 10px;  
       border: 1px solid #888;  
       position: relative;  
       top: 1px;  
       font-weight: bold;  
}  
#current a {  
       background-color: #33FFFF;  
       border-bottom-color: #fff;  
       color: black;  
}  
ul a:hover {  
       background-color: #fff;  
       border-bottom-color: #fff;  
       color: black;  
       border-bottom: 1px solid #888;  
} 
</style>  

Już mi się opisywać tego nie chciało, każdy kto zna na poziomie podstawowym HTML/CSS powinien wiedzieć, co w tym kodzie się znajduje, w razie jakiś problemów czy pytań proszę kierować w tym temacie.

Jak widać nasze menu składa się z 2 kolorów Niebieski ciemny i jasny, biały pojawia się po najechaniu myszką na jedną z naszych zakładek w menu. Kolorki oczywiście można sobie pozmieniać w .css jak i rozmieszczenie.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

  • Podobna zawartość

    • Przez Qwizi
      Witam, zaczynam bawić się framework'iem Laravel w wersji 5.6. Stawiam wszystko na localhoscie. I mam problem ponieważ nie chce on czytać skryptów css oraz js (domyślne utworzonych przez framework).
       
      Wszystko posiadam w folderze public. Tak pobieram sciezke do stylu 
      <link href="{{ asset('css/app.css') }}" rel="stylesheet">
       
      i wywala bład 404

    • Przez STOLARZ
      W tym poradniku dowiesz się jak dodać rangi użytkowników w CSS.
       
      Przejdź do: ACP Strona główna ->  Style -> (Twój styl) -> twojaklasa.css   
       
      (polecam dodać to do css3.css lub stworzyć nową)
       
      Następnie na końcu dodaj kod css:
      .gid-x { background-color: #3366FF; color: #fff; display: inline-block; height: 15px; line-height: 15px; padding: 3px 5px; border-radius: 3px; font-size: 10px; } gdzie x to ID grupy np. 4 (domyślnie jest to grupa administratora)
      ID grupy możesz sprawdzić, np. w linku edycji grupy
       

       
      Teraz przejdź do:
      Szablony » Twój szablon » opis posta » postbit_classic lub postbit (w zależności od tego jaki masz układ posta)
       
      i zamiast 
      {$post['usertitle'] <br />  Wstaw to:
      <div class="gid-{$post['usergroup']}">{$post['usertitle']}</div> <br />  
      Zapisz efekt powinien wyglądać następująco
       

×