Układ cross-browser i gumowych przycisków w html
Na somie dzielą się tematem, który nie jest nowy, ale często popełniają wiele błędów w tym temacie. Dzisiaj, z mojego osobistego doświadczenia programistycznego, chcę podzielić się ciekawym doświadczeniem dotyczącym układu przycisków w html. Pierwszą rzeczą, której potrzebujemy, jest poprawne zbudowanie struktury przyszłego przycisku:
1 |
<a class="GlobalOrangeButton" href="https://wp-admin.com.ua"><span>Уроки WordPress</span></a> |
CSS dla tego przycisku będzie wyglądał następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
a.GlobalOrangeButton span { background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff; } a.GlobalOrangeButton { background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; } a.GlobalOrangeButton:hover span { background-position: 0 -34px; color: #fff; } |
Wszystko jest bardzo proste, ale czasami zapomina się o tej prostej i skutecznej metodzie układania, chociaż wielu klientów wymaga zarówno zaokrąglania, jak i cieniowania w IE 7. Ponadto przyciski będą dobrze wyglądać w przeglądarkach operowych, firefox, Safari, przeglądarka Yandex i wiele innych, nawet w starszych wersjach. Wszystko to można zrobić w najprostszy sposób., który pokazałem powyżej.
Ten artykuł został opublikowany na podstawie mojego własnego doświadczenia w tworzeniu stron internetowych i mojego ostatniego układu przycisków. Weź przykładowy artykuł stąd. Jeśli materiał jest dla Ciebie przydatny, pisać, Będę zadowolony z twoich komentarzy.
/*
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.