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

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

Promowane odpowiedzi

woras    0

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 Bartek Huza
      Witam! Ostatnio siedziałem przed jednym wyzwaniem, mianowicie nad zrobieniem wysuwanego menu. Udało mi się je skończyć tylko nie działa poprawnie na stronie głównej oraz scrollUp pojawia się gdy scrolluje w dół podczas gdy menu jest wysunięte. Nie wiem jak to naprawić, używałem do tego css, javascript, jquery. Wysyłam pliki, z góry dzięki za pomoc.
       
      index.html


      style.css
      stylewpis.css
      img.css
      code.js
      jquery.scrollTo.min.js
      show-nav.js
    • Przez Salva
      W tym artykule poznasz 7 złych praktyk, których musisz unikać podczas pisania stylów CSS. Obok złych praktyk umieszczone są również ich przeciwieństwa - dobre praktyki. Dzięki temu możesz natychmiast poprawić jakość Twojego kodu.
      Nadużywanie deklaracji !important
      Opisywanie stylów w nazwach selektorów
      Powiązanie selektorów ze strukturą HTML
      Pisanie długich selektorów
      Ignorowanie kolejności elementów HTML
      Ignorowanie specyficzności w kolejności selektorów
      Używanie stylów inline
       
      Źródło i więcej informacji: https://devcorner.pl/zle-praktyki-css-ktorych-musisz-unikac/
    • Gość
      Przez Gość

       
      Przejdź do:
      Panel administracyjny  Użytkownicy  Grupy użytkowników  Zarządzanie grupami użytkowników
       
      Edytuj wybraną grupę, wyczyść pole Obrazek grupy, do pola Prefix grupy wpisz:
      <span class='defaultGroup admin'> a do pola Sufiks grupy:
      </span>
       
      Następnie do ipb_styles.css dodaj:
      /* Grupy */ ul.basic_info .defaultGroup { border-radius: 2px; color: #fff; display: inline-block; font-weight: 500; letter-spacing: 0; padding: 0 15px; text-shadow: none; vertical-align: middle; font-size: 12px; height: 30px; line-height: 30px; box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset; } ul.basic_info .admin { background-color: #c75050; } ul.basic_info .admin:before { content: "\f005"; font-family: 'FontAwesome'; margin-right: 3px; }  
      Jeżeli nie chcemy gwiazdki przed nazwą grupy to należy usunąć z kodu .CSS (ipb_styles.css) klasę .admin:before
       
      Instrukcja dla wersji IPS 4  
      Kod rangi został napisany przez @CzareK  
    • Przez Trele Morele
      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
       

  • Ostatnie tematy

×